Chrome browser : Blink engine (a fork of WebKit).
Safari browser : WebKit engine, windows version launched the official version 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 (earlier version uses Presto engine).
Internet Explorer browser : Trident engine.
Microsoft Edge browser : EdgeHTML engine (a fork of Trident).

working principle

Parse HTML to build a Dom tree (Document Object Model, Document Object Model). DOM is a standard programming interface recommended by the W3C organization for processing Extensible Markup Language.
Build the rendering tree , the rendering tree is not equivalent to the Dom tree , because head标签或 display: noneelements like this don't need to be placed in the rendering tree , but they are in the Dom tree .
Layout the rendering tree , locate the coordinates and size, determine whether to wrap, determine position, overflow, z-index, etc., this process is called "layout" 或 "reflow".
Draw the rendering tree and call the underlying API of the operating system for drawing operations.

Schematic diagram of the working principle of the rendering engine

Rendering engine working diagram

How WebKit Works (Chrome, Safari, Opera)

How Gecko Works (FireFox)

The working principle of the IE browser rendering engine is not mentioned here, because it is not open source.

The browser's reflow or layout process

https://www.youtube.com/watch?v=ZTnIxIA5KGw

Turn on Chrome's Rendering feature

first step:

Step two:

Step 3: Click the refresh button, the highlighted process is the process of browser reflow.

Browser access to website process

1. Enter the URL in the browser address bar.

2. The browser constructs an 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 into 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 the user request and encapsulates the processing result into an HTTP response message.

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>淘宝网 - 淘！我喜欢</title>
<meta name="spm-id" content="a21bo" />
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
<meta name="aplus-xplug" content="NONE">
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
</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 a request again.

10. Finally, the browser displays the page.

HTTP request message and response message format

DNS resolution process

The hosts file location 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 of Modern Web Browsers - HTML5 Rocks

The essence of web development

Keep the following three points in mind

Request, the client initiates a request.
Process, the server processes the request.
In response, the server sends the processing result to the client

Client handles response

After the server responds, the client continues processing:

Browser: parse 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 the UI technology of iOS or Android

About C/S (Client/Server) and B/S (Browser/Server)

C/S: client server (good user experience, stable connection with server, but need to develop independent client for users)

B/S: Browser server (easy to deploy and maintain, but poor user experience)

That’s all for today’s sharing~~

If there are any mistakes, welcome to correct them at any time.

How browsers work and the nature of web development

How browsers work

The composition of the browser

mainstream rendering engine

introduce