Front-end performance optimization notes

What is performance

From the moment the site is generated to the moment the code starts running, all the resources required to consume the browser, the server, are collectively referred to as performance

How to optimize performance

Browser cache policy

The browser cache mechanism, also known as the HTTP cache mechanism, is based on the cache identity of HTTP packets

Cache process analysis

Each time the browser initiates a request, it first looks up the result of the request and the cache identifier in the browser cache
Each time the browser receives the result of the returned request, it stores the result and the cache id in the browser cache

Mandatory cache

Forced caching refers to the process of searching the browser cache for the request result and deciding whether to use the cached result based on the cache rule of the result. There are three main cases of forced caching (the negotiation cache process is not analyzed for the moment), as follows:

If the cache result and cache ID do not exist, the request is directly sent to the server
The cache result and cache id exist, but the result is invalid. If the cache is forced to become invalid, the negotiated cache is used
If the cache result and cache ID exist and the cache result is not invalid, the cache is forced to take effect and the cache result is returned directly

Conclusion: When the browser makes a request to the server, the server will put the Cache rule in the HTTP header of the HTTP response packet and return the request result to the browser. The fields that Control the forced Cache are Expires and cache-control respectively, and cache-control has a higher priority than Expires

Expire

Expire time: With HTTP/1.1, Expire has been replaced by cache-control because the principle of Expires caching is to compare the client time with the time returned by the server. If the client time is different from the server time for some reason (e.g. If either the client or the server has an incorrect time), the forced cache will be invalidated, so the existence of the forced cache will be meaningless

Cache-Control

In HTTP/1.1, cache-control is the most important rule, which is mainly used to Control web caching. Its main values are:

Public: All content will be cached (both client and proxy can be cached)
Private: All content can be cached only by the client. The default value of cache-control
No-cache: indicates the contents of the client cache, but whether to use the cache is verified by the negotiated cache
No-store: All content is not cached, that is, neither mandatory cache nor negotiated cache is used
Max-age = XXX (XXX is numeric) : The cache contents will expire after XXX seconds

From the above example we can know:

The expires time value in an HTTP response packet is an absolute value
The cache-control value in the HTTP response packet is max-age=600, which is relative to the HTTP response packet

Here we take the blog request as an example. The request whose status code is gray indicates that the mandatory cache is used. The Size value of the request indicates the location of the cache, namely, from Memory cache and from Disk cache. From memory cache indicates that the cache in memory is used. From disk cache indicates that the cache in hard disk is used. The browser reads the cache in the order of memory - > Disk.Copy the code

To solve this problem, we need to understand from memory cache and from disk cache, as follows:

From memory cache: The memory cache has two characteristics, namely fast access and timeliness:
Fast read: The memory cache directly stores the compiled and parsed files into the memory of the process, occupying certain memory resources of the process, and facilitating the fast read of the next run.
Timeliness: Once the process is shut down, its memory is emptied.
From disk cache: The cache is directly written to the disk file. To read the cache, I/O operations are performed on the disk file stored in the cache and the cache content is parsed again. The reading of the cache is complex and slower than that of the memory cache.

In the browser, js and image files are directly stored in the memory cache after being parsed. Therefore, when refreshing the page, you only need to read from the memory cache directly. CSS files are stored in disk files, so every time the page is rendered, it needs to be read from disk cache.

Negotiate the cache

Negotiation cache is a process in which the browser sends a request to the server with the cache id after the cache is invalid, and the server decides whether to use the cache based on the cache ID.

Negotiation cache takes effect, return 304
Negotiate cache invalidation, return 200 and the request result result, and store the request result and cache id in the browser cache

Similarly, the identity of the negotiation cache is returned to the browser in the HTTP header of the response packet together with the request result. The fields controlling the negotiation cache are as follows: Last-modified/if-modified-since and Etag/if-none-match, where Etag/if-none-match has a higher priority than last-modified/if-modified-since.

conclusion

Mandatorized caching takes precedence over negotiated caching. If mandatorized caching (Expires and cache-control) is in effect, the Cache is used directly. If the negotiation cache does not take effect, the negotiation cache (last-modified time returned by the Last request/if-modified-since and Etag/if-none-match) is implemented. The negotiation cache is determined by the server whether to use the cache. If the negotiation cache is invalid, Then the cache on behalf of the request is invalidated, and the request result is retrieved and stored in the browser cache. If it takes effect, return to 304 and continue to use the cache

