Foreword: hope can pass this article, can give you get help. (thanks for three keys), the front end of the white constantly upgrade play strange…

1. Threads and processes

The process is the smallest unit of system resource allocation (that is, the system allocates memory space with the process as the smallest unit, and the process is the smallest unit that can run independently)

Threads are the smallest unit of system scheduling.

2. Browsers are multi-process

3. Various processes and functions of the browser

Main process (responsible for coordination and control)

  • Responsible for browser interface display and user interaction, such as forward and backward
  • Responsible for page management, creating and destroying other processes
  • Draw an in-memory Bitmap from the Renderer process onto the user interface
  • Network resource management, download, etc

GPU process

  • One at most, used for 3D drawing, etc

Third-party plug-in processes

  • Each type of plug-in corresponds to a process that is created only when the plug-in is used

Renderer (browser kernel)

  • GUI rendering thread

    • Responsible for rendering browser interfaces, parsing HTML, CSS, building DOM trees and RenderObject trees, layout and drawing
    • Note that the GUI rendering thread and the JS engine thread are mutually exclusive, and the GUI thread will be suspended when the JS engine is executing. GUI updates are stored in a queue until the JS engine is idle and executed immediately.
    • Why it’s mutually exclusive: Since JS can manipulate the DOM, if you modify element attributes and render the interface at the same time (i.e., the JS thread and the UI thread are running at the same time), the elements obtained before and after the render thread may not be consistent.

  • JS engine thread (JS kernel, responsible for processing Javascript script program.

    • The JS engine thread is responsible for parsing Javascript scripts and running code
    • Is there only one JS thread running on a Tab page (renderer process) at any time
    • The GUI rendering thread and the JS engine thread are mutually exclusive, so if the JS execution time is too long, the page rendering will be incoherent and the page rendering load will block.

  • Event trigger thread

    • When a corresponding event (either WebAPIs completion event or page interaction event) is triggered, the thread will place the corresponding callback function in the callback queue and wait for the JS engine thread to process it

  • Timing trigger thread

    • Corresponding to setTimeout, setInterval API, timed by the thread, when the timing ends, the corresponding callback function into the task queue
    • If the time of setTimeout is less than 4ms, it is calculated as 4ms

  • Asynchronous HTTP request threads

    • This thread is opened for every HTTP request
    • When a state change is detected, a state change event is generated and placed in the task queue if the state change event has a callback function

  • The task queue polls the thread

    • Used to poll the listening task queue to see if the task queue is empty

4. Browser page rendering process

  • Parsing the HTML yields a DOM tree

    HTML parsing consists of a series of steps: Bytes -> Characters -> Tokens -> Nodes -> DOM. The HTML is eventually parsed into a DOM tree.

  • Parse the CSS to get a CSS tree

    Similar to HTML parsing. Bytes -> Characters -> Tokens -> Nodes -> DOM. Finally, the CSS is parsed into a CSS tree

  • The combination results in the Render tree

    Iterate through the DOM and find the corresponding style of each element in the CSS tree, combining to form the Render tree. The render tree is a combination of A DOM tree and a CSS tree (elements that cannot be displayed, such as script, head or diplay: None elements, are not in the render tree and will not be rendered), the layout of the page, and the rendering of the page are all based on the render tree.

  • Layout, when the page has element size, size, hidden has changed or added, deleted elements, re-layout calculation, and modify all affected parts of the page

  • Draw, redraw when the appearance of a page element changes

  • The GUI thread sends the resulting bitmap of each layer (each element corresponds to a normal layer) to the Browser process, which merges the layers and renders them on the page

5. Reflow and redraw

  • Backflow: Layout is what happens when a page is first loaded, and relayout is backflow.

  • When part of the page element changes size, location, or hiding, the page is refluxed. The entire page would have to be rearranged, with all the elements whose sizes and positions were affected being recycled.

  • Induced reflux operation

    • The page initializes rendering

    • Window size changes

    • Changes in the size, position, and hiding of elements

    • Gets some properties that trigger a backflow

      • Many browsers optimize for backflow to do a batch backflow after a certain period of time or when the number reaches a potential value.

      • When retrieving some attributes, the browser will also trigger backflow in order to return the correct value, resulting in invalid browser optimizations:

        • Offset (top/bottom/left/right) Client (top/bottom/left/right) Scroll (top/bottom/ right) getComputedStyle() width,height

      • Second, font size changes and content updates can also cause backflow

    • Frequent backflow and redraw will result in frequent page rendering, resulting in overuse of CPU or GPU, resulting in page stalling.

      • Reduce style changes item by item, preferably changing the style once, or defining the changed style in the class and updating it once
      • Instead of looping over the DOM, create a new node, apply all DOM operations on it, and then plug it into the DOM
      • When you want to get a property such as offset frequently, read it once and assign it to the variable instead of getting it every time
      • Locate complex elements absolutely or firmly out of the document flow, otherwise reflux is costly
      • Use hardware acceleration to create a new composite layer that does not affect the original composite layer when it needs to be recycled

    • Reduce reflux

  • Redraw: Drawing is the operation that takes place when a page is first loaded. Redraw is redraw.

    The page is redrawn when the appearance of some element of the page has changed, but the size, position, and hiding have not changed. (Again, only redraw some elements, not the whole page)

6. Blockage of the CSS

The first step is to download the CSS file in the Browser process, and when the download is complete, send it to the GUI thread. Second, the HTML and CSS are parsed in GUI threads, but the two are in parallel. Since CSS downloading and parsing does not affect the DOM tree, it does not block parsing of HTML files, but it does block page rendering. This makes perfect sense, if the downloading and parsing of CSS files doesn’t clog up the page rendering, then elements that change during or after the page rendering will need to be redrawn and redrawn.

7. Blockage of JS

To be clear, downloading and parsing of JS files blocks parsing of HTML files and rendering of pages. Because JS script may change the DOM structure, if it does not block the parsing and page rendering of HTML files, then when JS script changes the DOM structure or element style, it will cause backflow and redraw, which will cause unnecessary performance waste. It is better to wait for JS execution to finish, and then carry out HTML parsing and page rendering. If you don’t want js clogging, use the async property, which allows you to load js files asynchronously and execute them immediately after loading.