The direction of front-end performance optimization

At present, it is roughly organized into three major directions: writing optimization at the bottom code level, optimization of middle-level project structure, and optimization of upper-level project deployment

1. Code compression

In the front-end production environment, files such as js, css, and pictures are compressed, and the transmission time is reduced by reducing the amount of data transmission, saving server network bandwidth, and improving front-end performance. (webpack, node)

2. Code optimization

Including but not limited to: reducing the number of requests, reducing the size of resources, optimizing network connections, optimizing resource loading, reducing redrawing reflows, using APIs with better performance, and building optimization; such as
:

1. Use images in PNG format as much as possible. It is relatively small in size and can be compressed with tools. It is best to optimize before going online.

2. At the same time, lazy loading of images is performed in the code, also called lazy loading.

3. Avoid empty src attributes of tags such as img and iframe: empty src will reload the current page, affecting speed and efficiency.

4. Try to avoid using DataURL for images: DataURL images do not use image compression algorithms, the files will become larger, and they must be decoded before rendering, slow loading and time-consuming.

5. The styles and scripts inline in the header will block the rendering of the page. Generally, we will put the css style sheet file in the head of the file and use the link to import it, so that the CSS style sheet can be downloaded as soon as possible.

6. Corresponding to the js script file, generally we put the script at the end and load it asynchronously, so as to minimize the blocking of styles and scripts on the page.

7. For complex animation effects, use absolute positioning to keep it out of the document flow, avoid looping DOM elements, and use transform:translate instead of position left, right... to minimize reflow and redrawing.

8. Move the script back to reduce the impact on concurrent downloads.

9. Cache the value of .length: Each .length calculation uses a variable to hold the value.

10. Try to use event delegation: do not set event listeners for each child node separately, but set it on its parent node, and then use the bubbling principle to set each child node to avoid batch binding events to reduce memory consumption and DOM operations.

11. Try to use the id selector: the id selector is the fastest to select elements, and has the advantages of uniqueness, flexibility and priority.

12. Set Viewport: The viewport of HTML can speed up the rendering of the page.

13. Reduce DOM nodes: Too many DOM nodes will affect the rendering of the page.

14. Try to use css3 animation: Reasonably use requestAnimationFrame animation instead of setTimeout.

15. Optimize high-frequency events: events such as scroll and touchmove should be limited by functions such as anti-shake and throttling as much as possible.

16. Do not abuse WEB fonts: WEB fonts need to be downloaded, parsed, and redrawn on the current page, and the use should be minimized.

17. File naming rules must be unified and meaningful, and files of the same type are classified into the same folder.

For details, please refer to ( this article )

3. Server Rendering

Client-side rendering: get the HTML file, download the JavaScript file as needed, run the file, generate DOM, and then render.

Server-side rendering: the server returns an HTML file, and the client only needs to parse the HTML.

Advantages: fast rendering of the first screen, good SEO.
Disadvantages: The configuration is troublesome and increases the computing pressure on the server.

4. SEO optimization

1. Title: The number of words in the title should not be too long. Generally, the core keywords and content related to the theme of the website should be written.

2. Description: The description is a comprehensive description of the entire page. Its function and importance are second only to the title. The description should be more attractive. It should include your company's brand name and phone number, and include target keywords.

3. Keywords: Optimizing keywords can allow users to accurately locate the content and website they want to search for when searching for keywords, and allow the website to be seen by more people in need.

4. Website code: The website code should be as streamlined as possible to save time for Baidu spiders, which is especially important for large websites.

5. Use CDN for static resources

A content delivery network (CDN) is a group of web servers distributed across multiple geographical locations. We all know that the farther the server is from the user, the higher the latency. CDN is to solve this problem by deploying servers in multiple locations so that users are closer to the server, thus shortening the request time.
CDN principle
When a user visits a website, if there is no CDN, the process is as follows:

The browser needs to resolve the domain name to an IP address, so it needs to send a request to the local DNS.
The local DNS sends requests to the root server, top-level domain name server, and authority server in turn to obtain the IP address of the website server.
The local DNS sends the IP address back to the browser, and the browser makes a request to the web server IP address and gets the resource.