With the growth of development experience and more and more projects, more and more attention is paid to front-end performance optimization when dealing with front-end projects.Copy the code

preface

I recently received an optimization problem when writing a financial app: the first screen load was a bit slow. This app is developed by embedding h5 into a native shell, so the effect is certainly not as good as the native experience. However, first-screen optimization is indeed a task that the H5 project must deal with, so I have summarized the front-screen optimization.

Indicators to measure the performance of the first screen

  1. FPS: frame per second (FPS), which best reflects page performance. Generally, the system sets the screen refresh rate to 60fps. Anything less than 24 will cause significant congestion
  2. DOMContentLoaded: DOMContentLoaded event will be triggered when DOM is loaded and parsed. If the output content of the source code is too much, the time for the client to parse DOM will also become longer. For example, adding 2000 nested layers may increase the time by 50-200ms.
  3. Fluency: The higher the FPS, the smoother the visual presentation. Add some visual buffer while you wait.
  4. First screen loading time: Yeswindow.performance.timingTo figure it out.

DNS resolution time: domainLookupEnd - domainLookupStart 2. TCP connection time: connectEnd - connectStart 3. SSL security connection time: domainLookupEnd - domainLookupStart connectEnd - secureConnectionStart 4. TTFB: responseStart - requestStart 5. DOM parsing: domInteractive - responseEnd 7. Resource loading time: loadEventStart - domContentLoadedEventEnd 8. ResponseStart - domainLookupStart 9. First render time/white screen time: responseEnd - fetchStart First interactive time: domInteractive - fetchStart 11. DOM Ready time: domContentLoadEventEnd - fetchStart 12. Page full load time: loadEventStart - fetchStartCopy the code

Optimization thinking Angle

1. The first screen must be fast 2. The scrolling must be smooth 3. Don't execute what you can't execute. 5. Show it gradually and show it tactfullyCopy the code

Why does the first screen load slowly?

Let me list the points that affect loading at present: 1. Static resources are not loaded and too many resources are loaded. Too many interfaces are called and the interface takes too long. 3. Load front-end components as required based on the backendCopy the code

How to optimize

The following methods can be used to optimize the first screen

Lazy loading

Load the main modules first, so that users can see the most important information first.Copy the code

Lazy to perform

Some modules that need to be triggered by clicking or hover are loaded when triggered.Copy the code

Picture size control and lazy loading

Try to use webP format photos, because the same visual effect, the volume of the other 1/3 of the size. Use Sprite image to process all small ICONS on the first screen, CDN cache, etc.Copy the code

webpack

To be continued...Copy the code

Tools to aid optimization

The debugging tool in Chrome tests page performance, and you can read the documentation for details.