Page performance: how to optimize pages systematically?

Usually a page has three stages ： Loading phase 、 Interaction phase and shutdown phase .

Loading phase

The core factors that affect the first rendering of a page ：

1. Number of key resources The more critical resources , The longer the first page will load . For example, the number of key resources in the figure above is 3 individual ,1 individual HTML file 、1 individual JavaScript and 1 individual CSS file .
2. Key resource size Usually , The smaller the content of all the key resources , The shorter the download time of its entire resource , The less time it takes to block rendering .
3. How many are required to request critical resources RTT（Round Trip Time）RTT That's the round trip delay here . It is an important performance index in the network , Indicates that data is sent from the sender , Receive confirmation from the receiving end to the sender , Total time delay experienced .

The general optimization principle is Reduce the number of critical resources , Reduce the size of critical resources , Reduce critical resources RTT frequency .

Interaction phase

1. Reduce JavaScript Script execution time
2. Avoid forcing layout synchronization
   Synchronize layout ：JavaScript Forces calculation styles and layout operations to be advanced to the current task .
3. Avoid layout jitters
   Layout jitter ： Over a period of JavaScript In the code , Repeat the layout operation .
4. Reasonable use CSS Composite animation
   Synthetic animation is directly in Composite thread Performed on , This and the layout that is executed on the main thread 、 Drawing and other operations are different , If the main thread is JavaScript Or some layout tasks occupy ,CSS The animation can still be executed . So make the best use of CSS Composite animation , If we can let CSS Working with animation , Just give it to CSS To operate .
5. Avoid frequent garbage collection when garbage collection operations occur , Will occupy the main thread , Thus affecting the execution of other tasks , In serious cases, it will also cause users to lose frames 、 The feeling of not flowing .

summary

In the loading phase , The core optimization principle is ： The key to optimizing the loading speed of resources , Reduce the number of key resources , Reduce critical resources RTT frequency .
In the interaction phase , The core optimization principle is ： Minimize the generation time of one frame . You can reduce words JavaScript Execution time of 、 Avoid forcing layout synchronization 、 Avoid layout jitters 、 Use as far as possible CSS Composite animation 、 Avoid frequent garbage collection to reduce the generation time of a frame .