Front end Performance Optimization Recommendations

Foreword:

1 When it comes to performance optimization, everyone thinks of Yahoo's military regulations, 2-5-8 principles, 3-second first screen guidelines, etc. Although these rules are not mandatory in development, in order to pursue the perfect experience of page performance, we have to modify and optimize the code.

Let's share with you 1 some performance optimization indicators I know under 1:

1. Load optimization

1. Reduce HTTP requests: Minimize the number of requests sent to the server and save network resources. All static resources should be placed on the server side and cached, and long caches should be used as much as possible.

2. Compress code: Reducing the size of resources can speed up the display of web pages, compress the code, and open Gzip on the server

3. Non-blocking: Styles and scripts inline in the header block the rendering of the page. Styles are introduced in the header using link, and scripts are placed in the tail and loaded asynchronously.

4. First screen loading: The first screen fast display can greatly improve users' perception of page speed, and should be optimized for the first screen fast display as much as possible.

5. Load on demand: The resources that do not affect the first screen and the resources that are not used on the current screen are loaded when the user needs them, which can greatly improve the display speed and reduce the overall traffic. However, loading on demand will lead to a large number of redrawings, which will affect rendering performance.

6. Pre-load: Loading can be used for large resource pages, and the page will be displayed after the resource is loaded, but the loading time is too long, which will cause negative experience.

7. Compress the image: Choose the most suitable format and size when using the image, then use the tool to compress, and load the image lazily in the code.

8. Reduce Cookie: Cookie will affect the loading speed, so minimize unnecessary Cookie.

9. Asynchronous loading of third-party resources: The third-party resources are uncontrollable and will affect page loading, so the third-party resources should be loaded asynchronously.

2. Execute optimizations

1. css is written at the head and js is written at the tail and asynchronous.

2. Avoid the src attribute of img, iframe and other tags being empty: Empty src will reload the current page, which will affect the speed and efficiency.

3. Try to avoid resetting the image size: Resetting the image size many times will cause multiple redrawings of the image, which will affect the performance.

4. Try to avoid using DataURL for images: DataURL images do not use image compression algorithm, and the files will become larger, and they will be rendered after decoding, which is slow and time-consuming to load.

3. Render optimization

1. Setting Viewport: viewport for HTML speeds up page rendering.

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

3. Try to use css3 animation and use requestAnimationFrame animation instead of setTimeout reasonably.

4. Optimize high-frequency events: scroll, touchmove and other events are limited by function anti-shake throttling as much as possible.

4. Style optimization

1. Avoid writing style in HTMl.

2. Avoid css expressions: Execution of the css expression requires rendering out of the css tree.

3. Remove the css null rule: The css null rule increases the size of the css file.

4. Proper use of display: display affects page rendering.

5. Do not abuse float: float has a large amount of calculation during rendering, so it should be used as little as possible.

6. Don't abuse WEB fonts: WEB fonts need to be downloaded, parsed and redrawn to minimize their use.

5. Script optimization

1. Minimize backflow and redrawing.

2. Caching DOM selection and calculation: Each DOM selection must be calculated and cached.

3. Cache the value of. length: Each. length calculation uses one variable to hold the value.

4. Try to use event brokers: Avoid bulk binding of events.

5. Use the id selector whenever possible: The id selector selects elements the fastest.

Principle 2-5-8

In front-end development, this rule is used as a development guidance, aiming at the performance optimization of browser pages.

o users get a response within 2 seconds, and will feel that the page responds quickly Fast

o users get a response in 2 ~ 5 seconds, and they will feel that the response speed of the page is still the same as Medium

o users get a response within 5-8 seconds and feel that the page is slow to respond, but they can still accept Slow

o users still can't get a response after 8 seconds, and they will feel that the response speed of the page is rubbish dead ("There are four possibilities at this time")

Is the network speed not good, initiate the second request = > Refresh page

What junk page, why don't you open it yet = > Leave the page and may switch to a competitor's website

Garbage Cheng Xuyuan, what pages are you doing = > Curse the program ape who developed this page

The network is disconnected = > The network cable is broken? Wi-Fi disconnected? Bad signal? Is the cost out?

Ok is finished, this is the little experience summarized by this Xiaobai ~

The above is the front-end performance optimization recommendations in detail, more information about the front-end performance optimization please pay attention to other related articles on this site!