The browser

  • Browsers are multi-process and JS is single-threaded. Process: the program runs and resources are allocated. Thread: a stream that executes independently within a process
  • What processes the browser has

Browser process: the main process of the Browser (responsible for coordination and control)

GPU process: a maximum of one. It is used for 3D drawing

Browser rendering process: one process per Tab page by default

Third-party plug-in process: Each type of plug-in corresponds to one process, which is created only when the plug-in is used

Note: Opening a web page in the browser is like starting a new process (the process has its own multithreading)

  • The browser kernel (the renderer process) is multithreaded

**GUI rendering threads are mutually exclusive with JS engine threads: ** Since JavaScript is DOM manipulable, if you render the interface while modifying these element attributes (i.e., the JS thread and UI thread are running at the same time), the element data obtained before and after the rendering thread may be inconsistent.

The url to the render

Phase 1: Browser process

The browser enters the URL -> the browser main process takes over, opens a download thread -> HTTP request (DNS resolution, TCP three-way handshake and four-way wave, HTTPS and HTTP difference (HTTP2, etc.) -> wait for the response, Get content -> pass it to the Renderer process via the RendererHost interface

Stage 2: Renderer process browser kernel

The renderer processes all the content of the Web page

Document >DOMTree > CSSDOM > Layout > LayerTree > Paint > Composite > Raster (bitmap) > GPU Drawing

DomTree builds a DOM tree: HTML converts to a DOM tree

Style calculation:

Convert CSS text to styleSheet. StyleSheets standardized attribute values (EM, REM, font bold (BLOd), color, etc.) ComputedStyle ComputedStyle for each node in the DOM treeCopy the code

Layout: Calculates the geometry of visible elements in a DOM tree to generate a Layout tree.

LayerTree: create a dedicated layer for a specific node, and create a LayerTree (layer stacking to create the final page)

Not every node in the layout tree generates a layer. If the node has no corresponding layer, it belongs to the parent node's layer. Elements with cascading context attributes generate new layersCopy the code

Synthesis of Composite layer: specific CSS attribute node: (position: fixed | | stiky & location isn’t empty…).

Paint layer: The main thread passes the list of layers to the compositing thread, which divides the layer into tiles.

Raster: A map block is converted into a bitmap, and the generated bitmap is stored in GPU memory.

Display Composition and Display: Submit the DrawQuad message to the browser process for drawing, and finally Display on the screen.

OnReadyStateChange, DOMContentLoaded

Chrome Performance tools

Googlechrome. Making. IO/devtools – sa… demo

performance

The Performance panel has the following four panes:

1, the controls. Information captured during recording start, stop, and configure recording

2, the overview. Advanced summary of page performance (W, A, S, and D keys adjust your selection. W and S stand for zoom in and zoom out respectively. A and D stand for left and right respectively.)

3. Flame diagram. Visualization of CPU stack tracking

4. Statistical summary. Summarize data in the form of charts

Redering

Small features: View composition layer, display real-time FPS panel

Layer

Synthetic layer details and reasons

window.performance

Front-end performance monitoring and alarm

The memory field represents the memory footprint of JavaScript. Chrome Extensions

The navigation field counts data related to web navigation:

  1. RedirectCount: number of redirects (read only). However, this interface is restricted by the same origin policy, that is, only redirects of the same origin can be detected.
  2. Type should return one of 0,1, or 2. There are three enumerated values:
  • 0: TYPE_NAVIGATE (the user accesses the page through normal navigation, such as clicking a link or normal get)
  • 1: TYPE_RELOAD (user accesses the page through refresh, including JS call refresh interface, etc.)
  • 2: TYPE_BACK_FORWARD (users access this page through the back button)

The most important is the timing field statistics, which contains network, parsing, and a series of time data.

  • StartTime: some browsers implement navigationStart, which represents the startTime node for the browser to unload the previous page document. For example, we are browsing Baidu.com. Enter google.com in the address bar and press Enter. The browser performs the following actions: Unload current document (namely baidu.com) -> Request the next document (namely google.com).

  • If the current document is empty, the value of navigationStart is equal to fetchStart.

  • RedirectStart and redirectEnd: If the page is generated from the redirect, redirectStart and redirectEnd represent the start and end points of the redirect respectively.

  • UnloadEventStart and unloadEventEnd: If the previous document and the requested document are in the same domain, unloadEventStart and unloadEventEnd represent the start and end time nodes for the previous document before the browser unload, respectively. Otherwise both are equal to 0;

  • FetchStart is the value of time before the browser initiates any request. Between fetchStart and domainLookupStart, the browser checks the cache of the current document;

  • DomainLookupStart and domainLookupEnd indicate the start time and end time of DNS query respectively. If the browser does not perform DNS queries (such as using cache), both values are equal to fetchStart;

  • ConnectStart and connectEnd indicate the time nodes when a TCP connection is established and successful. If the browser does not make a TCP connection (such as using a persistent webscoket connection), both are equal to domainLookupEnd;

  • SecureConnectionStart: Optional. If the page uses HTTPS, its value is the moment before the secure connection handshake. If the property is not available, undefined is returned. If the property is available but HTTPS is not used, 0 is returned;

  • RequestStart represents the time node when the browser initiates a request. The request can be made to a server, cache, or local resource.

  • ResponseStart and responseEnd represent the time when the browser receives the first and last byte of data from the server (or cache or local resource);

  • DomLoading represents the point in time when the browser starts parsing the HTML document. Document in IE browser has readyState property. DomLoading is equal to the time node when readyState is loaded.

  • DomInteractive represents the time node when the browser parses the HTML document in interactive state. DomInteractive is not DOMReady. It is triggered earlier than DOMReady and represents the time when the HTML document has been parsed (i.e. the DOM tree has been created) but the embedded resources (such as external linked CSS and JS) have not been loaded.

  • DomContentLoadedEventStart: on behalf of the DOMContentLoaded event triggering time nodes:

  • The DOMContentLoaded event is triggered when the page document is fully loaded and parsed, and the HTML document does not wait for style files, image files, or subframe pages to load. Document.ready

  • DomContentLoadedEventEnd: represents the time when the DOMContentLoaded event is complete and the user can operate on the page. This is domReady in jQuery.

  • DomComplete: THE HTML document is parsed and the resources in the web page are ready;

  • LoadEventStart and loadEventEnd represent the time nodes for the onload event to trigger and end, respectively

1. DNS query takes time

DomainLookupEnd – domainLookupStart, 0 if DNS cache is used or persistent connections are used

2. TCP connection takes time

ConnectEnd – connectStart: 0 if persistent connections are used

3. Request Request time

ResponseStart – fetchStart, which reflects the overall network and back-end processing time

4. Parsing the DOM tree takes time

= domComplete – domInteractive

5. White screen time

White screen time refers to the time when the first element of the page is displayed, mainly by seeing the time when DOM parsing is complete, domInteractive – fetchStart

6. First screen time (onload time)

First screen time Indicates the time to completely display the first screen. For example, loadEventStart – fetchStart

What’s the use of knowing that? Is it just to fake X?

Performanc optimization

To summarize performance optimization from the rendering process, take a look at the optimization criteria

RAIL (Response, Animation, Idle, load) performance evaluation model

User-centered; The ultimate goal is not to make your site run fast on any particular device, but to make your users happy.

  • Immediate response to users; Confirm user input within 100 milliseconds.
  • When setting up animation or scrolling, generate frames in 10 milliseconds or less. 1000/10=100fps
  • Maximizes idle time on the main thread. 50 milliseconds
  • Keep attracting users; Render the interaction within 1000 milliseconds. Progressive rendering, main content rendering

The rendering process summarizes performance optimizations

DNS resolution

Each DNS resolution takes about 20-120 milliseconds

  • Allows browser DNS cache mechanism (IE cache for 30 minutes, Firefox cache for 1 minute)
  • Reduce DNS queries (components are distributed among 2 to 4 domain names)
  • dns-prefetch www.taobao.com/

DNS prefetching allows the browser to run DNS resolution in the background while the user is browsing the page

Two: HTTP request

  • Preconnect allows browsers to work in onePerform some operations (DNS resolution, TLS negotiation, TCP handshake) before sending an HTTP request to the server
    • Reduce TCP connection time: HTTP keep-alive
  • HTTP header minimization (Cookie compression, using domain names without cookies)
  • Reduce the number and size of HTTP requests (avoid SRC, href null values, JS, CSS, icon, third party plugins, Use less code)
  • Avoid 301/302 redirects (redirects will generate extra round trip time)
  • Maximize download threads: Use different domain names to maximize download threads, but keep them at 24 domain names to avoid DNS query loss (iE 813 chrome&firebox 6)
  • HTTP/ 2:1, header compression 2, multiplexed single long connection 3, server Push
  • Package configuration optimization

Three: render

  • Preload allows the browser to preload important resources defined in CSS and JavaScript
  • ** Image compression, image CDN, preloading, lazy loading getBoundingClientRect()

  • Avoiding Dom blocking

Avoid CSS blocking render-tree (selector, less CSS, Minify)

Avoid loading JS to block render-tree generation (async or defer)

Prevent the JS engine thread from blocking the GUI rendering thread

  • Lazy loading: What is absolutely necessary for a page to initially load? (Progressive enhancement, lazy loading)
  • Preload: Take advantage of idle browser time
  • Reduce the amount of dom (document. GetElementsByTagName (‘ * ‘). Length)
  • Reduce redrawing and reflow
    • Must cause a layout property:

OffsetTop, offsetLeft, offsetWidth, offsetHeight

ScrollTop, scrollLeft, scrollWidth, scrollHeight

ClientTop, clientLeft, clientWidth, clientHeight

getComputedStyle()

getBoundingClientRect()

  • Dom that requires a lot of operations is directly deleted and added

  • requestAnimationFrame

  • Avoid manipulating styles too often and override the style property at once

  • Composite Enables hardware acceleration

  1. Most commonly used: translate3D, translateZ
  2. The will-chang property, which is normally used in conjunction with opacity and transform (other properties do not function as a composite layer), is used to inform the browser of the desired change in advance, so that the browser will start to do some optimisation (released after use).
  3. Animating (compositing layers are created only during animation execution, and elements return to their previous state before animation starts or ends)
  4. The < canvas > < canvas > < webgl > element

3: the cache

CDN cache

  • For static resources, all normal status codes (greater than 200 and less than 400) are cached for 8 days. In particular, 301 responses are cached for 2 hours and 302 responses for 20 minutes;
  • For dynamic resources, the program will automatically identify, do not cache;
  • Other abnormal responses greater than or equal to 400 are not cached.
  • The Cache node notifies the browser of the timing of the Cache and is controlled by the cache-Control and Expires headers in the HTTP response header.

Browser cache

  • The validity of the Expires
  • Cache-Control max-age
  • The last-modified date
  • ETag Indicates the file version tag

Interesting phenomenon

  • If page B is opened from page A, and A and B belong to the same site (same protocol and root domain), then page B will reuse the rendering process of page A; If otherwise, the browser process creates a new renderer for B. eg:zhidao.baidu.com

  • Cookies set in the first domain cannot be deleted in its subdomains

Refer to the article

web.dev/rail/

www.keycdn.com/blog/websit…

Recommend the article

Life of a pixel

Resource Hints – What is Preload, Prefetch, and Preconnect?

Developers.google.com/web/tools/c…

Inside WebKit technology

Thinking problems: front-end data monitoring, early warning system construction