Summarize the methods of front-end performance optimization

The content contained in the front end is rich, it includes HTML, CSS and JS and images and other resources. Therefore, front-end optimization is complex and necessary. In the following article, we will introduce the method of front-end performance optimization. This article will be updated on Github.

Purpose of optimization

The purpose of optimization is to make the page load faster, more timely response to user operations, to bring users a better user experience, for developers optimization can reduce the number of page requests, can save resources.

Network optimization

1. Reduce the number of HTTP requests, compress and merge CSS, JS, and image files, and set the HTTP request cache appropriately.
2. Styles at the top, scripts at the bottom.
3. Use the CDN.
4. Loading on demand, showing progress bar or loading

CSS optimization

1. Avoid USING CSS expressions
2. Minimize the hierarchy of CSS selectors
3. Reduce TABLE layout
4. Remove empty styles
5. The width and height of images are specified before loading or they are separated from the document flow to avoid page backflow caused by recalculation after loading.

JS optimization

1. Reduce the use of closures. Too much use of closures creates too much undestroyed memory, and too much memory can lead to memory overruns.
2. Avoid using iframe. Iframe is embedded in other pages, and the parent page is rendered while the child page is rendered, which slows down the rendering process.
3. Less DOM manipulation, less page redrawing and reordering. Use CSS3 animation
4. Use event delegates whenever possible. Event delegates can bind events to dynamic elements, and based on the implementation of event delegates, the overall performance is 50% better than one bound event at a time.
5. Pay attention to anti-shake and throttling

Picture optimization:

1. Use CSS3 instead of pictures. For example, to achieve embellishments such as translucency, borders, rounded corners, shadows, gradients, and so on, CSS can be used in mainstream browsers.
2. Use vector SVG instead of bitmaps. For most patterns, ICONS, etc., vector images are smaller and can be scaled without generating multiple sets of images. SVG is now supported by major browsers, so it’s safe to use it!
3. Use appropriate image formats. Our common image formats are JPEG, GIF, PNG. Basically, content images are mostly photos and the like, suitable for JPEG. Retouching images usually work better with lossless compressed PNG. GIF basically should not be used except for GIF animations. For animation, it is also recommended to use video elements and video formats, or to use SVG animation instead.
4. Set up a proper cache based on HTTP.
5. Use font ICONS webfont, CSS Sprites, etc.
6. Use CSS or JavaScript for preloading. WebP image format can bring front-end optimization.
7. WebP supports lossless, lossy compression, dynamic and static pictures, the compression ratio is better than GIF, JPEG, JPEG2000, PG and other formats, is very suitable for network image transmission.

Lazy loading of images with preloading

The principle of image lazy loading is not to set the SRC attribute of the image, but to hide the URL of the image, for example, in data-src. When some event is triggered (for example, scroll to the bottom, click load image), the actual URL of the image will be put in the SRC attribute. In this way, the image can be loaded lazily

Image preloading refers to the realization of image preloading in some websites that need to display a large number of images. To improve the user experience. There are two common methods: one is to hide in the URL attribute of CSS background, and the other is to achieve Image preloading by setting the SRC attribute of the instance object in javascript Image object. The relevant codes are as follows:

Why convert images to Base64

The base64 encoding of pictures can encode a picture data into a string, which is used to replace the image address.

1. Improved performance: every image on the web page is required to consume an HTTP request to download, image download is always required to send a request to the server, if the image download does not need to send a request to the server, Base64 can be downloaded to the local with the HTML at the same time. Reduce HTTPS requests.

2. Encryption: users can not see the picture content, only see the code.

3. Easy reference: When some images are used in multiple files at the same time, you can convert the images into base64 files and put the styles in the global file, such as common.css. In the future, you can add the class name directly

Related articles