review

The whole process can be divided into two parts: web request and browser rendering

  1. Enter the url
  2. Checking the resource Cache
  3. The DNS
  4. Establishing a TCP Connection
  5. Send the HTTP request and receive the response
  6. Disabling a TCP Connection
  7. Rendering phase

Enter the url

The browser determines whether the entered content is a URL or a search item. If the entered content is a search item, the browser uses the default search engine to search the entered content. If the entered content is a URL, the browser combines the incomplete URL into a complete URL

Full URL(Uniform Resource Locator) : Protocol + host + port + path (+ parameter) (+ anchor point)

Check the cache of resources

This step must precede the actual request, and the caching mechanism only works if the cache is checked before the request is made.

Cache Settings: The cache is set by the cache-Control/Expires/last-Modified /e-tag fields of the response header, and is divided into strong cache and negotiated cache. Strong cache is set under a condition that the resource can be used directly, negotiated cache is to evaluate the effectiveness of the cache to the server, only valid to use. Strong cache :(set by cache-control and expires)

  1. Cache-control possible values:

S-maxage: specifies how long a resource can be cached, in seconds. S-maxage is the same as max-age, but only for proxy caching. (3) public: indicates that the response can be cached by the browser +CDN (4) private: indicates that the response can only be cached by the browser (5) no-cache: indicates that the cache resource is cached, but the strong cache is not hit every time. You must send a request to the server to evaluate the effectiveness of the cache. (6) no-store: The response is not cached. 2. Expires: Expires is less reliable than cache-control max-age because expires is an absolute time that can be cheated by changing the local time; Max-age is the amount of time after the response is received, regardless of the local time negotiation cache: (last-Modified /e-tag) When strong caching is not in effect, the browser checks the e-Tag/last-Modified version of the resource. If there is an E-tag, the browser will request the resource with if-none-match and e-tag values. If not, the request starts with if-modified-since and last-modified values. Let the server decide if the local cache is available. If the server determines that the resource is unusable, it returns 200 and the new resource. The eTAG/last-Modified of the response header is also updated. The browser uses the HTTP response and replaces the previous cache with this response. The difference between e-Tag and Last-Modified: E-tag is a hash calculation of the resource and the last modified time, while last-Modified is only a last modified time with accuracy in seconds, so e-tag is more accurate. Last-modified resources may be updated within milliseconds, but the time does not change. In other words, resources may not be updated in a timely manner.

The DNS

DNS resolution searches the BROWSER’s DNS cache in sequence -OS’s DNS cache; If the domain name does not match or expires, the SYSTEM sends a request to the DNS server to resolve the domain name

DNS resolution is performed at the application layer. To ensure timely response, UDP is used

Establishing a TCP Connection

For details, see Learning TCP in Depth

Send the HTTP request and receive the response

See what changes HTTP2.0 has made

Disabling a TCP Connection

Four waves, see: Learn TCP in Depth

Browser rendering

  • Converts the obtained raw binary resource into a string according to the specified encoding format (UTF-8), and determines the type of the resource according to the content-Type
  • Tokenization: In simple terms, the dom can be constructed after reading the HTML opening tag, without waiting to read the closing tag (otherwise the script tag will not affect the total time of dom tree construction).
  • Build a DOM tree: Map HTML tags to nodes, a depth-first traversal
  • Building the CSSOM tree: When the STYLE tag is read in the HTML, the CSSOM tree starts to be built. The CSSOM tree and THE DOM tree are not mutually exclusive, so CSS files are usually placed in the head so that the CSSOM tree is built as soon as possible
  • Build the render tree: Iterate through the visible nodes in the DOM tree and add the matching properties on the CSSOM tree. CSS matches from right to left. Avoid too deep a hierarchy
  • Layout: Output a box model based on the render tree. It calculates the exact location and size and converts relative measurements into specific pixels on the screen
  • Draw: Convert to pixels on the screen according to the layout

External chain resource acquisition

