当前位置:网站首页>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:00 【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]所创,转载请带上原文链接,感谢
边栏推荐
- electron 實現檔案下載管理器
- Using NLP and ml to extract and construct web data
- What are manufacturing and new automation technologies?
- Multi robot market share solution
- [efficiency optimization] Nani? Memory overflow again?! It's time to sum up the wave!!
- Swagger 3.0 brushes the screen every day. Does it really smell good?
- 【應用程式見解 Application Insights】Application Insights 使用 Application Maps 構建請求鏈路檢視
- Use modelarts quickly, zero base white can also play AI!
- Introduction to Google software testing
- nacos、ribbon和feign的簡明教程
猜你喜欢
Unity性能优化整理
意外的元素..所需元素..
How to turn data into assets? Attracting data scientists
IPFs rudder filecoin landing at the same time, fil currency price broke a thousand
【转发】查看lua中userdata的方法
Tron smart wallet PHP development kit [zero TRX collection]
It is really necessary to build a distributed ID generation service
JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m
常用SQL语句总结
消息队列(MessageQueue)-分析
随机推荐
Even liver three all night, jvm77 high frequency interview questions detailed analysis, this?
一路踩坑,被迫聊聊 C# 代码调试技巧和远程调试
解决 WPF 绑定集合后数据变动界面却不更新的问题
FastThreadLocal 是什么鬼?吊打 ThreadLocal 的存在!!
游戏主题音乐对游戏的作用
How about small and medium-sized enterprises choose shared office?
electron 實現檔案下載管理器
C#和C/C++混合编程系列5-内存管理之GC协同
大会倒计时|2020 PostgreSQL亚洲大会-中文分论坛议程安排
Introduction to the structure of PDF417 bar code system
EOS founder BM: what's the difference between UE, UBI and URI?
快速排序为什么这么快?
Get twice the result with half the effort: automation without cabinet
Use modelarts quickly, zero base white can also play AI!
Share with Lianyun: is IPFs / filecoin worth investing in?
Lane change detection
【字节跳动 秋招岗位开放啦】Ohayoo!放学别走,我想约你做游戏!!!
The dynamic thread pool in Kitty supports Nacos and Apollo multi configuration centers
StickEngine-架构11-消息队列(MessageQueue)
Helping financial technology innovation and development, atfx is at the forefront of the industry