[Interview Quarter 2] Front-end performance optimization, quarter 2 front-end performance optimization

[Interview Quarter 2] Front-end performance optimization, quarter 2 front-end performance optimization

 

This is an old story. I will ask in 90% of interviews that I will simply sort it out to strengthen my memory.

 

1. Reduce Http requests: You can merge images, Css, Js, and page loading delays to reduce the number of requests;

 

2. Reduce repaint and reflow: It mainly refers to minimizing page re-rendering and re-layout. This is basically unavoidable in actual work and can be used properly;

 

3. Reduce DOM operations: It mainly refers to node operations such as adding, deleting, modifying, and querying DOM as much as possible and using local variables as much as possible, which is inevitable in some projects, therefore, we need to make appropriate responses;

 

4. Use JSON for data exchange: JSON is a lightweight data format and is also provided by JS. Therefore, JSON has many advantages;

 

5. CDN acceleration: Most companies are using CDN recently. The Chinese language is the content delivery network, and content can be allocated nearby to increase the access speed;

 

I try to use the external link style for both CSS and JS files, and place the JS files on the outermost side of the body. I usually write them on the outermost side of html, which basically means that. The main reason is that JS blocking affects loading and rendering of other content. (I usually say that JS is a single-process language. For the moment, I have not carefully studied whether single-process and blocking features are one thing ...)

 

Seven compression JS files: I usually use online compression tools. Recently, I was asked if I have used a tool that can be compiled and compressed... ... If you have any knowledge, please let us know;

 

8. Compressed Images and merged images: I usually do this when cutting images. When storing slices in PS files, the resolution is reduced. select an appropriate image format or reduce the image quality. However, since the retina screen came out, I began to struggle whether or not to do this, because EXBoss uses MacPro... How are you doing this? Is there anything other than @ 2x.png? Please advise!

 

The above summary is from workshop ~ I just simplified it and moved it to make it easier for me to remember. If there is something unclear or not detailed, please refer to the original article.