What do we talk about when we talk about front-end performance optimization

When suddenly asked the question of performance , Most people are suddenly stunned . I always feel that there is a lot to say , But I feel disorganized. I don't know where to start .

1. Reduce HTTP request
2. Use HTTP2
3. Use the server to render
4. Static resource usage CDN
5. take CSS Put it in the head of the file ,JavaScript The file is at the bottom
6. Use font icons iconfont Instead of picture icons
7. Make good use of cache , Do not repeatedly load the same resource
8. Compressed files
9. Picture optimization
10. adopt webpack Load code on demand , Extract the third library code , Reduce ES6 To ES5 Redundant code for
11. Reduce redraw and rearrangement
12. Use event delegation
13. Pay attention to the locality of the program
14. if-else contrast switch
15. Lookup table
16. Avoid page jams
17. Use requestAnimationFrame To achieve visual change
18. Use Web Workers
19. Use bit operations
20. Don't override native methods
21. Reduce CSS The complexity of selectors
22. Use flexbox Rather than an earlier layout model
23. Use transform and opacity Property changes to achieve animation
24. Fair use rules , Avoid over optimization

Even if you recite all the above and say dozens at a time , The interviewer may not be very satisfied . One of the reasons is that there are too many items without primary and secondary, which is easy to be annoying , The interviewer can't remember what you said . Second, the answer in this way obviously gives people a feeling of rote .（ The interviewer really doesn't smoke ）

So what are we talking about

There are two ways to answer performance questions . Follow these two ideas , It doesn't need too much memory to be natural and “ Very insightful ” More than ten or even dozens of optimization solutions , Of course, the premise is that you have really used these optimization schemes .

Train of thought 、 Start from the front-end performance scenarios you are exposed to everyday

Performance bottlenecks mainly occur in three scenarios

1. During development, it takes several minutes for each modification of the code package , Too slow （ Development build phase ）
2. Open the web site , It took dozens of seconds to see the page , Too slow （ Resource loading and Page rendering Stage ）
3. After the page is displayed , The animation on the page is not smooth . Scrolling the page or dragging and dropping elements is a serious problem , Even the page will crash （ Operation experience Stage ）

One 、 Development build phase （ common problem ： How to make Webpack Pack faster ）

• Concurrent ： Use multiprocess packaging
• cache ： Use cache when packaging
• The amount of packing should be small ： Narrow file search , Reduce unnecessary compilation

Two 、 Resource loading phase

The core idea is ： The transmission volume should be small 、 Be close 、 Parallel transmission 、 Resource reuse 、 Preload .

The transmission volume should be small

• Build time HTML Compress
• Build time CSS Compress merge
• Build time JavaScript Compress merge
• Compression of pictures during construction
• Use SVG sprite Or font icons instead of pictures ICON
• The server is turned on Gzip, The data is compressed again before transmission
• When building, use TreeShaking, Reduce unnecessary code Introduction
• Single page application routing lazy load , Reduce the volume of resources loaded for the first time
• Component lazy load , Reduce the volume of resources loaded for the first time
• Picture lazy loading , Reduce the volume of resources loaded for the first time

Be close

• Static resources are deployed to CDN

Parallel transmission

• Upgrade to HTTP2.0 （ common problem ：HTTP2.0 comparison HTTP1.x What upgrades have been made ？ Multiplexing ; Binary framing ; Server push ; Data flow priority ; The head of compression ）

Resource reuse

• The server configures the static resource cache （ common problem ：HTTP Cache policy ？Cache-Control？keep-alive？304？ETag？）
• Packet time division multiplexing

Preload

• The browser stealthily preloads in idle time , <link rel="prefetch" href="url">

3、 ... and 、 Page rendering phase

• CSS On top 、JS Under
• load CSS Recommend to use link To use less @import
• Unimportant external introduction JS Use defer perhaps async Properties loaded asynchronously

Four 、 Operation experience stage

• Smooth animation
  
  • Use as much as possible transition and animation To achieve CSS Animation , instead of JS Realization of animation （ Running in the main thread has an impact on the fluency of the animation ）
  • Use animation as much as possible transfrom and opacity （ No redrawing and reflow , Best performance ）
  • ​ translateZ/translate3d Turn on hardware acceleration
  • ​ JS Animation uses requestAnimationFrame To use less setInterval
• rolling / Move / Smooth operation
  
  • DOM Add and delete operations should be less ( Virtual long list 、DOM Diff)
  • High frequency operation uses anti shake and throttling
• Intensive Computing
  Computing intensive operations can be left to WebWorker Concurrent processing

Train of thought two 、 Talk about front-end performance from a life perspective

Suppose you are from the company CTO, Now there is a product that needs to be launched in the shortest possible time , No overtime in the existing team 996 On the premise of ？ The plan is nothing more than ：

1. Compress demand , Iterative development —— Compress
2. Use more old wheels ( Code 、 programme 、 framework ) Make fewer new wheels —— cache
3. More people —— Concurrent

And front-end performance optimization

• Compress demand , Iterative development ： Compression and merging of static resources 、Gzip、 Various lazy loads 、 Reduce the file search scope when developing packaging
• Use more old wheels ( Code 、 programme 、 framework ) Make fewer new wheels ： Resource request HTTP cache 、 Configure and use cache when developing packaging 、 Configure subcontracting reuse when packaging
• More people ： Use... When requesting resources HTTP2 Implement concurrent requests 、 Configure and use concurrency when developing packaging 、WebWorker

Start with the above two ideas , For experienced you, it's natural to think of spring , Easily excite yourself and the interviewer , It can even influence the follow-up questions to a certain extent .

When it comes to performance , The brain needs to emerge 6 Proverbs ： Compress 、 cache 、 Concurrent . Leave the rest to the cerebellum to play freely .

This paper is about fjl The original article of , The copyright belongs to me and hungry Valley , Reprint must indicate the source