The working principle of browser and the essence of web Development

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

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)

Tags: node.js

Posted on Sun, 10 Oct 2021 00:20:49 -0400 by xgrewellx

Programmer Help