Front knowledge

This article is an interview question, and not only an interview question, the difference is that this question is divided into three articles, HMM. It is conceivable

Next, above we talked about the network communication part, please see “an interview question” input URL to render comprehensive combing – network communication, so it is time to talk about the page rendering process, that is, when the input of a URL to get the page, the browser how to parse, how to render

To understand this first, you need to have a simple understanding of the following points

  • Thread/process concepts and differences
  • Multi-thread/multi-process concept
  • The main process of the browser
  • Why are browsers multi-process
  • The main thread of the Renderer process
    • GUI rendering thread
    • JS engine thread
    • Event trigger thread
    • Timed trigger thread
    • Asynchronous HTTP request threads
  • The relationship and cooperation between the various threads of the rendering process

Before writing a post “hardcore JS” once to understand the JS operation mechanism – portal has introduced, below we still go again, take a short time, all when the review again, you can also go to see down to understand, of course, if you are clear you can directly see the rendering process

Processes and threads

What is a process

As we all know, the CPU is the core of the computer and undertakes all the computing tasks

Officially, processes are the smallest unit of CPU resource allocation

It literally means an ongoing program, and I understand it as a task program that can run independently and has its own resource space

Processes include running programs and the memory and system resources used by the programs

The CPU can have a lot of processes, our computer every open a software will produce one or more processes, why the computer runs more software will card, because the CPU to each process allocation of resources space, but a CPU total of so many resources, the more points out, the more cards, each process is independent of each other, When a CPU is running one process while other processes are not running, the CPU uses a time-slice rotation scheduling algorithm to run multiple processes simultaneously

What is a thread

Threads are the smallest unit of CPU scheduling

A thread is a program running unit based on a process. A thread is an execution flow in a program. A process can have multiple threads

Only one flow of execution in a process is called single-threaded, that is, when a program executes, the path of the program is arranged in sequential order, the first must be processed before the next can be executed

Multiple execution streams in a process are called multithreading, which means that multiple threads can run simultaneously in a program to perform different tasks. That is, a single program is allowed to create multiple threads of parallel execution to complete their respective tasks

The difference between processes and threads

A process is the smallest unit of resources allocated by the operating system, and a thread is the smallest unit of program execution

A process consists of one or more threads, which can be understood as different lines of code execution within a process

Processes are independent of each other, but threads in the same process share program memory (including code snippets, data sets, heaps, etc.) and process-level resources (such as open files and signals).

Scheduling and switching: Thread context switching is much faster than process context switching

Multiprocess and multithreading

Multi-process: Multi-process means that two or more processes are allowed to run at the same time on the same computer system. The benefits brought by multi-process are obvious. For example, people can open the editor to type codes while listening to songs in netease Cloud, and the editor and the process of netease Cloud will not interfere with each other

Multithreading: Multithreading means that a program contains multiple execution streams. That is, a program can run multiple threads simultaneously to perform different tasks. That is, a single program is allowed to create multiple threads of parallel execution to complete their respective tasks

Why is JS single threaded

As a browser scripting language, JavaScript’s main purpose is to interact with users and manipulate the DOM, which determines that it has to be single-threaded, otherwise it can cause very complex synchronization problems

For example, if there are two threads of JavaScript at the same time, one thread adds content to a DOM node, and the other thread removes that node, which thread should the browser use?

Some people say that JS has Worker threads. Yes, in order to make use of the computing power of multi-core CPU, HTML5 proposes the Web Worker standard, which allows JavaScript scripts to create multiple threads, but the child threads are completely controlled by the main thread and cannot operate DOM

So, this standard doesn’t change the nature of JavaScript being single-threaded

Now that we know about processes and threads, let’s look at browser parsing. There are some differences between browsers, but they’re pretty much the same. Let’s use Chrome, which has the largest market share, as an example

Browser dependent

Browsers are multi-process

As a front-end, it is inevitable to deal with the browser, the browser is multi-process, take Chrome for example, every time we open a Tab page will produce a process, we use Chrome to open a lot of tabs, the computer will be more and more card, among other things, the first is very CPU consumption

Which processes are included in the browser

  • The Browser process
    • The browser’s main process (responsible for coordination and control), which has only one process
    • Responsible for browser interface display and user interaction. Forward, backward, etc
    • Responsible for page management, creating and destroying other processes
    • Draw a Bitmap in memory from the Renderer process onto the user interface
    • Network resource management, download, etc
  • Third-party plug-in processes
    • Each type of plug-in corresponds to a process that is created when the plug-in is used
  • GPU process
    • There is also only one process for 3D/ animation drawing and so on
  • Render process (heavy)
    • Known as the browser kernel (Renderer process, with multiple threads inside)
    • Each Tab page has a rendering process that does not affect each other
    • The main function is page rendering, script execution, event processing and so on

