Front-end performance optimization is actually to reduce the waiting time for users, so it is obvious to increase the network speed, but this is not something that our programmers can do, let’s talk about what we can do.
To talk about front-end performance, you must first understand: what happens from the user entering the URL to the page rendering.
Portal: https://segmentfault.com/a/1190000006879700
There is a lot of content in the above article. If you know the above knowledge, or don't want to spend time understanding it, then just read it below.
From the URL to the page, the process is as follows:
1. DNS resolution
2. TCP connection
3. Sending an HTTP request
4. The server processes the request and returns an HTTP message
5. The browser parses and renders the page
6. The connection ends
From the above process, I divided the front-end performance optimization into two parts:
1. Everything related to the network, including DNS resolution of HTTP requests, etc.
2. Web optimization is the part related to the front-end page, which is what we can do with our daily code. Some of
Some network related optimizations
DNS optimization
1. Set up DNS multi-level cache: browser cache, system cache, router cache, IPS server cache, root domain name server cache, top-level domain name server cache, main domain name server cache.
2. DNS load balancing (DNS redirection): Use CDN (Content Delivery Network) content distribution network to return an IP address closest to the user.
HTTP
reduces HTTP requests: The pictures in the page, or the imported CSS files and JS files are all one request, and the above process is repeated. Reducing the number of requests will naturally improve the speed of accessing the page.
Methods:
1. Merge CSS files: One CSS file is requested once, and multiple requests are requested multiple times. Of course, if it is merged, it is requested once
. 2. Merge JS files
.
4. Cache: Cache some CSS files or JS files, and the speed is naturally faster.
5. Reduce unnecessary information in cookies: because each request will bring cookies, the content is less and the speed is naturally faster; in fact, you can also use H5 web storage, used in place of cookies
web optimization
1. CSS
1. Try not to write CSS in the line
2. Use link instead of @import
3. Compress CSS
4. Avoid using CSS expressions
5. Write CSS at the top of the HTML file
2. JavaScript
1. JS is imported in the form of external files
2. Avoid repeated JS code
3. Reduce the operation of JS on DOM
4. Avoid unnecessary loops 5. JS
code (introduced connection) is placed in the lower part of the page
Three, HTML
if possible to reduce the DOM elements in the page
4.
Use the appropriate format for pictures, such as GIF PNG8 for small pictures, which will reduce the size of the picture.
The above are basically some optimization methods. If they are not complete, I will add them at any time.
If you are interested in why you do this, you can read the article I introduced at the beginning: from URL to page and the following two articles, reflow and repaint, will make you understand why.
Browser rendering pages have two important processes, reflow and repaint . These two processes have a lot of overhead on performance. To improve performance, these two processes should be reduced . They are also the reasons for reducing JS operation DOM, reducing DOM nodes, etc. , if you are interested, you can take a look: https://segmentfault.com/a/1190000005182937
http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html
Some front-end tools such as file merging, compression, and sprite production mentioned above can help us achieve