Last-Modified / If-Modified-Since

After receiving the request, the server finds that the request header contains the if-Modified-since field. The server compares the value of the if-Modified-since field with the last modification time of the resource on the server. If the last modification time of the resource on the server is greater than the value of the if-Modified-since field, the server compares the value of the if-Modified-since field with the last modification time of the resource on the server. The resource is returned with the status code of 200. Otherwise, 304 is returned, indicating that the resource is not updated and the cached file can continue to be used

Etag / If-None-Match

If-none-match indicates that when the client initiates the request again, it carries the unique Etag value returned by the last request. The value of this field tells the server the unique Etag value returned by the last request. After receiving the request, the server finds that the request header contains if-none-match. The server compares the if-none-match field with the Etag value of the resource on the server. If the value is consistent, 304 is returned, indicating that the resource is not updated. If they are inconsistent, the resource file is returned with the status code 200

2. Front-end performance optimization – Analyze performance with RAIL model

The following four aspects: Response Animation Idle Load

Response: Event processing should be completed within 50ms

The target

The time for the user’s input to the response is less than 100ms, giving the user the feeling that it is completed in an instant.

Optimization scheme

The event handler is completed within 50ms. Considering the idle task, events are queued and the waiting time is about 50ms. Animations are useful for click, Toggle, starting animations, etc., but not for drag and scroll.
Complex JS calculations are kept in the background as far as possible, such as Web workers, to avoid blocking user input
For responses over 50ms, be sure to provide feedback, such as countdown, percentage of progress, etc.

Idle task: in addition to processing input events, the browser has other tasks to do. These tasks take up part of the time, usually 50ms, and the response to input events takes a little bit more time.Copy the code

Animation: Generates a frame in 10ms

The target

Each frame should take no more than 10ms to generate. To ensure that the browser has 60 frames, each frame should take around 16ms, but the browser needs 6ms to render each frame. Designed for visual smoothness. Users are sensitive to frame rate changes.

Optimization scheme

In some high pressure points, such as animation, do not challenge the CPU, do as little as possible, such as: offset, set style, etc. Try to get as much as 60 frames.
In terms of rendering performance, specific optimizations are made for different animations

Animations are not just UI visuals, but the following behaviors are

Visual animations such as fade in and out, tweens, Loading, etc
Rolling, including elastic rolling, will continue for some distance after the finger is released
Drag and drop, zoom, often accompany user behavior

Idle: Maximizes the Idle time

The target

Maximize idle time to increase the probability of responding to user input within 50ms

Optimization scheme

Use idle time to do deferred work, such as loading visible parts of the page and then using idle time to load the rest of the page, using the requestIdleCallback API
The tasks to be executed in idle time should be within 50ms as much as possible. If they are longer, the pending time of input Handle will be affected
If a user interacts with an idle time task, this must be the highest priority and idle time tasks must be paused

Load: Transfers content to the page within 5 seconds

If the page loads slowly, the user’s intersection may move away. Pages that load quickly tend to stay longer on average, have lower bounce rates, and have higher AD viewing rates

The target

Load speed can be optimized according to device, network and other conditions. For now, a good idea is to keep your page open for no more than five seconds on a 3G phone with a built-in network
For the second opening, try not to exceed 2 seconds

Optimization scheme

Test the loading performance on the mobile device, choose the 3G network (400KB /s, 400ms RTT), you can use WebPageTest to test
Note that even if you have A 4G network, it may be slower than expected due to packet loss or network fluctuations
Disables rendering of blocked resources, delaying loading
Other optimization methods such as lazy load and code-splitting can be adopted to make the first load less resources

To sum up RAIL is a journey, which is continuously explored in order to improve users’ interactive experience on the website. You need to understand how users perceive your site in order to set the best performance goals

Focus on the user
Response to user input within 100ms
1 frame generated in 10ms during scrolling or animation execution
Maximize the idle time of the main thread
Make web pages interactive in 5s

3. Rearrange and redraw

Redrawing does not necessarily lead to rearrangement, but rearrangement does lead to redrawing

rearrangement

The following rearrangement occurs