Why do browsers need multiple processes

Let’s assume that the browser is a single process, and one Tab page crashes, and it affects the entire browser, how bad the experience is

Similarly, a plugin crash can affect the entire browser

Of course, multiple processes have many other advantages, but more elaboration

There are many browser processes, and each process has many threads, which can take up memory

This also means that resources such as memory are expensive, which is a bit like trading space for time

This isn’t just to help us understand why Chrome freezes up when it runs for a long time

Renderer(heavy)

Page rendering, JS execution, event loop, are all performed within the renderer process, so we will focus on the renderer process

Renderers are multithreaded, so let’s take a look at some of the main threads used by renderers

The main thread of the Renderer process

GUI rendering thread
  • Responsible for rendering browser interfaces, parsing HTML, CSS, building DOM trees and RenderObject trees, layout and drawing, etc
    • Parsing HTML code (which is essentially a string) into browser-aware nodes generates a DOM Tree, or DOM Tree
    • Parsing CSS to generate CSSOM(CSS rule tree)
    • Combine DOM Tree and CSSOM to create Rendering Tree
  • When we change the color of some element or the background color, the page is repainted.
  • When we change the size of the element, the page Reflow.
  • The GUI thread executes when the page needs Repaing and Reflow, drawing the page
  • Reflow is more expensive than Repaint, so avoid Reflow and Repaint as much as possible
  • GUI rendering threads and JS engine threads are mutually exclusive
    • GUI threads are suspended when the JS engine is executing.
    • GUI updates are stored in a queue until the JS engine is idle and executed immediately
JS engine thread
  • The JS engine thread is the JS kernel and is responsible for processing Javascript scripts (such as the V8 engine)
  • The JS engine thread is responsible for parsing Javascript scripts and running code
  • The JS engine waits for tasks to arrive in the task queue and then processes them
    • Browsers can only have one JS engine thread running a JS program at a time, so JS is run single-threaded
    • Is there only one JS thread running on a Tab page (renderer process) at any one time
  • The GUI rendering thread is mutually exclusive with the JS engine thread, which blocks the GUI rendering thread
    • Is that we often encounter JS execution time is too long, resulting in incoherent page rendering, resulting in page rendering load blocking (is slow loading)
    • For example, when the browser rendersscriptTag, the GUI will stop rendering, and then the JS engine thread will start working, executing the js code inside. When the JS execution is complete, the JS engine thread will stop working, and the GUI will continue rendering the following content. So if the JS execution time is too long, it will cause the page to stall
Event trigger thread
  • Belongs to the browser, not the JS engine, controls the event loop, and manages a task queue.
  • When JS execution encounters event binding and some asynchronous operations (such as setTimeOut, but also other threads from the browser kernel, such as mouse click, AJAX asynchronous request, etc.), it will go to the event trigger thread to add the corresponding event to the corresponding thread (such as timer operation, then add the timer event to the timer thread). When the asynchronous events have a result, their callback operations are added to the event queue, waiting for the JS engine thread to become idle.
  • When the corresponding event meets the trigger condition is triggered, the thread will add the event to the end of the queue to be processed, waiting for the JS engine to process
  • Since JS is single-threaded, the events in the queue must be queued for processing by the JS engine
Timing trigger thread
  • setInterval 与 setTimeoutThe thread
  • Browser timing counters are not counted by JavaScript engines (because JavaScript engines are single-threaded, blocking threads can affect timing accuracy)
  • By a separate thread to time and trigger timing (after the timing is finished, added to the event trigger thread event queue, waiting for the JS engine idle after execution), this thread is the timing trigger thread, also known as the timer thread
  • W3C specifies requirements in the HTML standardsetTimeoutIf the interval is less than 4ms, it is 4ms
Asynchronous HTTP request threads
  • After the XMLHttpRequest connects, the browser opens a new thread request
  • When a state change is detected, if a callback function is set, the asynchronous thread generates a state change event, which is then queued for execution by the JavaScript engine
  • In simple terms, when an ASYNCHRONOUS HTTP request is executed, the asynchronous request event is added to the asynchronous request thread, and the callback function is added to the event queue, waiting for the JS engine thread to execute

