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

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

1. Reduce the number of HTTP requests:

(1) avoid redirection: redirection means that further action by the client is required to complete the request, and the request time will be extended. So you should use the most complete and direct address when typing URL, such as www.baidu.com instead of baidu.com.

(2) the mechanism of using cache: database cache, server cache (reverse proxy and CDN cache), browser cache.

2. Pictures are loaded lazily

There are so many pictures on the page that you can use lazy loading. Only the images on the * screen are loaded, and the corresponding images are loaded when the user scrolls to access the following content. The method is to replace the picture with a very small placeholder map, download the placeholder map only once, store the src of the original picture in another attribute, and judge that when the picture is about to enter the visual area, the path will be assigned to src and the picture will be downloaded for display.

3. Code optimization

(1) the structure of the page: CSS is placed at the top of the HTML content, and JavaScript is placed at the bottom of the HTML content. You can use preload to resolve the DNS of a resource in advance. Because browsers read content from top to bottom, the location where the resources are placed affects the access speed of the site. For example, if you put the script tag in front of the HTML content, the browser will first call the JavaScript interpreter to parse the JS, and then render the rest of the HTML content. For users, what they can see is the HTML content, so (1) doing so will lead to a delay in page usability. In addition, CSS decorates the page nodes, if the CSSOM is laid out before it is built, and when the CSSOM is built, if the CSS modifies the layout of the nodes, it will be rearranged, and the layout needs to be recalculated and drawn.

(2) JavaScript optimization: for example, reduce the operation of DOM, reduce rearrangement and redrawing, reduce scope chain search, be careful to use eval function and so on. The optimization of JS code and (below) CSS mainly requires front-end developers to have a clear understanding of the principles of page rendering, basic knowledge and good programming habits.

(3) CSS optimization: for example, reducing the use of wildcards'*', extracting common styles to enhance reusability, accurate selectors can reduce matching time, and moderate use of inline styles.

At this point, the study of "what are the practical skills of Web front-end performance optimization" 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.