current position:Home>What do we talk about when we talk about front-end performance optimization
What do we talk about when we talk about front-end performance optimization
2021-08-26 00:24:12 【fjl】
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 .
- Reduce HTTP request
- Use HTTP2
- Use the server to render
- Static resource usage CDN
- take CSS Put it in the head of the file ,JavaScript The file is at the bottom
- Use font icons iconfont Instead of picture icons
- Make good use of cache , Do not repeatedly load the same resource
- Compressed files
- Picture optimization
- adopt webpack Load code on demand , Extract the third library code , Reduce ES6 To ES5 Redundant code for
- Reduce redraw and rearrangement
- Use event delegation
- Pay attention to the locality of the program
- if-else contrast switch
- Lookup table
- Avoid page jams
- Use requestAnimationFrame To achieve visual change
- Use Web Workers
- Use bit operations
- Don't override native methods
- Reduce CSS The complexity of selectors
- Use flexbox Rather than an earlier layout model
- Use transform and opacity Property changes to achieve animation
- 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
- During development, it takes several minutes for each modification of the code package , Too slow ( Development build phase )
- Open the web site , It took dozens of seconds to see the page , Too slow ( Resource loading and Page rendering Stage )
- 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 :
- Compress demand , Iterative development —— Compress
- Use more old wheels ( Code 、 programme 、 framework ) Make fewer new wheels —— cache
- 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
copyright notice
author[fjl],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826002408380r.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich