Process: Every program opened (restaurant)
Threads: There are a lot of things to do in a program that are threads, but browsers are multithreaded, and browsers give JS a thread, so JS is a single thread
Stack memory: provides an environment for us to execute code
legend
A flowchart
Take the figure as an example: 1. The client (browser) enters the URL -> initiates the request request as the server -> the server finds the requested resource (index.html)
2. Response of the server (like sending HTTP packets by the client)
3. After the client receives the code, the browser creates a stack memory in the memory bar to provide an environment for the execution of the code; Allocate a main thread to parse and execute code line by line;
4. Process the code, line by line, stack execution -> execute the stack until the execution of the last line of code, where the browser encountered link/script/img and other requests, will open a new thread to load the resource file
5. After the first top-down walk, only DOM trees are generated
6. The CSS generates the CSSOM
7. Finally generate the Render Tree
DOM redraw and Reflow Repaint & Reflow
redraw
Element style changes (but width, height, size, position, etc.)
Such as the outline, visibility, color, background, color, etc
backflow
Changes in the size or position of elements (when the page layout and geometry information changes) trigger a relayout, causing the render tree to recalculate the layout and rendering
Add or remove visible DOM elements; The position of the element changes; The size of the element changes; Content changes (e.g. text changes or an image is replaced by another image of a different size); When the page is first rendered (which is inevitable); Because backflow calculates the location and size of elements based on the viewport size, browser window size changes can also trigger backflow
Note: Backflow must trigger redraw, and redraw does not necessarily backflow
Front-end performance optimization: Avoid DOM backflow
1. Abandoning the era of traditional DOM manipulation, vUE/React started the data impact view mode MVVM/MVC /virtual DOM/DOM diff…… 2. Separate read and write operations (modern browsers have mechanisms for rendering queues, and the simultaneous processing of style issues triggers a single backflow
<script> let box = document.getelementByid ('box'); box.style.width = '200px'; box.style.height = '200px'; box.style.margin = '10px'; </script> // But this triggers backflow twice, because adding a fetch element breaks the following style change, <script> let box = document.getelementByid ('box'); box.style.width = '200px'; console.log(box.clientWidth); box.style.height = '200px'; box.style.margin = '10px'; <script> let box = document.getelementByid ('box'); box.style.width = '200px'; box.style.height = '200px'; box.style.margin = '10px'; console.log(box.clientWidth); </script>Copy the code3. Batch processing
Box-style. cssText = 'width: 200px; height: 200px'; box.className = 'aa';Copy the code4. Cache processing
let a = box.clientWidth;
let b = box.clientHidth;
box.style.width = a + 10 +'px';
box.style.hidth = b + 10 +'px';
Copy the code5. Element batch modification document fragment: createDocumentFragment template string splicing
<body> <ul id="box"></ul> <script> let box = document.getElementById('box'); let frg = document.createDocumentFragment(); For (let I =0; i<5; i++){ let newLi = document.createElement('li'); newLi.innerHTML = i; Frg. appendChild(newLi); } // Put the content into the container once: raise a return box.appendChild(FRG); frg = null; // Let STR = ' '; for(let i=0; i<5; i++){ str+=`<li>${i}</li>` } box.innerHTML = str; </script> </body>Copy the code6. Animation effect applied to elements with position attribute absolute or fixed (out of document flow)
7. Css3 hardware acceleration (GPU acceleration)
Rather than thinking about how to reduce backflow redraw, we’d like to see no backflow redraw at all; transform\opacity\filters… These properties trigger hardware acceleration and do not cause the pits that backflow and redraw can cause: excessive use can take up a lot of memory, consume a lot of performance, and sometimes blur fonts
box.style.transform = 'translateX(100px)'
Copy the code8. Sacrifice smoothness for speed
Move an animation 1 pixel at a time, but if the animation is using 100% CPU, the animation will look jumpy because the browser is struggling with update backflow. Moving 3 pixels at a time may seem low in smoothness, but it won’t cause the CPU to shake on a slower machine
9. Avoid table layouts and JavaScript expressions with CSS
Performance optimization:
1. Reduce the number and size of HTTP requests
- Lazy loading of images
3. Stream audio and video files
.
Network requests to know:
Request Phase :DNS resolution, TCP three-way handshake and four-way handshake, HTTPS and HTTP
Response Response phase :HTTP status code, 304 cache, and HTTP packets
The DNS
Type a web address into your browser (The domain name-> Use DNS to find the corresponding IP address of the domain name (The DNS)(The machine can only recognize IP addresses)Example of DNS resolution picture
Detailed summary of the browser rendering process
Enter a url (domain name) in your browser (visible)-> Use DNS to find the IP address of the domain name (DNS resolution)-> To the server sends a request to you send a packet to reach the right through a router (request) – > request successful server to the browser to return to a package browser – > after receiving the formal send – > “I want to what” this matter apart after server receives the request, to find you want is “something (index. The HTML image video, etc.)” It then returns to the browser (response)-> The browser parses the server response and renders the page information as seen
A simple summary of the browser rendering process
Domain name resolution => Connect server => Request response => Parse render
HTTPS is introduced
What is the certification center, how to sign the certificate?
Reference address: station B intelligent community DNS resolution
Reference address :B station HTTPS