What is WEB front end of it? It is the user's computer browser everything we do. Let's look at user visits a site, the browser have done what things:
Enter the URL -> resolve domain names -> Request Page -> parse the page and send a resource request page -> Render Resources -> Output page -> monitor user actions -> re-rendering.
As can be seen from the above path into the browser request, transmission, rendering three parts to achieve user access, from the three portions of paper how to improve analysis WEB front-end performance.
A request
In order to reduce the browser request transmission, to achieve their own caching mechanism. The browser cache is a Web resource has requested a copy of a copy is stored in the browser, when once again requests the same URL, go to view the cache, if the local cache, browser cache mechanism based authentication mechanism (Etag ) and expiration mechanism (Last-Modified) judgment is to use the cache, or transfer files from the server resources. Specific processes as shown below:
The browser's request is complicated by some, some obstruction, such as: images, CSS, request interface is concurrent; JS file is blocked. JS when requested, the browser will interrupt the rendering process, waiting to load the JS file parsing is complete, and then re-render. So should JS file on the final page.
JS may be changed in two ways from the blocking in parallel: one is by creating a script tag, into the DOM; the other is to increase the async attribute Script tags.
Each browser has a limit on the number of concurrent same domain name, IE6 / 7 is 2, IE9 is 10, the other common browser is 6, so reducing the number of resource requests and resource use multi-domain configuration file, can greatly improve site performance.
The method of reducing the number of resource request, generally have the following:
1, by packaging tools, merge resources and reduce the number of resources. It is the development version is a lot of resource files, deployment time, by class merge several files to output. While realizing module management, unified output.
2, CSS, use the css sprite images to reduce the number of requests.
3, by delaying the loading technique, in a case where a user resource request without perception.
4, the server configuration, to achieve a request to return a plurality of resource files, such as Taobao CDN.
In addition to reducing the number of requests, CDN mirror may be used to reduce network node, fast response. Use the CDN's request, based on a user's location, find the nearest CDN node, if the request is new, from the resource server node to copy, and then returned to the client. If the request exists, the process directly returns from the client node.
Through the above we know caching mechanism, if we deploy time on-line, is the need to refresh the cache. Ordinary cache by strong brush can change overnight, and CDN cache will need to be achieved by changing the URL. We can not require users to refresh by pressing Ctrl, so by packaging tool, when deployed, change the URL unity is the most effective way. Often without changing the file library, such as echart, jquery, not the proposed changes.
Second, transmission
Transmission from the server to the client, you can turn on gzip compression to improve transmission efficiency.
Gzip has ten levels from 1-10. The smaller the higher the compression, but the more compression used by the server hardware resources. According to practice, grade 5, when the most balanced, this time compression can be compressed into a 100k 20k.
Third, rendering
After loading the browser html, it will resolve one side, while resource request based on the results of parsing out and generate DOM tree. The loaded, CSS, were good rendering engine based on the generated DOM tree, to generate the render tree. After all other resources are parsed completely calculate the layout, rendering to the browser interface. As the user operation, JS modify DOM node or style, redrawn and rearranged. Draw redraw DOM node refers to a node corresponding to render, rearrangement refers to recalculate the location of the nodes in the browser interface. It is clear that the rearrangement is very time consuming performance. We have to do is reduce the number of rearrangements.
Generated DOM tree, we can optimize performance by reducing the DOM node. Initially with the layout table, the depth and the node number of rather complex, poor performance. The same CSS as Cascading Style Sheets, level can not be too deep, otherwise costly traversal. In addition the expression CSS property rather consume performance, it can not do. CSS animation effects can write do not write JS, rendering engine is not the same, the performance loss is not the same.
It says that parsing rendering process, we then went on to talk about the process of user interaction. User actions will lead to redraw and rearrangement, the rearrangement will cause redraw and redraw will not necessarily lead to rearrangement. In the end what will cause the rearrangement it? Simple definition, the DOM structure changes, and changes in the geometric properties of DOM style, will lead to rearrangement. Geometric attributes name suggests, is wide, commonly known as high-box model properties, borders, outside the patch, the patch and the like. As well as offset the margin properties and the like.
Rearrangement is the most energy-intensive, reducing the rearrangement methods are:
1. If you need to repeatedly change the DOM, the first change in memory, the last one-time inserted into the DOM.
2, a supra, if multiple changes in style, a synthesized, and then inserted into the DOM.
3, due to the fixed position and when the absoute values, as a departure from the document stream, such DOM node operation, will not cause the entire page rearrangement. So animated elements set position away from the document flow.
4, when the display is equal to none DOM node it is not present in the render tree, so if a relatively complex operation, so as to display equal to none, all waiting for the operation is complete, then the display is set to Block, so just rearranged twice.
5, when the acquisition will lead to property values rearranged, stored in the variable, it will not be used again rearranged again. Obtain these properties will lead to rearrangements: offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight
These are the browser how to put resources into the naked eye of the page, in addition to the above and summed up based on browser performance optimization process, we also need to look at a javascript program that requires optimization. Let's look at the javascript garbage collection.
Javascript engine will be at a fixed time interval, local variables will not be used to write off the release of its share of memory. And there is a closure, there has been a reference will not be freed. The life cycle of global variables until uninstall the browser page will end. So generally speaking, memory overflow is due to the release of global variables and closures cause. In order to prevent memory overflow, the way we can do are:
1, business code in an anonymous function is executed immediately inside, finished immediately released.
2, less global variables, while variables spent manually written off.
3, instead of using a callback to access the internal closure properties
4, when the inevitable use of closures, carefully treated details. When not written off.
5, through the browser comes with a tool profiles, to check for memory activity. If a wave-described normal. If it is tilted gradual rise, indicating a memory is not released, it is necessary to check the appropriate function.
One final point, the return value of the function in asynchronous taken, it was so often:
Var getList = function(){ $.ajax().then(function(data){
Return data;
}) };
Var users = getList();
There is no doubt, is due to return in the asynchronous function, so the return can only be undefined, rather than the data you want. So in order to achieve returns Data, put the async attribute set ajax become false, by the synchronous to asynchronous to the acquired data. But the biggest question is, synchronization will interrupt the rendering process, which is waiting for a request to return, the entire page is stuck, the user will not be operational response. This problem real solution is to promise to return the object, rather than into asynchronous synchronization.
Author: Mazong Ze