Browser rendering principles and performance optimization

First, browser rendering principle

• Browser process: The main process of the browser, which is responsible for interface display, user interaction, child process management, and storage management.
• GPU process: 3D drawing, enabling hardware acceleration to improve user experience.
• Plug-in process: Manages the running of browser plug-ins.
• Network process: Processes network resources.
• Render process: Used to render pages.

A classic question: What happens when the user enters a URL carriage return? From a browser process perspective:

1. The user type in the URL and press Enter,Browser processThe address is generated based on the default engine and navigation begins.
2. Network processLoad the resource. After loading, hand inRendering processRender the page.
3. Rendering processTo render the page.

Network seven-layer model:

1. Physical layer (bit stream) : physical addressing, bit transfer.
2. Data link layer (data frame, plus frame header and frame tail) : node-to-node data transmission; Framing, physical addressing, flow control, error control.
3. Network layer (datagram, plus IP) : Packet delivery from source host to destination host. Logical addressing, routing, packet forwarding.
4. Transport layer (data segment) : Complete packet transmission between end-to-end processes. SAP addressing, end-to-end connection, flow, error control.
5. Session layer, presentation layer, and application layer: session control, codec encryption, and packet.

HTTP protocol history:

1. HTTP 0.9 was responsible for transferring HTML. There were no request headers or response headers, and the browser handled strings directly.
2. HTTP 1.0 provides HTTP headers, which are used to handle different resources.
3. HTTP 1.1 enables keep-alive link multiplexing and pipelining by default (sending six requests simultaneously). Server response order, there is a queue head blocking problem.
4. HTTP 2.0 multiplexing (sending data over the same TCP connection), header compression (colon), binary transport, server push data.
5. HTTP 3.0 solves the problem of TCP queue header blocking by using UDP instead of TCP and adding THE QUIC protocol on top of UDP.

Process combing:

1. DNS Resolves a domain name to an IP address.
2. Cache lookup to check whether the cache is expired.
3. The request is HTTPS for SSL negotiation.
4. IP addresses are addressed and queued. A maximum of six HTTP requests can be sent.
5. TCP creates a connection and shakes hands three times.
6. Using TCP to transfer data (unpack, group, order, reliably transfer) the server receives it in order.
7. Making an HTTP request (request line, request header, request body)
8. Keep-alive will not be disconnected by default to ensure that the next transmission of data is available and the connection created last time can be consumed.
9. After the server receives the data (response line, response header, response body)
10. The server returns 301,302 will be redirected
11. The server returns 304 and queries the browser cache to return

What does the browser do when it accepts the resource? (Rendering process)

1. The HTML is not recognized by the browser and needs to be parsed from top to bottom, turning the HTML into a DOM tree. (document)
2. Browsers cannot parse plain text CSS styles. Instead, they need to parse CSS into styleSheets (CSSOM). (document.styleSheets)
3. Figure out the specific style of each node in the DOM tree. (Attachment)
4. Create a render (layout) tree and add the DOM tree visible nodes to the layout tree. And compute the coordinate position of the node rendering to the page. (layout)
5. Through the layout tree, layers (according to positioning properties, transparency properties, transform properties, clip properties, etc.) are generated layer tree.
6. Draw the different layers and transfer them to the composition thread. The final page is generated and displayed in the browser (Painting,Display).

A classic problem: why JS at the bottom of CSS at the top of HTML top-down parsing, encounter header references external styles, do not immediately load CSS style, but continue to parse HTML, HTML parsing is completed, and then to parse CSS, wait for CSS parsing is completed, rendering. (CSS does not block HTML parsing)

Placing styles at the bottom, rather than in the head, may cause redraw backflow. Because styles are not placed in the head, browsers don’t render the DOM until the CSS has been loaded and parsed. Instead, they draw the DOM once while parsing the HTML, and then draw it again after parsing the CSS.

JS execution blocks DOM parsing as well as DOM rendering. The JS should wait for the CSS above to finish loading, so that the page JS can manipulate the style.

A classic question: How is the DOM generated and rendered onto a page

Node simulates a browser sending an HTTP request, receives the response and parses it with HTML and CSS.

Second, the Perfomance API

White screen time: domLoading – navigateStart First screen time: domInteractive – navigateStart DNS query time: DomainLookupEnd – domainLookupStart TCP connection duration: connectEnd – connectStartrequest request duration: Domcomplete-dominteractive domReady time: Domcontentloadedeventend-fetchstart Onload time = Loadeventend-fetchstart

Gitee: Performance API

Third, network optimization strategy

• Reduce the number of HTTP requests, reasonably embedded CSS,JS.
• Reasonable setting of server side cache, improve server processing speed (strong cache, negotiated cache).
• Avoid redirects, which slow down the response.
• usedns-prefetch,DNSParsing.
• Domain name sharding is used to store resources under different domain names. (A domain name can process a maximum of six TCP connection requests).
• CDN is used to speed up access.
• Gzip compression optimization, volume optimization of transmission resources (HTML, JS, CSS) images and videos do not do GZIP.
• Load the resource priority.preload(Pre-request resources needed for the current page)prefetch(resources to be used in future pages) to cache data in the HTTP cache.

<link rel="preload" href="style.css" as="style">
Copy the code

Key render paths

The critical render path, which means that these processes are executed as soon as the render is performed.

Visual changes = style calculation = Layout (rearrangement) = Draw (redraw) = Composite render

• Rearrangement: add or remove elements, change their size, move their position,Gets element location information.
• Redraw: Changes the style of an element without changing the style of the element in the document flow.

How to reduce rearrangement redraw:

1. Out of the document flow.
2. The image specifies the width and height.
3. Use CSS animations whenever possible. (only draw once) to enable GUP acceleration.
4. Use will-change to extract a separate layer and the browser will notice it separately.

Static file optimization

1. Image optimization

Image format:

• jpg
• png
• gif
• webp
• svg

Picture optimization:

• Avoid empty SRC images, which also send requests.
• Reduce image size, compress image, reduce user traffic.
• Img tag with Alt attribute, image loading failure user experience.
• Larger images use progressive images.
• Small iconbase64Reduce image requests.
• Native image lazy loading:Loading: lazy

<img loading="lazy" src="./images/1.jpg" width="300" height="450" />
Copy the code

• Load images of different sizes and pixels in different environments

<img src="./images/1.jpg" sizes="(max-width:500px) 100px,(max-width:600px) 200px"  srcset="./images/1.jpg 100w, ./images/3.jpg 200w">
Copy the code

2. HTML optimization

• Semantic HTML: search engine friendly and team friendly.
• Declare the character set in advance so that the browser knows how to render web content.
• Reduce meaningless DOM tags.
• Reduce the use of iframe, which blocks onLoad events. Iframe can be loaded dynamically.
• Avoid table layouts, which are rendered after the entire load is complete.

3. The CSS optimization

• Fewer pseudo-class selectors, fewer style layers, and fewer wildcards.
• Avoid CSS expressions, which are frequently evaluated.
• Remove blank lines, comments, and nonsense units
• CSS compression.
• Using external chains, you can cache CSS.
• css containProperty to isolate elements.
• To use less@importIt is used to load through.

4. JS optimization

• Async, deferLoad files asynchronously.

• Reduce DOM manipulation and cache accessed elements.
• Webworker solves application blocking problems. (Complex calculation)
• IntersectionObserverMonitor the range of visual area.

const observer = new IntersectionObserver(function(changes) { 
    changes.forEach(function(element, index) {
        if (element.intersectionRatio > 0) { observer.unobserve(element.target); element.target.src = element.target.dataset.src; }}); });function initObserver() {
    const listItems = document.querySelectorAll('img');
    listItems.forEach(function(item) {
        observer.observe(item);
    });
}
initObserver();
Copy the code

• Virtual rollingvertual-scroll-list.
• requestAnimationFrame.requestIdleCallback
• Reduce the number of event bindings by using event delegates.
• Use Canvas animation, CSS animation.

Sixth, optimization strategy

1. Number of resources loaded
2. Resource volume size
3. Resource preloading
4. Server-side rendering, SEO.
5. Number of interface requests
6. Use of cache

PWA (Progressive Web App)

Webapp cannot be accessed offline, and users cannot save the entry.

• Web App Minifest: Add Web sites to your desktop.
• Service Worker: Offline cache content, with cache API.
• Push API & Notification API: Message Push.
• App Shell & App Skeleton: App Shell & App Skeleton

Use of LightHouse

npm install lighthouse -g
lighthouse --view http://www.baidu.com
Copy the code