Original address https://blog.csdn.net/grandPang/article/details/51329289
Regarding the summary of front-end performance optimization, you can see articles in this area everywhere, and the optimization methods are nothing more than those "fixed" aspects. Of course, some aspects are outdated, so here, I will summarize it myself. To deepen understanding, but also hopefully a different form of summary.
-----------------------The main text starts here ----------------------- -------------
1. What is front-end performance optimization (what)?
In the process from the user accessing the resource to the complete display of the resource in front of the user, through technical means and optimization strategies, the processing time of each step is shortened to improve the access and presentation speed of the entire resource.
2. Why do front-end performance optimization (why)?
In the process of building a website, any detail may affect the access speed of the website. If you do not understand the knowledge of performance optimization, many factors that are unfavorable to the website access speed will accumulate, which will seriously affect the performance of the website and cause the website access speed to change. Slow, low user experience, and ultimately lead to user loss.
Three, the principle of front-end performance optimization (rule)
1. Don't follow the guidelines and do what is written in the script, you need to adapt to local conditions according to the actual situation;
2. No bugs!
4. What are the stages (process) from when the browser initiates a request to when the page can be browsed normally?
Preprocessing -> DNS resolution -> Establish connection -> Initiate request -> Wait for response -> Accept data -> Process elements -> Layout rendering
Five, the specific method of performance optimization (way)
a) Content level
1. DNS resolution optimization (DNS cache, reduce DNS lookup, keep-alive, proper host domain name)
2. Avoid redirects (/ is still needed)
3. Divide into multiple domain names
4. Avoid 404
2) Network transmission stage
1. Reduce the size of the entity during transmission
1) Cache
2) cookie optimization
3) File compression ( Accept-Encoding: g-zip)
2. Reduce the number of requests
1) Documents are properly merged
2) Sprite map
3. Asynchronous loading (concurrency, requirejs)
4. Preloading, lazy loading, on-demand loading
3) Rendering stage
1. js is placed at the bottom, css is placed at the top
2. Reduce redraw and reflow
3. Reasonable use of meta headers such as Viewport
4. Reduce dom nodes
5、BigPipe
4) Script execution stage
1. Cache nodes to minimize node lookups
2. Reduce the operation of nodes (innerHTML)
3. Avoid unnecessary loops, appropriate use of break, continue, and return
4. Event delegation
6. Exploration of details related to performance optimization
1. Cache
1) Expires Cache-Control Last-Modified ETag If-Modified-Since If-None-Match What role do these request headers play in browser caching, and how do they play a role in caching?
1. When a file is accessed for the first time in the browser, the browser does not have a cache at this time, and directly obtains the file from the server, returns it to the client, and stores it in the browser cache; at this time, the return status Code 200, and the server can set the response header Expires or Cache-Control, Last-Modified or ETag.
2. If Expires or Cache-Control is set, then when the file is requested again within the specified time, as long as the cache is not forced to refresh (F5, etc.), the browser will directly read the cache and no longer request the server.
3. If Expires or Cache-Control is not set or expired, you need to request the server again. The browser will initiate conditional verification. When initiating the request, add If-Modified-Sinse or If-None-Match to the request header. Determine whether the latest file has been updated. If not, it will return the response status code 304 without any response entity. That is to say, only some corresponding headers are transmitted to the client, and the response entity is empty, which greatly reduces the Given the volume of transmission, the browser receives a 304 response and knows to read the browser cache.
2) What is the difference between pressing Enter, browser refresh button, F5, Ctr+F5?
1. Press Enter, the browser will determine whether there is a cache, and determine whether the cache has expired according to Expires or Cache-Control. If not, it will not initiate a request and use the cache directly. Otherwise, it needs to be re-authenticated like the server initiates the request.
2. The browser refresh button has the same effect as F5. Regardless of whether there is Expires or Cache-Control, it will force a request to the server for re-verification, and judge whether to return 304 according to If-Modified-Sinse or If-None-Match, if yes , the browser will continue to use the cache.
3. When pressing Ctr+F5, regardless of whether there is Expires or Cache-Control, the server will be forced to request, but no re-verification will be performed. The server will directly return the latest content to the browser, regardless of the cache. existence or expiration.
3) Why is it not enough to use Last-Modified, to use ETag entity tag to verify?
1. Some documents will be rewritten periodically, but the actual data contained is the same. (although the content does not change, the last modified date does)
2. Some documents may be modified, but the modification is not important, there is no need to update the cache.
3. Some servers cannot accurately determine the last modification date of a page.
4. When the document changes in millisecond intervals (such as real-time monitoring), the Last-Modified granularity in seconds is not enough.
4) Cache strategy for post request to pull a large amount of data?
2. DNS resolution process
3、HTTP
1) What are the meanings of all common status codes?
2) What is the difference between 301 jump and 302 jump?
3) Detailed explanation of http header information?
4) What do the number of concurrent connections, the number of requests, and the number of concurrent users mean?
4. Browser
1) The process of browser loading and rendering web pages
2) How the browser works