How browsers work

Browser Composition

  • Human-computer Interaction (UI)
  • Network Request Part (Socket)
  • JavaScript Engine part (parsing and executing JavaScript)
  • Rendering engine section (rendering HTML, CSS, etc.)
  • Data storage (cookie, LocalStorage in HTML5, SessionStorage)

sqlite

Mainstream Rendering engines

introduce

  1. A rendering engine is also called a layout engine or browser kernel.

  2. Mainstream rendering engines have

  • Chrome: Blink Engine (a branch of WebKit).
  • Safari: WebKit engine for Windows was released on March 18, 2008, but Apple stopped developing Safari for Windows on July 25, 2012.
  • FireFox: Gecko engine.
  • Opera browser: Blink engine (earlier versions used Presto engine).
  • Internet Explorer: Trident engine.
  • Microsoft Edge Browser: EdgeHTML engine (a branch of Trident).

The working principle of

  1. The Document Object Model (Dom) is a standard programming interface recommended by W3C to deal with extensible markup languages.

  2. Build render trees. Render trees are not the same as Dom trees because elements like the head tag or display: None don’t have to be in the render tree, but they are in the Dom tree.

  3. Laying out the render tree, locating coordinates and sizes, deciding whether to wrap, position, overflow, z-index, etc., is called “layout” or “reflow”.

  4. Draw rendering tree, call the operating system underlying API for drawing operations.

Schematic diagram of how the rendering engine works

Schematic diagram of how the rendering engine works

How WebKit works (Chrome, Safari, Opera)

How Gecko works (FireFox)

The reflow or layout procedure for the browser

www.youtube.com/watch?v=ZTn…

Turn on Chrome Rendering

The first step:

The second step:

Web browser access process

  1. Type the url in your browser’s address bar.

  1. The browser constructs HTTP request packets using the URL that the user enters 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.36Accept: text/html,application/xhtml+xml,application/xml; Q = 0.9, image/webp, * / *; Q = 0.8Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: zh-CN,zh; Q = 0.8, en. Q = 0.6Cookie: l=Ag0NWp9E8X4hgaGEtIBhOmKxnSOH6kG8; isg=AkZGLTL-Yr9tHDZbgd5bsn4Rlzwg5IphaK-1BzBvMmlEM-ZNmDfacSyDfdgF; thw=cn
Copy the code
  1. The browser initiates a DNS resolution request and converts the domain name to an IP address.

  1. The browser sends the request packet to the server.
  1. The server receives the request packet and parses it.
  1. The server processes the user request and encapsulates the processing result into an HTTP response packet.
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. [172200-0 C] l2cm10-1, cache13. 122, 0], [l2cm10-1 cache3. Cn206 [0200-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

<! DOCTYPEhtml>
<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 - tao! I like</title>
<meta name="spm-id" content="a21bo" />
<meta name="description" content="Taobao.com - Asia's largest online trading platform, providing all kinds of clothing, beauty, home, digital, phone/point recharge... Hundreds of millions of quality products, while providing guaranteed transaction (payment after receipt of goods) and other safe transaction protection services, and by the merchant to provide return commitment, damage repair and other consumer protection services, let you feel at ease to enjoy online shopping fun!" />
<meta name="aplus-xplug" content="NONE">
<meta name="keyword" content="Taobao, pay treasure, online shopping, C2C, online trading, trading market, online trading, trading market, online shopping, online selling, shopping website, group purchase, online trade, safe shopping, e-commerce, rest assured to buy, supply and sale information, online shop, price, auction, open a shop on the net, the network shopping, discounts, free open a shop, online shopping, channels, stores" />
</head>
<body>.</body>
</html>
Copy the code
  1. The server sends the HTTP response packet to the browser.
  1. The browser receives and parses HTTP packets from the server.
  1. The browser parses the HTML page and displays it. When parsing the HTML page, it encounters a new resource and requests it again.
  1. Finally, the browser displays the page

Format of HTTP request and response packets

DNS Resolution Process

Location of the hosts file in Windows

C:\Windows\System32\drivers\etc\hosts

The DOM parsing

Reference code:

<html>
  <body>
    <p>Hello World</p>
    <div> <img src="example.png" alt="example"/></div>
  </body>
</html>
Copy the code

Its CSS analytical

How Browsers work – How do Browsers work

How Browsers work www.html5rocks.com/zh/tutorial…