After understanding the above basics, then we start to enter today’s topic, after entering the URL to get the resource, how to render, and experienced those processes?

Rendering process

Webkit rendering flowchart

As we all know, the rendering process is slightly different between browsers, and some of the things we’re going to introduce here are based on Chrome, which is Webkit, after all, it’s the mainstream, so let’s take a look at Webkit’s rendering flow chart

If you see this picture for the first time, you may be a little confused, I do not know where to look, don’t worry, first glance, we will slowly introduce the following, step by step analysis, if you read the whole article, you might as well go back and look at this picture again, it will be a lot clearer

Parse the HTML to build a DOM tree

Browser rendering, then the browser must get the page content, must parse the HTML first

Without further ado, let’s go straight to the HTML parsed graph.

If you’re looking at this for the first time and you don’t understand it, take your time

Let’s take a look at the big process of parsing the DOM in the diagram

Bytes -> Characters -> Tokens -> Nodes -> DOMCopy the code

First, make a request to get the HTML content of the page, which is the raw byte stream of 0/1

The browser then takes the raw bytes of HTML and converts them into characters based on the file’s specified encoding, such as UTF-8

Now the byte stream is a character stream, which is a large string

Browsers still have to work hard to parse the character stream into the correct DOM structure

Then we parse the character stream into a word we can understand, which is called token

Huh? What is a Token?

Words are the smallest units of compilation principles, such as tag start, attribute, tag end, comment, CDATA node

The Token will identify the current type of Token, which is a bit convoluted

<div class="haha">haha</div>
Copy the code

As above, this is a tag and it has a class attribute, but the browser just gets a string, it doesn’t know what the tag is and what the attributes are and what it’s doing, so it has to break it apart bit by bit, which is lexical parsing, how to parse it, like this

Class ="haha" # this is a class attribute. 3. > # Oh, here is a full div start tag. This is a text 5. </div> # Oh, see </div>, the whole div tag is closedCopy the code

Lexical parsing is a concept from the compilation principle. The above is a very simplified version, just to make it easier to understand

The Tokens stage identifies whether the current Token is a start tag, an end tag, or text

So let’s go back and go through the lexical parsing and we parse the stream of characters into tokens

After each Token is generated, the Token is immediately consumed to create a node object, which is the Nodes phase

Start and end tag pairs, attribute assignments, and parent-child relationships are all connected together to form a DOM tree

The next two steps are also called parsing, and the DOM Tree is finished parsing

Another big mouth, a DOM Tree (DOM Tree) | document object model (DOM), and these things said are the DOM Tree

Parse CSS to build CSSOM trees

If there is HTML parsing, there must be CSS parsing. For example, when we build the DOM and encounter a link tag that references an external CSS style sheet, the browser will decide that it needs the external style resource and immediately issue a request for that resource and return the style content, which is also a byte stream

As with HTML, to convert the CSS rules you receive into something that the browser can understand and process, the basic steps repeat the HTML process, but build CSS instead of HTML

CSS bytes are converted into characters, followed by lexical parsing and parsing, and finally form the tree structure of the CSS object model (CSSOM)

Node, as we all know, the style can be inherited, so in the process of building the browser recursive DOM tree to determine what elements of style, for the sake of the integrity of the CSSOM, only build such as finished can enter into the next phase, so even if the DOM has finished building, also have to wait for CSSOM, then can enter into the next stage

So the loading speed of CSS and the speed of building CSSOM will affect the first screen rendering speed, which is why we often say that loading CSS resources will block rendering

How do you optimize? DOM tree should be small, CSS should use ID and class less direct tag πŸ˜„

Parsing JavaScript scripts

The process of parsing JS is not fixed, because in the process of building a DOM tree, when the HTML parser encounters a script tag, that is, JS, it immediately blocks the DOM tree construction, handing control to the JavaScript engine. After the JavaScript engine runs, the browser will resume building the DOM tree from where it left off

As mentioned above, JS will operate on DOM nodes, and the browser cannot predict the specific content of DOM nodes in the future. In order to prevent invalid operations and save resources, it can only block the DOM tree construction

For example, if you don’t block the building of the DOM tree, and if JS removes A DOM node A, then the resources the browser spent building that node A are invalid