Page initial rendering, which is the most expensive rearrangement
Add/remove visible DOM elements
Change element position
Change element dimensions, such as margins, padding, borders, width, and height
Change the content of the element, such as the number of words, image size, etc
Change the element font size
Change the browser window size, such as when the resize event occurs
Activate CSS pseudo-classes (such as: :hover)
Set the value of the style property, because changing the node style by setting the style property triggers a reflow every time
Query some properties or call some calculation methods: OffsetWidth, offsetHeight, etc. In addition, when we call getComputedStyle method, or currentStyle in IE, it will also trigger rearrangement, the principle is the same, both for “real-time” and “accuracy”.

Scope of influence:

Global scope: Relayouts the entire render tree starting with the root node HTML.
Local scope: Rearrange a part of the render tree or a render object (the element width and height remain unchanged, but the internal content is changed)

redraw

The following redraw occurs

color
text-decoration
outline-color
outline-width

Rearrange optimization suggestions

Try to do it on low-level DOM nodes, rather than in the global-scoped example above. If you want to change the style of p, don’t append class to div. It’s not good to influence child elements with parent elements.
Do not use the table layout, it is possible that a small change will cause the entire table to be rearranged. If you have to use a table, you can set table-layout: Auto; Or table-layout: Fixed renders the table line by line, which is also used to limit the scope of reflow

1. Style set modifications. It is wise and maintainable to change the class name rather than the style

When we modify the geometry of an element, causing the browser to trigger a rearrangement or redraw. It puts the action into the render queue, and when the number of actions in the queue reaches a certain number of times, the browser executes them in batches.

3, the DOM offline does not change the current DOM tree display: None Once we set the element to display: None (only one rearrange redraw), the element will no longer exist in the rendering tree, effectively “removing” it from the page, and our subsequent actions will not trigger rearrange and redraw, after adding enough changes, it will be displayed through the display property (another rearrange redraw). This way even a large number of changes trigger only two rearrangements. In addition, the element visibility: hidden only affects redrawing and does not affect rearrangement. Create a DOM fragment using the documentFragment, batch manipulate the DOM on it, and add the DOM to the document after the operation is completed, which will only trigger a rearrangement. Copy the node, work on the copy, and then replace it!

4. Use position or fixed to leave the document flow and use absolute position to make the element of the body of the rendering tree as a child element alone. The rearrangement cost is relatively small and will not cause too much impact on other nodes. When you place this element on these nodes, some other nodes in the region may need to be redrawn, but not rearranged

5. Animation optimization can apply animation effects to elements whose position attribute is absolute or fixed, thus having less impact on other elements. Animation effects should also sacrifice some smoothness for speed, and the balance should be measured by yourself: For example, implementing an animation that moves in pixels is the smoothest way, but layouts are too frequent and consume CPU resources. It is much better to move in 3 pixels. Enable GPU acceleration GPU hardware acceleration refers to using the graphics performance of the GPU to transfer some graphics operations in the browser to the GPU. Since the GPU is specially designed for processing graphics, it is more efficient in terms of speed and power consumption. GPU acceleration typically consists of the following components: Canvas2D, Layout Composition, CSS3 Transitions, CSS3 3D Transforms, WebGL, and Video.