In the process of parsing HTML, you will encounter other resources that need to be loaded, which can be divided into JS/CSS/ images. The characteristics are as follows:

  • CSS resources are downloaded asynchronously, and neither download nor parse will block the building of the DOM tree<link href='./style.css' rel='stylesheet'/>
  • JS resources are downloaded synchronously, and the download and execution block the building of the DOM tree<script src='./index.js'/>
  • Image resources are downloaded asynchronously. After downloading, replace the SRC of the original IMG tag without blocking the dom tree construction

Because of this feature, it is often recommended to place CSS stylesheets in the head and JS files at the end of the body to allow rendering to begin as early as possible

Javascript blocks rendering

The browser kernel has five resident threads:

  1. GUI rendering thread
  2. JS engine thread
  3. Timing trigger thread
  4. Event trigger thread
  5. Browser HTTP request thread

The above DOM tree + CSSOM tree + render tree construction is the task of the GUI render thread.

GUI threads and JS engine threads are mutually exclusive because javascript may manipulate the DOM. If you introduce JS files too early, rendering trees will not be built and will block rendering.

Js files are introduced asynchronously: async and defer

  • Without defer or Async, the browser loads and executes the specified script immediately
  • The async property means that asynchronous execution of incoming JavaScript, once loaded, begins execution
  • The defer property represents deferred execution of the imported JavaScript

When loading multiple JS scripts, Async loads sequentially, while defer loads sequentially

Resource tips and instructions: preload

Preload: Loads resources for the current page with a high priority.

The preload directive actually overcomes the limitations that can only be used in HTML and allows preloading of resources defined in CSS and JavaScript, as well as deciding when to apply each resource.

Priority setting: As = “style” attribute will get the highest priority, as= “script” will get low or medium priority, and requests without the “as” attribute will be considered asynchronous. Usually there are JS files, image resources, fonts and so on.

<link rel="preload" href="image.png">// Preload images<link rel="preload" href="https://example.com/fonts/font.woff" as="font" crossorigin>// Cross-domain preloading<link rel='preload' as='style' href='./style.css' onload='this.rel=stylesheet'>
Copy the code

Preload can be set not only with HTML tags, but also with JS

var res = document.createElement("link"); 
res.rel = "preload"; 
res.as = "style"; 
res.href = "css/mystyles.css"; 
document.head.appendChild(res); 
Copy the code

Prefetch: When idle, the browser retrieves resources that might be available in the future and caches them.

  1. Link prefetch: The browser looks for the link in the HTML element prefetch or in the HTTP header as follows:
HTML: <link rel="prefetch" href="/uploads/images/pic.png">
HTTP Header: Link: </uploads/images/pic.png>; rel=prefetch
Copy the code

indicates that the HTML resource is not allowed to be cached in the browser

  1. DNS Prefetching: Running DNS lookup on background.
 <link rel="dns-prefetch" href="//fonts.googleapis.com">
 <link rel="dns-prefetch" href="//www.google-analytics.com"> 
 <link rel="dns-prefetch" href="//opensource.keycdn.com">
 <link rel="dns-prefetch" href="//cdn.domain.com">
Copy the code
  1. Prerendering: Gets all the resources for the next page and renders the entire page when idle.
<link rel="prerender" href="https://www.keycdn.com">
Copy the code

Preconnect: Perform some operations before an HTTP request is formally sent to the server. This includes DNS resolution, TLS negotiation, and TCP handshake

Preconnect can be added directly to the attribute of the LINK tag in HTML, written to the HTTP header, or via

<link href="https://cdn.domain.com" rel="preconnect" crossorigin>
Copy the code

Refluxing and repainting

Backflow occurs when the browser needs to recalculate, lay out, and draw, when an element’s size, structure, or triggers certain attributes;

Redraw is repixelated drawing when changes to the element style do not affect the layout.

Backflow = calculation + layout + draw; Redraw = draw. Therefore, reflux has a greater impact on performance

An operation that triggers backflow:

  • Add or remove visible DOM elements
  • The position of the element changes
  • The size of the element changes
  • The browser window size changes

How the browser works: From the time the URL is entered until the page is loaded