Loading JS files in the HTML header will delay the page drawing due to JS blocking. Therefore, in order to speed up page rendering, it is common to load JS files at the bottom of the HTML, or perform async or defer loading on JS files

  • asyncThe asynchronous execution is performed after the asynchronous download is complete. The execution sequence is not guaranteed, but must be inonloadBefore, but not sure inDOMContentLoadedBefore or after the event
  • deferIt is delayed execution, which in the browser looks as if the script has been placedbodySame behind (although the specification should be inDOMContentLoadedBefore the event, but actually different browser optimization effect is different, may also be behind it)

Build Render Tree/Render Tree

The Render Tree is formed by the combination of DOM Tree and CSSOM Tree, but it is not necessary to wait for the completion of DOM Tree and CSSOM Tree loading before the combination of the construction of the rendering Tree, the construction of the three is not sequential conditions, nor is it completely independent, but there will be crossover, parallel construction, so side loading will be formed. Working phenomena of parsing and rendering at the same time

The CSSOM tree and DOM tree are merged into a render tree, which contains only the nodes needed to render a web page and is then used to compute the layout of each visible element and output to the rendering process to render the pixels onto the screen

As shown above, to build the render tree, what does the browser do

  • The browser first iterates through each visible node, starting at the root of the DOM tree
    • Some nodes, such as script tags, meta tags, etc., are not visible and are ignored because they do not show up in the render output
    • Some nodes are hidden by CSS and thus ignored in the rendering tree, such as the one shown abovespanTags havedisplay: noneAttributes are also ignored
  • For each visible node, find its corresponding CSSOM rules and apply them
  • Outputs the visible node, along with its contents and computed style

Layout (Layout)

Render tree Also contains all the content and style information visible on the screen, with the render tree, then is about to enter the stage of layout (layout), so far, we calculated the which nodes should be visible and their style, but we have not count them in the equipment within the viewport’s exact location and size, This is the Layout stage, also known as automatic rearrangement or Reflow

This phase typically means that the content, structure, position, or size of an element has changed, requiring recalculation of styles and rendering trees

For a quick example, let’s look at the following code


      
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>hahaha</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world</div>
    </div>
  </body>
</html>
Copy the code

The body of the page in the code above contains two nested divs: the first parent div sets the display size of the node to 50% of the viewport width, and the second parent div sets its width to 50% of its parent, 25% of the viewport width.

The output of the layout process is a box model that accurately captures the exact position and size of each element within the viewport, and of course all relative measurements are translated into absolute pixels on the screen

We’ll take a look at it and we’ll talk about it later

Drawing (Painting)

After all the above steps, finally came to draw, this step to hear the name can think of its role

From the first steps we know which nodes are visible, their computational style, and geometric information, which we pass to the final stage to convert each node in the render tree into an actual pixel on the screen, commonly known as drawing or rasterization

There’s a type of drawing called redrawing, and that’s what we’re going to talk about

Redraw (Repaint)

When the change only affects the appearance of the element (e.g. background color, border color, text color, etc.), you simply apply the new style to the element. This is called Repaint.

Reflux (Reflow)

As we have said above the backflow, also called rearrangement, of course, you know, return must be accompanied by redrawing, redrawing can appear alone, by contrast, apparently return the cost of overhead than re-paint, and the recycling of a node also tend to lead to child nodes and node at the same level of return, so optimization scheme including commonly, try to avoid backflow

What causes reflux

  • Page render initialization

  • DOM structure changes, such as deleting a node

  • Render tree changes, such as less padding

  • Window resize

  • Some JS attributes cause backflow, and many browsers will optimize backflow until there is enough of them to do a batch backflow, but in addition to direct changes to the Render tree, when fetching some attributes, the browser will also trigger backflow in order to get the correct value, rendering the browser optimization ineffective

  • offset ( Top/Left/Width/Height )

    • scroll ( Top/Left/Width/Height )
    • cilent ( Top/Left/Width/Height )
    • width, height
    • Call thegetComputedStyle()Or IEcurrentStyle

How to reduce and avoid reflux repainting

We said that the overhead of backflow is too high, so we should definitely optimize it, and then we should try to avoid those operations as much as possible

  • Reduce style changes item by item, preferably all at oncestyle, or define the style asclassAnd update all at once
  • Avoid looping around the DOM and keep it offline before modifying it
    • To create adocumentFragmentApply all DOM operations to it, and finally add it towindow.document
    • Let’s start with the DOM nodedisplay:none(Will trigger oncereflow), then make changes and display it again
    • Clone a DOM node in memory, modify it, and replace it with the online node
  • Avoid reading properties such as offset multiple times and cache them into variables if you cannot avoid it
  • Locate complex elements absolutely or fixedly out of the document flow, otherwise backflow would be costly
  • Changing the font size can also trigger backflow, so minimize this
  • Table layout, a small change will cause the entire table layout, so use less

