Front-end performance optimization

Front-end performance optimization refers to the process from the beginning of the user to visit the website to the complete display of the whole page. We can speed up the loading of the page through various optimization strategies and optimization methods, so that the user’s operation response is more timely, so as to enhance the user’s sense of use of the system.

1. Load image resources

Image format

Jpeg: A lossy compressed image format widely used for color photographs. It is raster graphics. Common file extensions include JPG, JPEG, and JPE. In the Internet is often used to store and transfer pictures. This format is not suitable for graphics and text, icon graphics, because its compression algorithm does not support this type of graphics, and does not support transparency. It is often used for colorful photos, color images, large focus images and graphics with irregular structure such as banners.

PNG: convenient network image, is a lossless compression bitmap image format, support index, gray, RGB three colors, and Alpha channel features. Ideal for solid colors, transparency, line drawings, ICONS and less colored images that require translucency.

GIF: bitmap graphics file format, 8-bit color reproduction of true color image, using LZW compression algorithm for encoding. Support 256 colors, only support full transparency and translucent, can support GIF, but each pixel only 8bit, not suitable for storing color pictures. Often used to animate an icon.

Webp: Is a modern image format that provides lossless and lossy compression and supports transparency. Using 8-bit compression algorithm, lossless compression is 26% smaller than PNG, lossy compression is 25-34% smaller than JPEG, better animation than GIF, often used for graphics and translucent images.

Image optimization

Use a compression tool to compress images.

Lazy loading image

Use a public image to prop up the entire layout of the page before the real image loads, and then replace it with the real image. The LQIP tool can blur the image and convert it to a tiny Base64 code.

2. HTML optimization

Simplified HTML Code

Reducing nesting, which is hierarchy, also reduces the number of DOM nodes and minimizes the number of DOM nodes rendered by the browser.

Reduce some of the non-semantic code, such as empty tag clearing float.

You are advised to delete HTTP or HTTPS from the connection. The protocol header of a link is the same as that of a page, so you can omit it.

You can remove unnecessary whitespace, newlines, indentation, and unnecessary comments, usually with a compression tool.

File location

CSS file links should be placed at the head of the page. CSS loading will not block DOM Tree parsing, but will block DOM Tree rendering and subsequent JS execution. Therefore, parsing CSS before DOM Tree rendering can reduce the number of browser rearrangements. And CSS at the bottom causes the page to go white for longer.

Js files are usually placed at the bottom of the page to prevent js loading and parsing from blocking normal rendering of page elements.

3. User experience

Setting favicon.icon, how not to set the console will give an error, and the address bar is empty when the user visits, which is not good for brand memory.

Add necessary CSS and JS for the first screen. Generally, the page will be displayed after all dependencies are loaded, which will lead to blank pages. You can add background images or loading or skeleton screens. Enhance the user experience.

4. CSS optimization rules

Improve CSS rendering performance

Use expensive attributes, such as the NTH-Child dummy class or position: Fixed, with caution, because they cost the browser a lot of rendering performance.

Try to reduce the number of style levels, such as div ul Li SPAN I {color:red}, you can directly set the I tag class, directly write style.

Avoid using attributes that take up too much CPU and memory, such as text-indent.

Avoid using power-intensive properties, such as transform, opacity, and Transitions, instead of using CPU.

Use CSS selectors appropriately. Avoid wildcards and CSS expressions

For example color: expression((new Date()).gethours () % 2? “#fff” : “#000”)

Avoid such regular attribute selectors, * = | =, ^ =, $=, use of CSS, outside the chain can be individually documented in CDN, use the cache form is loaded, avoid using the import, because he will load the blocking process, after the need to load down to perform.

Simplify CSS code, use indentation syntax, such as margin-top can be integrated and unified in margin, such as how the value of 0 can be deleted, delete unnecessary unit values, delete excessive semicolons, delete Spaces and comments, minimize the size of the style sheet. These deletions can also be done directly using the compression tool.

Use Web Fonts properly

Fonts can be deployed to the CDN to speed up loading, or they can be directly stored in the CSS as base64 and cached through localStorage. Some Google addresses can use domestic hosting services, rather than directly using the source address.

CSS Animation optimization

Avoid using animations at the same time. Too many animations may interfere with normal browsing and affect browser performance.

5. Js optimization

Improve js file loading performance

CSS goes in the head tag and JS goes at the end of the body.

Variables and functions

Use id selectors because id selectors are quick to query.

Avoid eval, which is a performance comparison method.

Keep js functions as simple as possible, and don’t put too much content into one function.

Js animation

Try to avoid using a lot of JS animations, CSS3 animations and Canvas animations perform better than JS animations.

Use requestAnimationFrame instead of setTimeout and setIntervval, because requestAnimationFrame can render at the correct time, setTimeout and setInterval cannot guarantee the rendering time, Do not bind events to timers.

Using logical caching

6. Reduce page backflow and redraw

css

Avoid too much style nesting, preferably fast element positioning.

Avoid using CSS expressions. CSS expressions are executed during CSS drawing, which increases the number of rearrangements and reflows.

You can use absolute positioning to take animation elements out of the document flow.

js

In order to reduce the number of backflow and avoid frequent DOM operations, the DOM can be unified modified multiple times and processed in batches at a time.

Control the drawing process and the drawing area. Property Settings that are expensive during the drawing process should be avoided.

7. Simplify DOM operations

DOM operations are best handled uniformly before being inserted into the DOM Tree.

Static file compression tool

You can use compression tools to compress HTML, CSS, JS files.

9. Browser rendering process

First, the browser will do a series of parses to generate DOM Tree and Css Tree, and finally merge into Render Tree.

Backflow is performed according to the generated rendering tree to calculate the geometric information of each node and report the error position, size, style, etc. Then, pairs of pixels on each node are obtained according to the geometric information obtained from the rendering tree and backflow.

Finally, the page is displayed.

Lazy loading, preloading, prerendering

Lazy loading refers to the lazy loading of specific elements in a long page to reduce the loading of invalid resources on the current screen.

Preloading is getting the browser to preload certain resources.

Prerendering is the advance rendering of resources.

11. Optimization of interface service invocation

Interface merging means that multiple service interfaces and dependent third-party interfaces on a page are invoked on the same interface deployed in a cluster to reduce the number of interface requests on the page.

Interfaces placed in the CDN can be synchronized to the CDN based on performance considerations. Changes in interface content are automatically synchronized to the CDN.