catalogue
Schematic diagram of rendering engine working principle
Browser reflow or layout process
Turn on the Rendering function of Chrome
Format of HTTP request message and response message
Location of hosts file under windows
How Browsers work - How Browsers work
The essence of web Development
Keep the following three points in mind
About C/S (Client/Server) and B/S (Browser/Server)
How browser works
Composition of browser
- Human computer interaction (UI)
- Network request part (Socket)
- JavaScript engine part (parsing and executing JavaScript)
- Rendering engine part (rendering HTML, CSS, etc.)
- Data storage part (cookie, local storage in HTML5, LocalStorage, SessionStorage)
Mainstream rendering engine
introduce
- Rendering engine is also called typesetting engine or browser kernel.
- The main rendering engines are:
- Chrome browser: Blink engine (a branch of WebKit).
- Safari browser: WebKit engine. The windows version was officially launched on March 18, 2008, but Apple stopped developing the windows version of safari on July 25, 2012.
- FireFox browser: Gecko engine.
- Opera browser: Blink engine (Presto engine was used in earlier versions).
- Internet Explorer browser: Trident engine.
- Microsoft Edge browser: EdgeHTML engine (a branch of Trident).
working principle
- Parse HTML to build DOM tree (Document Object Model). DOM is a standard programming interface recommended by W3C to deal with extensible markup language.
- When constructing a rendering tree, the rendering tree is not equivalent to a Dom tree, because elements such as head tags or display: none do not need to be placed in the rendering tree, but they are in the Dom tree.
- Layout the rendering tree, locate coordinates and size, determine whether to wrap lines, determine position, overflow, z-index, etc. this process is called "layout" or "reflow".
- Draw the rendering tree and call the underlying API of the operating system for drawing operation.
Schematic diagram of rendering engine working principle
Working diagram of rendering engine
How WebKit works (Chrome, Safari, Opera)
How Gecko works (FireFox)
The working principle of IE browser rendering engine is not mentioned here, because it is not open source.
Browser reflow or layout process
https://www.youtube.com/watch?v=ZTnIxIA5KGw
Turn on the Rendering function of Chrome
Step 1:
Step 2:
Step 3: click the refresh button, and the highlighted process is the browser reflow process.
Browser access process
1. Enter the web address in the browser address bar.
2. The browser constructs HTTP request message through the URL entered by the user in the address bar.
GET / HTTP/1.1 Host: www.taobao.com Connection: keep-alive Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Accept-Encoding: gzip, deflate, sdch, br Accept-Language: zh-CN,zh;q=0.8,en;q=0.6 Cookie: l=Ag0NWp9E8X4hgaGEtIBhOmKxnSOH6kG8; isg=AkZGLTL-Yr9tHDZbgd5bsn4Rlzwg5IphaK-1BzBvMmlEM-ZNmDfacSyDfdgF; thw=cn
3. The browser initiates a DNS resolution request to convert the domain name to an IP address.
4. The browser sends the request message to the server.
5. The server receives the request message and parses it.
6. The server processes user requests and encapsulates the processing results into HTTP response messages.
HTTP/1.1 200 OK Server: Tengine Date: Thu, 13 Apr 2017 02:24:25 GMT Content-Type: text/html; charset=utf-8 Transfer-Encoding: chunked Connection: keep-alive Vary: Accept-Encoding Vary: Ali-Detector-Type, X-CIP-PT Cache-Control: max-age=0, s-maxage=300 Via: cache8.l2cm10-1[172,200-0,C], cache13.l2cm10-1[122,0], cache3.cn206[0,200-0,H], cache6.cn206[0,0] Age: 293 X-Cache: HIT TCP_MEM_HIT dirn:-2:-2 X-Swift-SaveTime: Thu, 13 Apr 2017 02:19:32 GMT X-Swift-CacheTime: 300 Timing-Allow-Origin: * EagleId: 9903e7e514920502659594264e Strict-Transport-Security: max-age=31536000 Content-Encoding: gzip <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="renderer" content="webkit" /> <title>TaoBao - Amoy! I like it</title> <meta name="spm-id" content="a21bo" /> <meta name="description" content="TaoBao - Asia's largest online trading platform provides all kinds of clothing, beauty, home, digital and telephone charges/Point card recharge... Hundreds of millions of high-quality goods, and provide guarantee transactions at the same time(Receipt before payment)And other security transaction security services, and merchants provide consumer security services such as return commitment and damaged supplementary mail, so that you can enjoy the fun of online shopping!" /> <meta name="aplus-xplug" content="NONE"> <meta name="keyword" content="TaoBao,Take out treasure,Online shopping,C2C,Online transaction,Trading market,Online transaction,Trading market,Buy online,Sell online,Shopping website,Group buying,Online trade,Safe shopping,Electronic Commerce,Rest assured to buy,supply,Trading information,Online shop,Price ,auction,online shop ,Online shopping,Discount,Open a shop for free,online shopping,channel,shop" /> </head> <body> ...... </body> </html>
7. The server sends the HTTP response message to the browser.
8. The browser receives the HTTP message responded by the server and parses it.
9. The browser parses the HTML page and displays it. When parsing the HTML page, it encounters new resources and needs to initiate the request again.
10. The final browser shows the page.
Format of HTTP request message and response message
DNS resolution process
Location of hosts file under windows
C:\Windows\System32\drivers\etc\hosts
DOM parsing
Reference code:
<html> <body> <p>Hello World</p> <div> <img src="example.png" alt="example"/></div> </body> </html>
Webkit CSS parsing
How Browsers work - How Browsers work
How browsers work: behind the scenes secrets of modern web browsers - HTML5 Rocks
The essence of web Development
Keep the following three points in mind
-
Request, the client initiates the request.
-
Processing, the server processes the request.
-
In response, the server sends the processing result to the client
Client processing response
After the server responds, the client continues to process:
-
Browser: parsing the data returned by the server
-
iOS and Android clients analyze the data returned by the server, and realize the display function of the interface through iOS or Android UI technology
About C/S (Client/Server) and B/S (Browser/Server)
C/S: client server (good user experience, stable connection with the server, but independent client needs to be developed for users)
B/S: browser server (easy to deploy and maintain, but poor user experience)