In general, backflow repainting, especially backflow, is very expensive and should be avoided. For information about backflow repainting caused by CSS properties, check out csstriggers.com/

Synthesis (Composite)

Finally coming to the last point of composition, let’s first summarize the above steps, so far we have gone through the rendering process as follows

  • First, parseHTMLDocument, forming a DOM tree
  • Then parsingCSSTo generate the CSSOM tree
  • In the process of DOM and CSSOM tree parsing, JS is encountered, which immediately blocks the DOM tree construction, JS parsing is completed, and the above two steps are followed
  • Next, the browser builds the Render tree from the DOM and CSSOM trees
    • During this process, invisible tag elements in the DOM are not placed in the render tree, as inThe < head > < / head > or display: none
    • The CSSOM tree rule is appended to each element of the render tree
  • Once the render tree is built, the browser positions and arranges the elements, a step also known as rearrangement/backflow (Reflow) or layout (Layout )
  • Then draw the elements’ styles, colors, backgrounds, sizes, borders, etc. This step is also called redraw (Repaint)
  • And then we have our final synthesis (composite), the browser will send each layer of information to the GPU, and the GPU will synthesize the layers and display them on the screen

I’m going to talk a little bit about this compositing step, just to give you a basic idea of what it is, because I missed it at first

First, we need a quick overview of some basic concepts

Browser Rendering

When the browser renders graphics, it has a drawing context, which is divided into two types

  • The first is the context that you use to draw 2D graphics, which is called a 2D Drawing context.
  • The second is the context for drawing 3D graphics, called GraphicsContext3D.

Web pages also have three rendering options

  • Software Rendering (CPU memory)
  • Synthetic rendering using software drawing (GPU memory) CSS3D, WebGL
  • Hardware-accelerated synthetic rendering (GPU memory)

Of course, we don’t need to understand them deeply, just know they exist

Software rendering technology

Webkit uses software rendering techniques to render pages when hardware-accelerated content (including but not limited to CSS3 3D transformations, CSS3 3D transformations, WebGL, and video) is not required

We saw software rendering technology above, what is it? Let’s move on

For each render object, three stages are required to draw itself

  • The first stage is to draw the backgrounds and borders of all blocks in the layer
  • The second stage is to draw the floating content
  • The third stage is Foreground, that is, the content part, outline, font color, size, etc. (the background and border of embedded elements occur at this stage)

Hardware acceleration technology

Hardware acceleration technology refers to the use of GPU hardware capabilities to help render web pages (GPU is mainly used to draw 3D graphics and the performance is nice)

Normal and composite layers

The layers rendered by the browser generally fall into two categories: normal layers and composite layers

The normal document flow can be regarded as a composite layer, we call it the default composite layer, because no matter how many elements are added to it, it is in the same composite layer, absolute layout and fixed are the same, although it can be separated from the normal document flow, but it still belongs to the default composite layer

Compound layer, can be independent of the ordinary document flow, after the change can avoid the whole page redraw, improve performance, but do not use a lot of compound layer, otherwise due to excessive resource consumption, the page will become more difficult, penny wise and pound foolish

GPU, the compound layer is drawn separately, so each other, through the way of hardware acceleration, to declare a new composite layer, it will allocate resources alone, of course, will flow out of the ordinary document, so that no matter how changes in the compound layer, also won’t affect the default reflux redrawn in the composite layer

What is composite layer/hardware acceleration

Composite layers, or hardware acceleration, simply trigger the composite, which must meet the following three conditions

  • The document flow is not affected
  • Do not rely on document flow
  • No redraw will be caused

Come to think of it, you can do this really not many (Chrome)

  • The most common way istransform
  • opacityProperty/transition animation (compositing layer is created during animation execution and elements return to their previous state before animation starts or ends)
  • will-changAttribute (this is more remote), general matchopacity 与 translateWith the exception of the properties mentioned above, which can cause hardware acceleration, the other properties do not become a composite layer. The effect is to tell the browser about the change in advance, so that the browser can start to do some optimization work (better to release after use).
  • <canvas> <webgl>Elements such as
  • And the old onesflashPlug-in, etc.

More generally, if we add the transform attribute to an element, then the element doesn’t affect or depend on the document flow, and it doesn’t redraw, so it becomes a composite layer, and we’re using the legendary hardware acceleration technique

