Shulou(Shulou.com)06/02 Report--

What is the WEB front end? Is everything the browser of the user's computer does. Let's take a look at what the browser does when the user visits the website: enter the URL-> resolve the domain name-> request page-> parse the page and send the resource request on the page-> render resources-> output page-> listen for user actions-> re-render.

Through the above path, we can see that the browser is divided into three parts: request, transmission and rendering to achieve user access. This paper analyzes how to improve the performance of the WEB front-end from these three parts.

Request

In order to reduce request transmission, browsers have implemented their own caching mechanism. Browser cache is to store a copy of a requested Web resource in the browser. When the same URL is requested again, check the cache first. If there is a local cache, the browser cache mechanism will determine whether to use cache or transfer resource files from the server according to verification mechanism (Etag) and expiration mechanism (Last-Modified). The specific process is shown in the following figure:

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

Some browser requests are concurrent and some are blocking, for example, requests for images, CSS, and interfaces are concurrent; JS files are blocked. When a JS is requested, the browser interrupts the rendering process and waits for the JS file to finish loading and parsing before rendering again. So put the JS file at the end of the page.

JS can also be changed from blocking to parallelism in two ways: one is by creating a script tag and inserting it into the DOM; the other is by adding an async attribute to the Script tag.

Each browser has a limit on the number of concurrency of the same domain name, IE6/7 is 2, IE9 is 10, and other common browsers are 6, so reducing the number of resource requests and using multiple domain names to configure resource files can greatly improve the performance of the website.

There are roughly several ways to reduce the number of resource requests:

1. Through packaging tools, merge resources and reduce the number of resources. That is, the development version is a lot of resource files, and when deployed, they are merged into several files by class to output. In the realization of module management at the same time, achieve unified output.

2. In CSS, use css sprite to reduce the number of image requests.

3. Request resources without the user's awareness through delayed loading technology.

4. Through server configuration, one request is realized and multiple resource files are returned, such as Taobao CDN.

In addition to reducing the number of requests, CDN mirroring can also be used to reduce network nodes and achieve fast response. Using the CDN request, the nearest CDN node is found based on the user's geographic location, and if the request is new, it is copied from the resource server to the node and then returned to the client. If the request already exists, it is returned directly from the node to the client.

Through the caching mechanism we learned above, if we deploy online, we need to refresh the cache. The normal cache can be changed by a strong brush, while the CDN cache needs to be changed by changing the URL. At the same time, it is impossible to require users to refresh by Ctrl, so through the packaging tool, uniformly changing the URL is the most effective way to deploy. Library files that do not change frequently, such as echart and jquery, are not recommended.

Transmission

When transferring from the server to the client, gzip compression can be turned on to improve the transmission efficiency.

Gzip has ten grades from 1 to 10. The higher the compression, the smaller the compression, but the more server hardware resources are used for compression. According to practice, the level of 5 is the most balanced, when the compression effect is 100k can be compressed to 20k.

Https://www.51cto.com/it/news/2019/1217/17548.html

Render

After loading the html, the browser will parse, make resource requests based on the parsed results, and generate a DOM tree. After loading the CSS, the rendering engine generates the rendering tree according to the generated DOM tree. After all the resources have been parsed and calculated, the layout is drawn to the browser interface. As the user operates, JS modifies the DOM node or style, redraws and rearranges. Redrawing refers to drawing the render nodes corresponding to DOM nodes, and rearranging refers to recalculating the position of these nodes in the browser interface. Obviously, rearranging is very performance-consuming. What we need to do is to reduce the number of rearrangements.

When building a DOM tree, we can optimize performance by reducing the number of DOM nodes. At first, they are all laid out with table, the depth and number of nodes are quite complex, and the performance is very poor. Similarly, CSS as a cascading stylesheet, the hierarchy should not be too deep, otherwise the cost of traversal is very high. In addition, the expression attribute of CSS consumes a lot of performance, so if you don't use it, you don't have to use it. Animation effects can be written in CSS do not use JS to write, rendering engine is not the same, performance loss is not the same.

The above is the process of parsing rendering, and let's go on to talk about the process of user interaction. User actions will lead to redrawing and rearrangement, rearrangement will certainly lead to redrawing, and redrawing will not necessarily cause rearrangement. How on earth will it cause a rearrangement? Simple definitions, changes in DOM structure, and changes in geometric properties in DOM styles can lead to rearrangements. As the name implies, geometric attributes are the properties of the box model, such as width, height, border, external patch, internal patch and so on. There are also margin attributes such as offset.

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

1. If you need to change the DOM many times, first change it in memory, and finally insert it into the DOM at one time.

2, same as the previous one, if you change the style many times, synthesize one, and then insert it into the DOM.

3. Since position is separated from the document stream when the values of absoute and fixed are, the operation of such DOM nodes will not cause full page rearrangement. So the animation element sets position to detach it from the document stream.

4. When the display of the DOM node is equal to none, it will not exist in the render tree, so if there is a more complex operation, first make its display equal to none, and then set the display to block after all operations are completed, so that it will only be rearranged twice.

5. When you get the attribute value that will cause rearrangement, save it into the variable, and it will not be rearranged again when you use it again. Getting these properties results in rearrangement: offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight

This is how browsers turn resources into visible pages. In addition to the performance optimizations summed up according to the browser process, we also need to look at javascript as a program. Let's first take a look at javascript's garbage collection mechanism.

Javascript's engine logs out local variables that are no longer in use at regular intervals, freeing up the memory they occupy. The existence of closures will make the reference exist all the time and cannot be released. The life cycle of a global variable does not end until the browser unloads the page. So generally speaking, memory overflow is caused by the non-release of global variables and closures. To prevent memory overflows, we can do the following:

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

2. Use less global variables, and log out the used variables manually.

3. Use callbacks to access internal properties instead of closures

4. When it is inevitable to use closures, treat the details carefully. Cancel it when you don't use it.

5. Check the memory activity through the browser's own tool profiles. If it's wavy, it's normal. If it is tilted gradually, it means that there is memory that will not be released, and the corresponding function needs to be checked.

Finally, the function returns the value taken asynchronously, as is often the case:

Var getList = function () {$.ajax () .then (function (data) {Return data;})}; Var users = getList ()

There is no doubt that because the return within the function is asynchronous, the return can only be undefined, not the desired data. So in order to return data, set the async property of ajax to false, from asynchronous to synchronous, to get the data. However, the biggest problem is that synchronization interrupts the rendering process, that is, while waiting for the request to return, the whole page is stuck and the user operation will not respond. The real solution to this problem is to return promise objects instead of changing async to synchronization.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.