Preface:
When it comes to performance optimization, everyone remembered Yahoo's military regulations, the 2-5-8 principle, the 3-second first-screen standard, etc. Although these rules are not mandatory in development, in order to pursue the perfect experience of page performance, the code has to be modified and optimized.
Let’s share with you some of the performance optimization indicators I know:
one. Loading optimization
1. Reduce HTTP requests: minimize the number of requests sent to the server and save network resources. All static resources must be placed on the server side and cached, and try to use long caches.
2. Compress code: Reducing the resource size can speed up the display of web pages, compress the code, and enable Gzip on the server.
3. No blocking: The styles and scripts inlined at the head will block the rendering of the page. The styles are placed at the head and are introduced using link. The scripts are placed at the tail and loaded in an asynchronous manner.
4. Home screen loading: The fast display on the first screen can greatly improve users' perception of page speed, and corresponding optimizations should be made for the fast display on the first screen.
5. Loading on demand: Loading resources that do not affect the first screen and resources that are not used in the current screen will be loaded only when the user needs it, which can greatly improve the display speed and reduce the overall traffic. However, loading on demand will lead to a large number of redraws, affecting rendering performance.
6. Preload: Large resource pages can be loaded using Loading. The page will be displayed after the resource is loaded, but the loading time will be too long, which will cause a negative experience.
7. Compress images: When using images, select the most appropriate format and size, and then use tools to compress them, while lazy loading of images in the code.
8. Reduce Cookies: Cookies will affect loading speed, so try to minimize unnecessary cookies.
9. Asynchronously load third-party resources: third-party resources are uncontrollable and will affect page loading, so third-party resources must be loaded asynchronously.
two. Perform optimization
1. CSS is written at the head, JS is written at the tail and asynchronously.
2. Avoid the src attributes of img, iframe and other tags being empty: empty src will reload the current page, affecting speed and efficiency.
3. Try to avoid resetting the image size: Resetting the image size multiple times will cause multiple repaints of the image, affecting performance.
4. Try to avoid using DataURL for images: DataURL images do not use image compression algorithm, the file will become larger, and it will be decoded and then rendered, which will take a long time to load.
three. Rendering optimization
1. Set Viewport: HTML viewport can speed up page rendering.
2. Reduce DOM nodes: Too many DOM nodes will affect the rendering of the page.
3. Try to use css3 animations and use requestAnimationFrame animation reasonably instead of setTimeout.
4. Optimize high-frequency events: Scroll, touchmove and other events to limit them as much as possible.
Four. Style optimization
1. Avoid writing style in HTML.
2. Avoid css expressions: The execution of css expressions requires rendering of css tree.
3. Remove css empty rule: css empty rule increases the size of the css file.
4. Use display correctly: display will affect the rendering of the page.
5. Do not abuse float: float is computationally expensive when rendering, and minimize use.
6. Do not abuse WEB fonts: WEB fonts need to be downloaded, parsed, and redrawn the current page to minimize use.
five. Script optimization
1. Minimize reflow and redraw.
2. Cache DOM selection and calculation: Each DOM selection must be calculated and cached.
3. Cache .length value: Each time the .length calculation uses a variable to save the value.
4. Try to use event proxy: avoid batch binding events.
5. Try to use id selector: id selector selects elements as fast as possible.
Principle 2-5-8
In front-end development, this rule is used as a development guide to optimize the performance of browser pages.
o If the user gets a response within 2 seconds, he will feel that the page responds very quickly. Fast
o If the user gets a response in 2 to 5 seconds, he will feel that the page's response speed is OK. Medium
o If the user gets a response in 5 to 8 seconds, he will feel that the page's response speed is very slow, but he can still accept Slow
o The user still cannot get a response after 8 seconds, and he will feel that the page's response speed is dead ("There will be the following four possibilities")
§ Is the internet speed bad? Is it the second request? => Refresh the page
§ What kind of junk page is, why don’t you open it yet => Leaving the page, you may switch to a competitor’s website
§ What page do you do for a garbage programmer => cursing the programmer who developed this page
§ The network is broken => The network cable is broken? Wi-Fi is off? Bad signal? The cost of the conversation is over?
Ok, this is a little bit of experience that I have summarized~
The above is the detailed content of the front-end performance optimization suggestions. For more information about front-end performance optimization, please pay attention to my other related articles!