1. Static resources use CDN
A content delivery network (CDN) is a group of Web servers distributed in multiple geographic locations. As we all know, the further the server is away from the user, the higher the latency. CDN is designed to solve this problem by deploying servers in multiple locations, bringing users closer to the server and shortening request times.
Principle of CDN When a user visits a website without a CDN, the process is like this:
The browser needs to resolve the domain name to an IP address, so it needs to make a request to the local DNS. The local DNS sends requests to the root server, top-level domain name server, and permission server to obtain the IP address of the website server. The local DNS sends the IP address back to the browser, which makes a request to the web server IP address and gets the resource.
If a user visits a website with a CDN deployed, the process looks like this:
The browser needs to resolve the domain name to an IP address, so it needs to make a request to the local DNS. The local DNS sends requests to the root server, top-level domain name server, and permission server to obtain the IP address of the global load balancing system (GSLB). The local DNS then sends a request to the GSLB. The GSLB determines the user location based on the IP address of the local DNS, filters out the local load balancing system (SLB) that is close to the user, and returns the IP address of the SLB to the local DNS. The local DNS sends the IP address of the SLB to the browser, and the browser sends a request to the SLB. Based on the resource and address requested by the browser, the SLB selects the optimal cache server and sends it back to the browser. The browser then redirects to the cache server based on the address sent back by the SLB. If the cache server has a resource that the browser needs, it sends it back to the browser. If not, the resource is requested from the source server, sent to the browser and cached locally.
2. Use the font icon iconfont instead of the image icon
Font icon is to make the icon into a font, use the same as font, you can set properties, such as font size, color and so on, very convenient. And the font icon is a vector graph, not distortion. Another advantage is that the generated files are extremely small.
3, make good use of cache, do not load the same resources repeatedly
To prevent users from having to request a file every time they visit a site, we can control this behavior by adding Expires or max-age. Expires sets a time before which the browser won’t request the file, instead using the cache. Max-age is a relative time, so it is recommended to use max-age instead of Expires.
But this raises the question, what happens when the file is updated? How do I notify the browser to request the file again?
You can make the browser drop the cache and load new resources by updating the url referenced in the page.
The specific approach is to associate the modification of the resource URL with the file content, that is, only the change of the file content will lead to the change of the corresponding URL, so as to achieve precise cache control at the file level. What’s relevant to the contents of the file? We will naturally associate with the use of data summarization algorithm to extract summary information of the file, summary information and file content one by one correspondence, there is a cache control basis can be accurate to the granularity of a single file.
4. Reduce redrawing and rearrangement
Browser rendering process
Parsing the HTML generates a DOM tree. Parsing CSS generates a CSSOM rule tree. Combine the DOM tree with the CSSOM rule tree to generate the render tree. Traverse the render tree to start the layout, calculating the location size information for each node. Draws each node of the render tree to the screen.
rearrangement
Changing the position or size of a DOM element causes the browser to regenerate the render tree, a process called rearrangement.
redraw
When the render tree is regenerated, each node of the render tree is drawn to the screen, a process called redrawing. Not all actions cause rearrangement, such as changing font colors, only redrawing. Remember, rearranging leads to redrawing, redrawing does not lead to rearranging.
Both reorder and redraw operations are very expensive because JavaScript engine threads and GUI rendering threads are mutually exclusive and only one of them can work at a time.
What actions will cause the rearrangement?
Add or remove visible DOM elements Change element position Change element size Change content Change browser window size Change How to reduce rearrangement redraw?
When changing styles in JavaScript, it is best not to write styles directly, but to change styles by replacing classes. If you want to perform a series of operations on a DOM element, you can take the DOM element out of the document flow, modify it, and bring it back to the document. Hidden elements (display:none) or DocumentFragement are recommended for this solution. 4. Reduce redrawing and rearrangement
5. Reduce HTTP requests
A complete HTTP request goes through a DNS lookup, a TCP handshake, the browser sends the HTTP request, the server receives the request, the server processes the request and sends back the response, and the browser receives the response.Copy the code6, if-else contrast switch
As the number of judgment conditions increases, switch is preferred over if-else.Copy the code7. Use requestAnimationFrame for visual changes
8. Use flexbox instead of the earlier layout model
In the early days of CSS layouts, elements could be positioned absolutely, relative, or floating. Now, we have a new layout, Flexbox, grid, which has one advantage over the earlier layout, which is better performance.Copy the code