How to improve the performance of web front end from three aspects of request, transmission and rendering

Alicloud Encyclopedia 2020-11-13 03:57:15
improve performance web end aspects


What is? WEB The front end ? It's all that the browser of the user's computer does . Let's take a look at the website users visit , What do browsers do :

Enter url –> Domain name resolution -> Request page -> Parse the page and send the resource request in the page -> Rendering resources -> Output page -> Monitor user operations -> To render .

Through the above path, we can see that the browser is divided into requests 、 transmission 、 Rendering three parts to achieve user access , This article from these three parts to analyze how to improve WEB Front-end performance .

 

One 、 request

In order to reduce the request transfer , Implemented its own caching mechanism . Browser caching is to put an already requested Web A copy of the resource is stored in the browser , When the same... Is requested again URL when , Check the cache first , If there is a local cache , The browser caching mechanism will be based on the authentication mechanism (Etag) And expiration mechanisms (Last-Modified) To judge is to use cache , Or transfer resource files from the server . The specific process is shown in the figure below :

 

 

Some of the browser's requests are concurrent , Some are blocked , such as : picture 、CSS、 Interface request is concurrent ;JS The files are blocked . request JS When , The browser will interrupt the rendering process , wait for JS File loading and parsing completed , Re render . So we need to JS File at the end of the page .

JS It can also be changed from blocking to parallel in two ways : One is by creating script label , Insert DOM in ; The other is in Script Add... To the label async attribute .

Each browser has a limit on the number of concurrent domains ,IE6/7 yes 2,IE9 yes 10, Other common browsers are 6, So reduce the number of resource requests and use multiple domain names to configure resource files , Can greatly improve website performance .

 

How to reduce the number of resource requests , There are roughly the following kinds :

1、 By packing tools , Merge resources , Reduce the number of resources . The development version is a lot of resource files , When deployed , Merge by class into several files to output . At the same time of module management , Achieve unified output .

2、CSS in , Use css sprite Reduce the number of image requests .

3、 By delay loading technology , Request resources... Without user awareness .

4、 Configure... Through the server , Implement a request , Return multiple resource files , Such as Taobao CDN like that .

 

In addition to reducing the number of requests , You can also use CDN Mirror image , To reduce network nodes , Fast response . Used CDN Request , According to the geographical location of users , Look for the nearest CDN node , If the request is new , Copy from resource server to node , And then back to the client . If the request already exists , Then directly from the node back to the client .

Through the caching mechanism we know above , If we deploy online , It needs to refresh the cache . The normal cache can be changed by strong brushing , and CDN The cache needs to be changed URL To achieve . At the same time, we can't ask users to press Ctrl To refresh , So through the packaging tool , At the time of deployment , Uniform change URL Is the most effective way . Library files that don't change often , such as echart、jquery, It is not recommended to change .

 

Two 、 transmission

Transfer from server to client , Can be opened gzip Compression to improve transmission efficiency .

Gzip Have from 1-10 Ten levels of . The higher the compression, the smaller , But the more server hardware resources compression uses . According to practice , Grade is 5 It's the most balanced time , Now the compression effect is 100k It can be compressed into 20k.

 

3、 ... and 、 Rendering

The browser is loading html after , It's going to parse , At the same time, resource requests are made according to the parsed results , And generate DOM Trees . And loaded CSS, Is generated by the rendering engine DOM Trees , To generate a rendering tree . Wait for all resources to be resolved and calculated layout after , Draw... To the browser interface . With user operation ,JS Will modify DOM Node or style , Redraw and rearrange . Redrawing refers to drawing DOM The render node corresponding to the node , Rearranging refers to recalculating the location of these nodes in the browser interface . Obviously , Rearrangement is very performance intensive . What we have to do is to reduce the number of rearrangements .

Generate DOM When trees , We can reduce DOM Nodes to optimize performance . At first, they all use table Layout , The depth and number of nodes are quite complex , Poor performance . Again CSS As a cascading style sheet , The hierarchy should not be too deep , Otherwise, the cost of traversal is very high . in addition CSS Of expression Properties consume performance , Don't use it if you can . Animation effects can be used CSS You don't have to write JS Write , The rendering engine is different , Performance loss is not the same .

The above is the process of parsing and rendering , Let's move on to the process of user interaction . User actions can lead to redrawing and rearrangement , Rearrangement must cause redrawing , Redrawing does not necessarily cause rearrangement . How on earth can it cause rearrangement ? A simple definition ,DOM Structural change , as well as DOM A change in geometric properties in a pattern , It will lead to a rearrangement . Geometric properties as the name implies , It's width 、 high 、 Frame 、 External patch 、 Internal patches are commonly known as box model properties . As well as offset And so on .

 

Rearrangement is the most energy consuming , There are ways to reduce rearrangement :

1、 If more than one change is needed DOM, First change it in memory , The last one-off insert into DOM in .

2、 Same as above , If you change the style many times , Synthesize one , Insert again DOM in .

3、 because position The value of is absoute and fixed When , It's out of document flow , Operate this kind of DOM node , Does not cause the entire page to rearrange . So the animation element settings position Take it out of the document stream .

4、 When DOM Node display be equal to none When , It doesn't exist in the rendering tree , So if there are more complex operations , First make it display be equal to none, Wait for all operations to complete , then display set block, That's only twice .

5、 When getting the property value that will cause the rearrangement , Storing variables , When it is used again, it will not be rearranged again . Getting these properties will result in a rearrangement :offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

 

That's how browsers turn resources into visible pages , In addition to the above performance optimization based on browser process , We need to see javascript As a procedure , Optimization needed . First look at it. javascript Garbage collection mechanism .

Javascript At regular intervals , Unregister local variables that are no longer used , Free up the memory it occupies . And the existence of closures , Will keep the quote alive , Can't be released . The life cycle of global variables does not end until the browser uninstalls the page . So in general , Memory overflow is caused by the non release and closure of global variables . To prevent memory overflow , The ways we can do this are :

1、 The business code is placed in the anonymous immediate execution function , It will be released immediately after execution .

2、 Use less global variables , At the same time, the used variables are manually logged out .

3、 Use callbacks instead of closures to access internal properties

4、 When closures are unavoidable , Treat the details carefully . Write off when not in use .

5、 Through the browser's own tools profiles, To check memory activity . If it's wavy , Explain normal . If it's a tilt up , Indicates that memory will not be released , You need to check the corresponding function .

 

Last but not least , Function to return the asynchronous value , It's often the case :

Var getList = function(){ $.ajax().then(function(data){

  Return data;

}) };

Var users = getList();

 

without doubt , Because the return within the function is asynchronous , So the return can only be undefined, Not what you want data. So in order to achieve return data, Just put ajax Of async Property set to false, From asynchronous to synchronous , To get to the data. But the biggest problem is , Synchronization interrupts the rendering process , That is, waiting for the request to return , The whole page is stuck , There will be no response to user actions . The real solution to this problem is to return promise object , Instead of changing asynchronous to synchronous .

 

Source of contribution : Alicloud developer community

 

 

版权声明
本文为[Alicloud Encyclopedia]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple