Browser performance optimization (19)

There are three main points ：

① Reduce to HTTP The number and size of requests for

② Code optimization

③dns And HTTP communication mode

Illustrate with examples ：

1.js Reduce the use of closures in （ reason ： Closures generate stack memory that is not put in ）
a: When the loop binds the element to an event , Try to put the information you need later （ Columns such as index ）
Stored in the element's custom attributes , Instead of creating a closure store
b. You can form a closure on the outermost layer , Store some public information needed later , Instead of every hair creating a closure （ For example, singleton mode ）
c. Manually release the memory not used by the station as much as possible

2. Try to reduce css and js file （ Introduce what needs to be introduced css Merge into one ,js It is also merged into one ）, The principle is to reduce http Number of requests , Try to compress the combined code as much as possible ,
Reduce http The size of the requested resource
a:webpack This build tool
b： In mobile development （ Or high performance pc Development ）, If js and css Not many , We can write inline
3. Try to use vector diagram or svg Icons instead of traditional png Wait for the format of the picture
4. Reduce to DOM The operation of （ Mainly to reduce DOM Redraw and reflow （ rearrangement ））
a: Separate reading and writing about rearrangement
b: Use document fragments or payment channel splicing to make payment channel binding
5. stay js Avoid “ Nested loop ”（ This will add many cycles to the Zheng family ） and “ Dead cycle ”
6. Lazy loading with pictures （ Delay loading ）, The purpose is to reduce the number of pages loaded for the first time http Number of requests
7. Using browser and server caching technology （304 cache ）, Cache some static resources that are not updated frequently （css、js、 Static pictures can be cached ） The principle is also to reduce http Request size
8. Use event delegates... Whenever possible （ Event agent ） To handle event binding operations , Reduce DOM Frequent operation of , This includes each DOM Element for event binding
9. Reduce use css expression （expression）
10. Minimize the use of label selectors （css The selector is parsed from right to left ）
11.css Sprite chart technology （css sprite/css Image wizard ） Put all the smaller pictures together on a big picture , Display the corresponding small icon by positioning
12. Reduce cookie Use （ Mainly to reduce local cookie Storage content size ）
13. Data acquisition in the page adopts asynchronous programming and delayed batch loading
14. Video and audio tags appear in the page , We don't want to load these resources when the page loads （ Otherwise the load will slow down ）（ Just set up preload="none" that will do ） Wait for the page to load , When the audio is playing, we load the resources
15. When the client and server interact , As far as possible, we are based on json Format to transmit （json The format of data processing is convenient , Small resources ）   be relative to xml Format transmission will have this advantage
16. As far as possible js Encapsulation （ Low coupling and high cohesion ）, See the redundancy code in the page （ Reduce HTTP The size of the requested resource ）
17. stay css Minimize the use of @import Import type , because @import It's a synchronous operation , and link Is asynchronous operation
18. Use window.requestAnimationFrame(js Frame animation in ) Instead of the traditional timer animation
19. Reduce the use of recursion , Avoid dead recursion , Avoid stack memory nesting due to recursive functions （ Tail recursion is recommended ）