When we type the url into the browser; What does a browser do to make a page visible to us?

• Start by typing the url www.baidu.com in the client browser
• The client browser sends an HTTP REQUEST to the server (omits many details)
• The server side stores the original code of baidu official website project
• After the server receives the request: the server side returns the code in the specified text to the client HTTP RESPONSE
  

  

  

Process/thread

A process can contain anywhere from zero to multiple threads

1

• Computer installed a lot of application software, every time running an application, are equivalent to open up a process
• For the browser, every time a new page card is created to access a page, a new process is created

2, Thread thread

• It is possible to do more than one thing at a time in each process, and if you do more than one thing at a time, you open up more than one thread

Common threads in browsers

Browsers are “multi-threaded”, but JS rendering or page rendering is “single-threaded”

• GUI rendering thread
  • Render and draw pages
• JS engine thread
  • Run and render JS code
• Event control and trigger threads
• Timers control and trigger threads
• Asynchronous HTTP request threads
• .

Three, synchronous/asynchronous

1. Synchronous programming

• Single thread
• You can only deal with one thing at a time, and then move on to the next

2. Asynchronous programming

• Multiple things can be done at once (usually based on multi-threaded concurrency)
• Asynchronous programming in JS has its own special processing methods
  • Queue Queue
  • EventLoop

let n = 10;
setTimeout((a)= > {
    n++;
    console.log(n);
}, 0);
console.log(n);
for (let i = 0; i < 99999999; i++) {}
console.log(n);
Copy the code

Step by step:

• JS is single-threaded, so in the stack, the code must be executed sequentially, from top to bottom

• 2. If an asynchronous operation code is encountered during code execution:

  • Timer (The operation to set the timer is synchronous (set immediately), asynchronous refers to the interval after which the specified function is executed)
  • Event binding (listening)
  • Asynchronous AJAX requests
  • PROMISE/ASYNC/AWAIT
  • .

• The event column EventQueue

  • 3. When a timer is encountered: the browser creates an EventQueue by default
  • 4. Asynchronous operations encountered during the execution of JS code are first placed in the event queue
    • (Interval browser minimum response event, execute the corresponding arrow function), put in the event queue
    • The browser opens a separate timer thread that listens for the arrival times of each timer stored in the event queue
    • Only when the GUI thread is idle will it come to look for it

• 5. At this point the GUI rendering thread continues down the code: output 10

• 6, encounter cycle: cycle is synchronous, the code encountered in the loop, will interrupt the whole page cycle or interrupt the execution of the code

• 7, continue to execute synchronization code: output 10

• EventLoop

  • The synchronization task code in stack memory has been executed:
    • Go to the event queue to find the task up to date
    • Put tasks on the stack that have reached the execution condition (one at a time)
    • The GUI thread still executes it
  • 9. Wait for the GUI to complete, “idle down”, go to the event queue to find other tasks with arrival time…… Until the event queue has been executed

  The loop lookup process is called the EventLoop

3. Render differences between the three CSS styles

There are two ways to handle other requests when a GUI renders a page:

• Let the GUI thread fetch it:
  • The following code does not continue rendering until the CSS file is loaded back from the server
• Create a thread to load the CSS file from the server:
  • Regardless of whether the CSS loads back, the GUI thread continues rendering down

-1). Encountered during rendering<link>Intrusive style: Asynchronous operation

• The browser creates a new HTTP request thread to load CSS-style content to the server
• At this point the GUI thread can continue rendering down (regardless of whether CSS comes back)

-2). If the encounter is@importImport style: Synchronous operation

• Instead of opening a new thread to load the CSS, the current thread loads it
• So as long as the CSS is not loaded back, the following code will not continue rendering (blocking the page rendering)

Compare to @import: link improves page rendering speed

– 3). Embedded

Link will speed up page rendering, but when CSS code is low, it is best to use inline (write CSS and HTML together), so that when the HTML is loaded back in, the CSS comes back in

HTTP requests of any kind are bound to have time and performance costs

• The premise is less CSS code;
• If there is a lot of code, if it is put together with HTML, then the first HTML request will be slower, and the loss is not worth the gain;

4. The steps of the browser rendering page

1. Generate DOM tree

Renders all the HTML tags

• conversion
  • The first thing returned over HTTP is the hexadecimal encoded byte data
  • After taking the bytes of data, the browser uses internal mechanisms to convert the data into code that we can see
• The token
  • In accordance with theW3CThe rules of the specification (the fifth generation version of specification H5) are translated into labels that we can understand
• Lexical analysis
  • Through the converted label, lexical analysis, generationDOMnode
• The DOM to build
  • And then finally by looking at each of themDOMThe relationship between nodes is generatedDOMThe tree
    

    

Picture source: picture excerpted from the network, if there is infringement, contact delete

2. Generate CSSOM tree

After requesting CSS back, render CSS

The CSSOM tree is generated using the same process as the DOM tree

Picture source: picture excerpted from the network, if there is infringement, contact delete

3, DOM TREE + CSSOM TREE => RENDER-TREE

Picture source: picture excerpted from the network, if there is infringement, contact delete

Layout or rearrangement/reflow

Structure and position calculation in viewport of device according to RENDER-TREE => Layout or rearrangement/reflow

5. Painting or Rasterizing

According to the geometry information obtained by rendering tree and backflow, the absolute pixels of nodes can be obtained => Painting or Rasterizing.

Mind mapping