Absolute?

This may be confusing, but we often say absolute is out of the document stream. Why is there no absolute in the compound layer or hardware acceleration

Absolute can be removed from the normal document flow, but it cannot be removed from the default compound layer, just as its left attribute can use the percentage value, depending on its offset parent

Therefore, even if the information in absolute changes, it will not change the rendering tree in the ordinary document flow, but when the browser finally draws, it will draw the whole composite layer. Therefore, the change of information in Absolute will still affect the drawing of the whole composite layer, and the browser will still redraw it. If there is too much content in the composite layer, Absolute causes large changes in drawing information and serious resource consumption

The hardware acceleration we mentioned above is directly in another composite layer, so its information changes will not affect the default composite layer, of course, the internal will definitely affect its own composite layer, just cause the final composite rendering

Page rendering optimization

The browser has made many optimizations for the key rendering steps described above, creating as few operations as possible for each change, as well as optimizing the way to judge the redrawing or layout, etc. According to the above, the following page rendering optimization practices, in no particular order, we can also supplement together

  • The HTML document structure should have as few layers as possible, preferably no more than six

  • Put the JS script as late as possible

  • Keep the style hierarchy as simple as possible

  • A small number of front-screen styles are placed inline in the TAB

  • Minimize DOM manipulation and access to offline DOM style information in scripts to avoid over-triggering backflow

  • Reduce the use of JS code to modify element styles and try to modify class names to manipulate styles or animations

  • Minimize browser rearrangements and redraws

  • For 2020 years! Don’t use the table layout

  • Only transform and opacity should be used in CSS animations, without rearrangement or redrawing

  • Hide out of the screen, or try to stop the animation while the page is scrolling

  • If possible, use ONLY CSS for animation. CSS animation is definitely better than JS animation

  • Avoid browser implicit composition

  • Change the size of the composite layer

The last

The above is somewhat arbitrary, and finally to wave the summary of the official point

We make a request, we get the page, and the downloaded page is handed over to the browser kernel (renderer) for processing

  • First, parse according to the DTD type defined at the top
  • The rendering process is multi-threaded internally, and the parsing of the web page will be handled by the internal GUI rendering thread
  • An HTML interpreter in a rendering thread that converts HTML pages and resources from byte stream interpretations to character streams
  • The stream of characters is then interpreted into words by a lexical analyzer
  • Then the parser builds nodes based on words, and finally builds a DOM tree through these nodes
  • This is called if the DOM node encountered is JS codeJS engineTo interpret the JS code execution, this time byJS engine ε’Œ GUI rendering threadThe mutex,GUI rendering threadThe rendering process stops, and if the DOM tree is modified during the JS code run, the DOM construction needs to start from scratch
  • If nodes need to rely on other resources, images /CSS, etc., the network module’s resource loader is called to load them, which are asynchronous and do not block the current DOM tree build
  • If a JS resource URL is encountered (without the tag asynchrony), the current DOM construction needs to be stopped until the JS resource is loaded and loaded byJS engineExecute before continuing to build the DOM
  • For CSS, the CSS interpreter interprets the CSS file as an internal representation structure, generating a CSS rule tree
  • Then combine CSS rule tree and DOM tree to generate Render tree, also called Render tree
  • Finally, the Render tree is laid out and drawn, and the results are passed to the browser control process through the IO thread for display

Page rendering is this over, and tens of thousands of words, as if also didn’t speak too much, everyone still can only to understand the concept of pang way, privately to deep or want see more related information, this is I see a lot of data output, finish see this article, and then go to the information or further should also will be easier to understand some, The core of this several posts are not separated from the classic interview question, so see here some basic knowledge points have been elaborated to you, you can try to summarize some, must be summed up and then see the summary below, so that we did not waste time

Next article “an interview question” enter the URL to render a comprehensive comb – summary, to be continued oh.

If it is helpful to you, move your little hands and praise it. Of course, I understand personally. If there is something wrong, please kindly point it out

Oh, there are, can add a friend add group communication together, the public number [not serious front end] also welcome to pay attention to yo πŸ˜„

Reference (refer to a lot of articles, paste three think better, recommend everyone to have a look)

  1. The process from entering the URL to loading the page? How to improve their front-end knowledge system by a problem

  2. From browser multi process to JS single thread, JS running mechanism is the most comprehensive combing

  3. An article about browser parsing and CSS (GPU) animation optimization