当前位置:网站首页>Summary of front-end performance optimization that every front-end engineer should understand:
Summary of front-end performance optimization that every front-end engineer should understand:
2020-11-06 20:42:38 【Tell me Zhan to hide】
List of articles
-
-
-
- use css Sprite (css sprite/css Image wizard ) technology
- In the project , We'd better put css perhaps js Files are merged or compressed , Especially when it comes to mobile development , If css perhaps j s Not a lot of content , We can use embedded , In order to reduce http Number of requests , Speed up page loading
- Using image lazy loading technology , When the page starts to load , Don't ask for a real picture address , Instead, it takes up space with the default graph , After loading the current page , In accordance with the relevant conditions in order to load the real image ( Reduce page first load http Number of requests )
- For data that doesn't update often , It's better to use the browser's 304 Cache left processing , It's mainly handled by the server ( Reduce http Number of requests )
- Use font icons instead of bitmaps in some pages ( picture ), This is not only convenient for adaptation , And more lightweight , And less htttp Number of requests ( It's like Sprite )
- If... Appears in the current page AUDIO perhaps VIDEO label , We'd better set their preload by none, When the page is loaded , Audio and video resources are not loaded , Load it when you play it ,( Reduce page first load HTTP Number of requests )
- When the client and server communicate with each other , We try to use json Format for data transmission
- use CDN Speed up
- Some optimization tips for writing code
- About the page SEO Optimization techniques
- summary
-
-
use css Sprite (css sprite/css Image wizard ) technology
use css Sprite (css sprite/css Image wizard ) technology , Merge some small pictures into one big one , Use the background image when positioning , Go to a specific small picture
css The code is as follows :
.pubBg{
background: url('././img/sprit.png') no-repeat;
background-size: 0 0 /* Keep the same size as the original */
}
.box {
background-position: x y; /* Positioning through the background , Positioning to a specific location , Just show different pictures */
}
html Code :
<div class="pubBg box"></div>
advantage : Reduce HTTP Or reduce the size of the request data , Because every time the page is sent http request , All need to complete the request + Respond to this complete http Business , It will take some time , It can also lead to http Blocking of link channels , In order to improve the page loading speed and running performance , We should reduce http And reduce the size of the request content ( The bigger the request is , The longer it takes ).
In the project , We'd better put css perhaps js Files are merged or compressed , Especially when it comes to mobile development , If css perhaps j s Not a lot of content , We can use embedded , In order to reduce http Number of requests , Speed up page loading
- css Merge into one ,js It's better to merge
- Home page through some tools ( for example : webpack) Put the merged css perhaps js Compressed into x xx.min.js Reduce file size
- The server opens the resource file GZIP Compress
- Through some automated tools css as well as js Merge compression of , Or finish it again less turn css,es6 turn es5 Wait for the operation , Our automated build model , Call it the front end “ engineering ” Development
Using image lazy loading technology , When the page starts to load , Don't ask for a real picture address , Instead, it takes up space with the default graph , After loading the current page , In accordance with the relevant conditions in order to load the real image ( Reduce page first load http Number of requests )
In the actual project , We didn't load any pictures at first , After the page is first loaded , First load the pictures you can see on the first screen , As the page scrolls , Then load the images that can be displayed in the following area .
According to the image lazy loading technology , It can also be extended to , Lazy loading of data
- When you start loading the page , We only request the data of the first screen or the first two screens from the server side ( Some website first screen data is back-end rendering good , Overall return to the client )
- When the page drops down , Scroll to an area , Then request the data needed in this area ,( Request back to do data binding and delayed loading of images )
- Pagination display technology also adopts the idea of data lazy loading : If the data we request is a lot of data , We'd better ask in batches , Start asking for only one page of data , When users click on other pages , Then ask for the data on that page
For data that doesn't update often , It's better to use the browser's 304 Cache left processing , It's mainly handled by the server ( Reduce http Number of requests )
example : First request css and js Come down , The browser will cache the request , If done 304 Handle , The user requests again css and js, Read directly from the cache , No longer ask the server to get ( Reduce http Number of requests )
When the user forces the page to refresh , Or currently cached css and js There has been a change , Will be retrieved from the server again
For clients , We can also be based on localStorage To do some local storage .
Use font icons instead of bitmaps in some pages ( picture ), This is not only convenient for adaptation , And more lightweight , And less htttp Number of requests ( It's like Sprite )
If... Appears in the current page AUDIO perhaps VIDEO label , We'd better set their preload by none, When the page is loaded , Audio and video resources are not loaded , Load it when you play it ,( Reduce page first load HTTP Number of requests )
preload by auto, The first time the page is loaded, the audio and video resources are loaded ;
preload by metadata: When the page is first loaded, only the header information of audio and video resources is loaded
When the client and server communicate with each other , We try to use json Format for data transmission
advantage :
- json Format data , Can clearly show the data structure , And it's easy for us to access and manipulate
- As opposed to a long time ago xml Format transfer ,json The format of the data is more lightweight
- Both client and server support json Format data processing , It's very convenient to handle
In real projects , Not all data is based on json, We do as much as we can , But for some special needs ( For example, file streaming or document transfer ), Use json It's not appropriate
use CDN Speed up
cdn: Distributed ( Geographically distributed )
Some optimization tips for writing code
Except for the reduction http The number and size of requests can optimize performance , When writing code , You can also make some optimizations , Make page performance better ( Bad coding habits , Will cause the page performance to consume too much , for example : Memory leak )
- Writing js Code time , Try to minimize DOM The operation of . stay js In the operation DOM It's a very performance consuming thing , But we can't avoid the operation DOM, We can only minimize the amount of DOM The operation of
operation DOM disadvantages :
- DOM There is a mapping mechanism (js Medium DOM Element objects and pages DOM Structure has mapping mechanism , Every change is a change ), This mapping mechanism , It's the browser that follows W3C The standard is complete to JS Language construction and DOM The construction of ( In fact, it is to build a monitoring mechanism ), operation DOM It is necessary to modify two places at the same time , Relative to some other js Programming is performance consuming .
- On the page DOM A change in structure or style , Will trigger browser reflow ( The browser will DOM The structure is recalculated , This operation consumes a lot of performance ) Redraw ( Re render the style of an element )
- When writing code , More asynchronous programming
Synchronous programming can lead to : The things on it can't be finished , I can't do the following tasks , When developing , You can set a certain area module to asynchronous programming , In this way, as long as there is no necessary order between modules , Can be loaded independently , It will not be affected by the blocking of the above modules ( Use less ).
In especial ajax Data request , We usually use asynchronous programming , It's better to be based on promise Design patterns to manage ( Often used in projects fetch、vue axios Etc , To carry out ajax Request processing , Because these plug-ins are based on promise Design patterns for ajax Carry out package processing )
- In the actual project , We try to avoid cycling too much data at once ( Because loop operations are synchronous programming ), Especially avoid while The resulting loop operation
- css Selector optimization
- Minimize the use of tag selectors
- Use... As little as possible id Selectors , Use more style class selectors ( It has strong versatility )
- Reduce the prefix before the selector ( The selector is looking right to left , Many prefixes , It takes a lot of time to query )
- Avoid using css expression
- Reduce redundant code in pages , As much as possible to improve the reuse rate of the method :“ Low coupling and high cohesion ”
- best css Put it in head in ,js Put it in body The tail , Let the page load , Load first css, Reload js( Render page first , And then provide users with operations )
- js Avoid using eval
- High performance consumption
- After the code is compressed , It's easy to run wrong code
- js Minimize the use of closures in
- Closures form a stack memory that doesn't destroy , Excessive stack memory accumulation can affect the performance of the page
- It is also easy to cause memory leakage
Closures have their own advantages : Preserve and protect , We can't avoid , We can only minimize
- Doing it dom When the event is bound , Try to avoid event binding one by one , Instead, it uses higher performance event delegation to implement
- Event delegation ( Event agent )
- Bind the event to the outer container , When the related behavior of the descendant element in it is triggered , Methods bound to the outer container are also triggered to execute ( Bubble propagation mechanism leads to ) By who the event source is , We can do different operations
- Use as much as possible css3 Animation instead of js Animation , because css3 All animations or deformations have turned on hardware acceleration , Performance ratio js Good animation .
- To write js Code time , Use design patterns as much as possible to build systems , Convenient for later maintenance , It also improves scalability
- css Reduce the use of filters in , Reduce teammates on the page flash Use
About the page SEO Optimization techniques
- Stop dead links in the page (404 page ), And for the user to enter an error page , We need to lead to 404 In the prompt page ( Server processed ).
- Avoid throwing exception errors in browsers
- Try to avoid code errors
- Use try catch Do exception information capture
- Add page keyword optimization
summary
This article mainly shared some front-end performance optimization methods , Think about it from different angles , For example, reduce http request , Some optimization tips for writing code , page seo Some optimization skills, etc .
版权声明
本文为[Tell me Zhan to hide]所创,转载请带上原文链接,感谢
边栏推荐
- C++ 数字、string和char*的转换
- C++学习——centos7上部署C++开发环境
- C++学习——一步步学会写Makefile
- C++学习——临时对象的产生与优化
- C++学习——对象的引用的用法
- C++编程经验(6):使用C++风格的类型转换
- Won the CKA + CKS certificate with the highest gold content in kubernetes in 31 days!
- C + + number, string and char * conversion
- C + + Learning -- capacity() and resize() in C + +
- C + + Learning -- about code performance optimization
猜你喜欢
-
C + + programming experience (6): using C + + style type conversion
-
Latest party and government work report ppt - Park ppt
-
在线身份证号码提取生日工具
-
Online ID number extraction birthday tool
-
️野指针?悬空指针?️ 一文带你搞懂!
-
Field pointer? Dangling pointer? This article will help you understand!
-
HCNA Routing&Switching之GVRP
-
GVRP of hcna Routing & Switching
-
Seq2Seq实现闲聊机器人
-
【闲聊机器人】seq2seq模型的原理
随机推荐
- LeetCode 91. 解码方法
- Seq2seq implements chat robot
- [chat robot] principle of seq2seq model
- Leetcode 91. Decoding method
- HCNA Routing&Switching之GVRP
- GVRP of hcna Routing & Switching
- HDU7016 Random Walk 2
- [Code+#1]Yazid 的新生舞会
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- HDU7016 Random Walk 2
- [code + 1] Yazid's freshman ball
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- Qt Creator 自动补齐变慢的解决
- HALCON 20.11:如何处理标定助手品质问题
- HALCON 20.11:标定助手使用注意事项
- Solution of QT creator's automatic replenishment slowing down
- Halcon 20.11: how to deal with the quality problem of calibration assistant
- Halcon 20.11: precautions for use of calibration assistant
- “十大科学技术问题”揭晓!|青年科学家50²论坛
- "Top ten scientific and technological issues" announced| Young scientists 50 ² forum
- 求反转链表
- Reverse linked list
- js的数据类型
- JS data type
- 记一次文件读写遇到的bug
- Remember the bug encountered in reading and writing a file
- 单例模式
- Singleton mode
- 在这个 N 多编程语言争霸的世界,C++ 究竟还有没有未来?
- In this world of N programming languages, is there a future for C + +?
- es6模板字符
- js Promise
- js 数组方法 回顾
- ES6 template characters
- js Promise
- JS array method review
- 【Golang】️走进 Go 语言️ 第一课 Hello World
- [golang] go into go language lesson 1 Hello World