Summary of front-end performance optimization that every front-end engineer should understand:

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

1. css Merge into one ,js It's better to merge
2. Home page through some tools （ for example ： webpack） Put the merged css perhaps js Compressed into x xx.min.js Reduce file size
3. The server opens the resource file GZIP Compress
4. 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 ：

1. json Format data , Can clearly show the data structure , And it's easy for us to access and manipulate
2. As opposed to a long time ago xml Format transfer ,json The format of the data is more lightweight
3. 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 ）

1. 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 ）

1. 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 ）

1. 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
2. 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 ）

1. Avoid using css expression
2. Reduce redundant code in pages , As much as possible to improve the reuse rate of the method ：“ Low coupling and high cohesion ”
3. 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 )
4. js Avoid using eval

• High performance consumption
• After the code is compressed , It's easy to run wrong code

1. 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

1. 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

1. 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 .
2. To write js Code time , Use design patterns as much as possible to build systems , Convenient for later maintenance , It also improves scalability
3. css Reduce the use of filters in , Reduce teammates on the page flash Use
   

About the page SEO Optimization techniques

1. 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 ）.
2. Avoid throwing exception errors in browsers

• Try to avoid code errors
• Use try catch Do exception information capture

1. 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 .