Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what are the measures to optimize the performance of Web front-end". In daily operation, I believe that many people have doubts about the optimization measures of Web front-end performance. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "what are the optimization measures for Web front-end performance?" Next, please follow the editor to study!

1. HTML CSS JS location

Generally, you need to put the CSS at the top of the page, the HEAD section, and the JS code at the bottom of the page. Because the page needs to be loaded as CSS before rendering, and if the JS is not executed before the page is loaded, it should be placed at the bottom of the page, so as not to affect the rendering speed of the page due to excessive loading of JS before the page is displayed.

2. Reference file location

There are some plug-ins need to reference to remote pictures, CSS, JS, icons, etc., if the remote resources connection network speed is not good, such as some foreign resources, will cause page blocking, but also cause page display problems, try to reference remote resources can be localized.

3. Reduce background requests

Each request consumes resources and affects the performance of the system, so the number of background requests is reduced. For example, try to merge the same resources (pictures, JS, CSS, etc.) into one file, and the page can be requested once, which saves a lot of http connection overhead and round-trip time loss.

On the other hand, if it is about raffle, shake, second kill and other functions, you can limit the frequency of sending to the backend. For example, the front end operates 10 times before sending a request to the back end, so that the backend traffic control is achieved from the front end. It is best to control the traffic to the outermost layer of the access, and try not to let the request fall to the bottom.

4. Compressed transmission

Http compression can compress plain text to 40% of the original content, thus saving 60% of data transmission. GZIP is a commonly used compression coding. Therefore, enable GZIP compression to speed up http transmission for text-type resources such as CSS, JS, and HTML.

5. Reduce cookie transmission

Cookie will be included in each request and response. If there is too much cookie, it will affect the response speed of http, so try to control the transmission volume of cookie in high concurrency cases. Nginx limits cookie transmission by default. In addition, static resources such as CSS, JS, pictures, etc., can enable separate domain names and disable cookie transmission of static resources, which can greatly improve efficiency.

6. Browser cache

In the case of high concurrency, something that doesn't change can be cached in the browser cache, or some active content can be cached on the client in advance to prevent the activity from flooding the server with requests.

7 、 CDN

The previous article talked about the concept of CDN, which is a static content distribution network, which is essentially a cache of static resources, which can be put on the CDN, so that users can get resources from the nearest place, which greatly improves the speed of user access.

8. Reverse proxy

In addition to the load balancing function, the commonly used reverse proxy nginx can also configure caching to speed up the response speed of requests. When users visit it for the first time, static resources can be cached to the reverse proxy server, so that other users' requests can be directly obtained and returned from the reverse proxy server, so that until the role of static resource caching.

At this point, the study of "what are the measures to optimize the performance of the Web front-end" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.