First, reduce the number of HTTP requests and the size of transmitted packets

1, CSS SPRITE (SPRITE, image SPRITE) technology

2. Use vector graphics such as ICON FONT or SVG

1. Reduce the number of HTTP requests or the size of the requested content 2. Render faster: because they are based on code rendering, while for bitmaps (PNG/JPG/GIF) it is necessary to encode the image before rendering 3. 4. Webp format images can also be used, which is smaller (but requires the server to support the request processing of this format)Copy the code

3. Image lazy loading (lazy loading) technology

1. In the first load time do not give real address, picture, improve the speed of the first rendering page 2. When the page is loaded, the images in the user's field of view are actually loaded, and the images that do not appear are not loaded first (saving traffic and reducing the request pressure on the server) 3. We also try to load data in batches (don't request too much data at once, such as paging techniques)Copy the code

4. Unpreload audio/video files (preload=’ None ‘) to increase the speed of rendering pages for the first time

5. Data transfer between client and server should be done in JSON format, as XML format is larger than JSON format (it can also be done in binary encoding or file stream format, which is much better than file transfer)

6, the page CSS/JS/ images and other files to merge compression

Merge: strive for CSS and JS only import one (Webpack can achieve automatic merge compression) compression: based on Webpack can be compressed, for the picture to find their own tools to compress, can also use the server GZIP compressionCopy the code

7. Use photo maps

For images that are used multiple times (especially for backgrounds), we try to extract them as common as possible, rather than resetting the background each timeCopy the code

8, the picture can use BASE64 code

Advantages: BASE64 code on behalf of the picture, reduce HTTP request, increase the speed of browser rendering, so the real project, especially the mobile terminal rendering effect significantly faster disadvantages: BASE64 code will lead to too much code in the file, not conducive to maintenance and developmentCopy the code

Second, set up various caching, preprocessing and long connection mechanisms

1. Cache static resources that do not change often

It can be 304 HTTP negotiation cache or ETAG negotiation cacheCopy the code

Establish a strong Cache for cache-Control and Expires HTTP

3, DNS cache or DNS PREFETCH, reduce DNS lookup

4. Set up the local offline storage (MANIFEST) or make some infrequently changed data local storage (webstorage, IndexDB), etc

5. Establish the Connection:keep-alive TCP long Connection

6, use the HTTP2 version of the protocol (now generally used HTTP1.1)

HTTP2 can coexist with multiple TCP channelsCopy the code

7. Domain segmentation: A project is divided into different domains (different servers)

For example, a resource WEB server, data server, image server, and video server. The proper use of server resources has the following disadvantages: Excessive DNS resolution occursCopy the code

8. The King of gold

1.CDN (Geographically distributed server) 2Copy the code

Third, code performance optimization

Reduce your use of closures

1. Using too many closures creates too much memory that cannot be destroyed, and too much memory can lead to memory overflow "stack overflow" 2. Reduce nesting of closures (reduce the lookup level of the scope chain)Copy the code

2. The animation requirements of the project should be solved with CSS as far as possible

2.CSS is also much better with positioned elements, positioning out of document flow and not affecting the position of other elements. 3. RequestAnimationFrame can be used to implement a timer, because when the page is in a dormant state, the animation will be paused until the page is accessed, and the timer will be executed regardless of the state, as long as it is not manually handledCopy the code

3. Avoid iframe

Iframe will be embedded in other pages. When the parent page is rendered, the child page will be rendered at the same time and the rendering progress will be slowed downCopy the code

4. Reduce direct manipulation of the DOM (reduce redrawing and backflow)

At present, projects are basically based on MVVM (Vue) and MVC (React) for data-driven view rendering, with better performance than direct DOM manipulationCopy the code

5, low coupling and high cohesion

Encapsulate methods, plug-ins, components, frameworks and class libraries to reduce redundant code in pages and improve code utilizationCopy the code

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 timeCopy the code

7. Avoid dead or nested loops (nested loops multiply the number of loops)

8. Use asynchronous programming as far as possible in the project to simulate the effect of multi-threading and avoid main thread blocking (asynchronous operation is managed based on PROMISE design mode)

9. Do not use with in JS

Avoid USING CSS expressions

11. Use the function for anti-shake and throttling

Reduce the use of EVAL

Prevent code confusion caused by improper symbol writing during code compressionCopy the code

13. Reduce the use of filters

14. Minimize the level of CSS selectors

CSS selectors parse from right to left. Box a{} and a{}Copy the code

Reduce the TABLE layout

Manually reclaim stack memory

Null //=>obj=nullCopy the code

The last

  • If there is something wrong, please point it out