Advanced web front-end development: detailed explanation of web front-end performance optimization

For a web front-end engineer, web front-end performance optimization is a must-have knowledge, which determines whether you can become a qualified front-end developer. So, for beginners, how can we optimize the front-end performance of the Web? Next, Qianfeng Guangzhou Xiaobian will introduce it to you.

Front-end performance optimization refers to the merging and compression of resources, the principle of image encoding, and the selection of types, browser rendering mechanism, lazy loading, preloading, browser storage, caching mechanism, PWA and Vue-SSR, etc.

Front-end optimization is generally based on basic optimization (picture coding principles and other issues), and a higher level is advanced optimization (browser rendering mechanism, browser storage, optimization), combined with server-side optimization (first screen rendering and other issues) Wait.

Front-end performance optimization solution, minimize HTTP requests, use content delivery network, avoid empty src or href, add expired or cache control headers, gzip components, put styleSheets at the top, put scripts at the bottom, avoid css expressions, reduce dns lookups, set js and css to external, avoid redirects, configure etags, use ajax cache, reduce number of dom elements, no 404, reduce cookie size, don't scale images in HTML, avoid using Filters, using favicon.icon are small and cacheable.

Merging files is a way to reduce the number of HTTP requests by merging all scripts into one script, similar to merging all css into one stylesheet.

To achieve performance optimization, first, reduce the number of our HTTP requests and reduce the size of the requested resources; second, what is the principle of resource compression and merging. What is the effect before compression and merging, and what is the difference between compression and merging.

How to reduce the size of our HTTP requests, each HTTP request has to go through the network environment to reach our server, each request has the loss of the network environment, reduce multiple HTTP requests to one, reduce the loss in the network environment. You can also start from the server side, first render the effect reflected in the page, and then directly output it to the web page.

Each request has the loss of the network environment. We can combine multiple HTTP requests into one, thereby reducing the same environmental loss.

Bandwidth, if the size of an HTTP request can be smaller, the access will be faster. In the rendering process on the browser side, if a frame is used, it must be rendered from the browser. The template in the frame is to be rendered in the browser. This rendering in the frame is not conducive to the first screen, it has a great loss to the first screen, and is not conducive to the performance of the front end.

Server rendering, rendering HTML straight to our browser page, not rendering in the browser.

Front-end performance optimization point, through the process of HTTP request, we can know that we can cache through dns to reduce the time of dns query, the process of network request goes to the nearest network environment, and the same static resources are cached to reduce the size of HTTP requests , reducing HTTP requests, server-side rendering, and front-end optimization points from the business.