Div {transform: translate3d(10px, 10px, 0); / div {transform: translate3d(10px, 10px, 0); }Copy the code

Summary:

Layout, Paint, Composite Layers -Leonard: Layout. These steps all take place in the CPU. Compostite Layers: THE CPU transfers the generated BitMap to the GPU and renders it to the screen.
CSS3 occurs on the GPU: Transform Opacity. Attributes that occur on the GPU are more efficient. Therefore, CSS3 has high performance.

4. White screen time

First, the importance of white screen time:

White screen time refers to the time it takes for the user to enter the address in the browser and the user to see the page. The faster the user perceifs the page, the better the user experience, reducing the user’s pop-up and improving the page retention rate

Two, white screen experienced what process:

1. The browser resolves the domain name of the page, obtains the IP address of the server, and communicates with the server. Tips: During the entire page loading process, the browser performs DNS Lookup several times, including the domain name Lookup of the page itself and the domain name Lookup generated by the JS, CSS, Image, and Video resources loaded during the PARSING of the HTML page.

2, establish the TCP connection request browser and server TCP request establishment process, is based on TCP/IP, the protocol is composed of IP at the network layer and TCP at the transport layer. IP is the unique address of each Internet device on the Internet. TCP establishes connections through three-way handshakes and provides reliable data transmission services.

3. Request processing response on the server After the TCP connection is established, the Web server accepts the request and processes it. Meanwhile, the browser waits for the response from the server. The Web server processes the request according to the request type. Static resources such as images, CSS files, and static HTML respond directly; For example, other registered requests are forwarded to the corresponding application server for data processing and retrieving data from the cache, and the data is responded to the browser in the agreed format. In large applications, usually distributed service architecture, the processing of application server may pass through the middleware of many systems and finally obtain the required data

4. The client downloads, parses, and renders the page. After the server returns data, the client browser receives the data and downloads, parses, and renders the PAGE

A. If the package is Gzip, decompress it to HTML

B. Parse the header code of HTML and download the style resource file or script resource file in the header code

C. Parse HTML code and style file code, build HTML DOM tree and CSSOM tree related to CSS

D. By traversing the DOM tree and CSSOM tree, the browser calculates the size, coordinates, color and other styles of each node in turn to construct the rendering tree

E. Complete the drawing process according to the rendering tree

Once the HTML is downloaded, the browser parses the header code, performs the style sheet download, and then continues down to parse the HTML code, building the DOM tree, and performing the style download. As soon as the DOM tree is built, start constructing the CSSOM tree. Ideally, the stylesheet is fast enough to download, the DOM tree and the CSSOM tree go through a parallel process, and when the two trees are built, the render tree is built, and then the drawing is done.

Tips: How browser security parsing policies affect HTML parsing:

When you encounter inline JS code while parsing HTML, it blocks the building of the DOM tree
Especially tragic situation: when the CSS style file is not downloaded, the browser parsing HTML encounters inline JS code, at this time!! According to the security resolution policy of the browser, the browser suspends JS script execution and HTML parsing. Until the CSS file is downloaded, the CSSOM tree is built and the original parsing is resumed.

Be sure to place JS code properly!!

White screen – performance optimization

So far, we have understood the process from the browser opening a link to the screen display – the process of white screen time, so we can make targeted optimization of what happens in each link.

1. DNS resolution Optimization For DNS Lookup, we can optimize DNS resolution specifically.

DNS cache optimization
DNS preloading policy
A stable and reliable DNS server

2. TCP network link optimization for network link optimization, it seems that there is no better way than spending money!

Server side processing optimization, is a very large topic, will involve such as Redis cache, database storage optimization or the system of various middleware and Gzip compression…

4. Browser download, parsing, rendering page optimization according to the browser to the page download, parsing, rendering process, you can consider the optimization processing:

Simplify HTML code and structure as much as possible
Optimize CSS files and structures as much as possible
Be sure to place JS code reasonably and try not to use inline JS code

5, a large number of picture loading optimization

1. Load the required pictures on the first screen first, and then load other pictures after completion

2. Picture cutting

3, use better image formats JPEG, PNG, GIF, webP

One is to reduce the number of bytes per pixel
The other is to reduce the total number of pixels in an image

6, browser rendering process &Composite (render layer combination) summary

Browser request, loading, rendering process:

The DNS query
A TCP connection
An HTTP request is a response
Server response
Browser rendering
The browser rendering thread receives the request, loads and renders the web page roughly
Parse HTML to create a DOM tree
Parse the CSS to create the CSS Rules Tree
DOM and CSS are combined to generate a Render tree
Render tree layout, responsible for element size, position calculation
Render Tree, render the page pixel information
The browser will send the information of each layer to the GPU (GPU process: at most one, used for 3D drawing, etc.), and the GPU will composite each layer and display it on the screen

Layout: With Render Tree, the browser already knows what nodes are on the page, their CSS definitions, and their dependencies to figure out where each node is on the screen.

Painting: Work out the rules and use the graphics card to paint the content on the screen.

Reflow: When the browser finds that something has changed that affects the layout and needs to go back and rerender, this process is called reflow. Reflow will recursively calculate the geometry and position of all nodes starting from the root frame. Reflow is almost inevitable. Some of the effects currently present in the interface, such as the collapse and expansion of tree directories (essentially the display and hiding of elements), will cause reflow in the browser. Mouse slide, click… As long as these behaviors cause changes in the space area, positioning mode, margin and other attributes of some elements on the page, it will cause it to be inside, around or even the whole page to be re-colored. It is often impossible to predict which parts of the code the browser will reflow, and they all affect each other.

Repaint: Changing an element’s background color, text color, border color, etc., without affecting its surrounding or interior layout, a portion of the screen is repainted, but the element’s geometry remains the same.

Synthetic layer creation criteria:

3D or Perspective Transform CSS properties
Elements that use accelerated video decoding have 3D
(WebGL) context or accelerated 2D context elements
Hybrid plug-ins (e.g. Flash)
Animates CSS on opacity or transforms an element using an animation on it
An element that has accelerated CSS filters
An element has a descendant node that contains a composite layer (in other words, an element has a child element that is in its own layer)
Element has a sibling element with a lower Z-index that contains a composite layer (in other words, the element is rendered above the composite layer)

Synthetic layer advantages

The bitmap of the composite layer will be synthesized by the GPU faster than the CPU
When repaint is required, only repaint itself is required and no other layers are affected
Layout and Paint are not triggered for Transform and opacity effects

1. The JavaScript. In general, we will use JavaScript to achieve some visual changes. Do an animation, sort a data set, or add DOM elements to a page using jQuery’s Animate function. Of course, in addition to JavaScript, there are other common ways to achieve visual changes, such as CSS Animations, Transitions, and the Web Animation API.

2. Style calculation. This process works out which elements apply which CSS based on the match selector (for example.headline or.nav >.nav__item) 3. The process of rules. Once you know the rules from this, you apply the rules and calculate the final style for each element.

3. The layout. Once you know which rules to apply to an element, the browser can start calculating how much space it takes up and where it is on the screen. The layout pattern of a web page means that one element can affect other elements, for example, the width of an element generally affects the width of its children and nodes throughout the tree, so the layout process is a common occurrence for browsers.

4. Paint. Drawing is the process of filling pixels. It involves drawing text, colors, images, borders, and shadows, basically including every visible part of an element. Drawing is typically done on multiple surfaces (often called layers).

5. The synthesis. Because parts of a page may be drawn to multiple layers, they need to be drawn to the screen in the correct order to render the page correctly. This is especially important for elements that overlap with another element, because an error can cause one element to mistakenly appear on top of another.

The “flow” and “paint” steps are collectively called “render”. Rerendering requires regenerating the layout and redrawing. With the above rendering pipeline, we can know that redrawing does not necessarily require rearrangement, but rearrangement inevitably leads to redrawing

It is inevitable that rearrangements and redraws will be triggered constantly. However, they are very resource-intensive and are the root cause of poor web page performance. Improving web performance means reducing the frequency and cost of “rearranging” and “redrawing” and triggering re-rendering as little as possible.

Rearrangement and redrawing will consume a large amount of CPU and GPU resources. The most important optimization point of front-end new energy optimization is to minimize redrawing and rearrangement.

Summarize the advantages of composition layer: generally, an element will become a composition layer after hardware acceleration is enabled, which can be independent of the common document flow. After modification, the whole page can be avoided redrawn and the performance can be improved. Generally, turning on hardware acceleration will improve animation fluency, but too many compositing layers can also cause performance bottlenecks. Too many compositing layers can take up a lot of memory, and too many compositing layers can cause layers to explode if you have too many compositing layers on a page

Some JavaScript methods can be used to adjust rerendering to greatly improve web page performance. One of the most important, is the window requestAnimationFrame () method. It allows some code to be executed the next time you re-render.

window.requestAnimationFrame(fn);
Copy the code

* * * * window. RequestIdleCallback () can also be used to adjust to render. It specifies that the callback function is executed only when there is free time at the end of a frame. Function fn is executed only if the running time of the current frame is less than 16.66ms. Otherwise, it is postponed to the next frame, and if there is no free time for the next frame, it is postponed to the next frame, and so on

 requestIdleCallback(fn);
Copy the code

It can also accept a second argument that represents the specified number of milliseconds. If there is no free time in each frame within the specified period, the function fn will be enforced.

requestIdleCallback(fn, 5000);
Copy the code

7. Optimized animation performance of front-end browser

To sum up a few key points

1. Simplify THE DOM and make a reasonable layout

2. Use transform instead of left and top to reduce the use of attributes that cause page rearrangements

3. Enable hardware acceleration

4. Avoid unnecessary graphical layers created by browsers

5. Minimize JS animations and use performance-friendly requestAnimationFrame if necessary

6. Use Chrome Performance to debug animation performance