Web page performance optimization, cache optimization, load-time optimization, animation optimization

Tag: Range equals range browser jpeg padding splay Lin call

Cache optimization

Performance optimization The first step is to manage the cache of the page and avoid repeatedly downloading resources. Otherwise, increase the server pressure, and torture the user's wallet.

Browser caching mechanism

1. Access the page, request various resources, and the browser checks to see if there is a cache locally.

2. If so, check if the resource is out of date. Without expiration, use the cache directly. Expires, a request is made to the server.

3. The ETag and Last-modified header fields are taken in the request.

4. The server uses the ETag and last-modified to determine whether the browser-cached resource is already unavailable.

5. If the resource is still valid, return 304 to tell the browser to use the cache. Otherwise, the updated resource is returned.

With this set of logic, you can plan the caching of your Web site.

How do I notify the browser to update resources if the resource expires prematurely?

This is usually not possible because the browser discovers that the resource is not expired and does not make a request at all. However, this can be done by modifying the URL of the resource. So you need to add a version number or a random tag to the resource file name. such as Style.1234.css. In other words, do not let the browser cache HTML files, otherwise, the browser will not request the server before it expires.

Load-time optimization eliminates unnecessary downloads

The best optimization is to not download resources at all. So try to reduce the resources that you don't have.

1. Assess whether all dependencies are necessary and weigh the pros and cons.

2. Depends on whether the download path is reliable and unavailable when the entire page is blocked.

3. When designing a product, you need to discard the bandwidth-wasting design.

Compress all the resource codes that can be compressed from needless to say, all text, all compressed. Optimize your pictures

1. Get rid of unnecessary pictures

2. Use CSS3 to replace pictures

3. Use a picture with a higher compression rate. In particular, GIF motion diagrams, some video formats (H. A or WEBM) are much smaller than GIF sizes.

4. Use WordArt fonts, don't use pictures

5. Carefully weigh the relationship between the picture and the text. To express a meaning, perhaps a picture wins thousands of words. More than one picture, instead of saving a lot of text.

6. Use progressive JPEG. Compared with the data downloaded from top to bottom the baseline jpeg,progressive jpeg is blurred to clear, the user experience is good and does not cause reflow.

7. Picture resolution should be as small as possible to avoid image resolution greater than the display resolution.

8. Provides a more modern picture format for users who use the update browser.

9. Bitmaps of multiple resolutions are available for different page sizes.

10. To specify a wide height for the label, this can cause reflow.

11. Use HTTP/2. For example, a sprite diagram is a large picture of many small images that can reduce HTTP requests. However, it is difficult to cache, modify a small picture, resulting in all the small image cache invalidation. HTTP/2, you can initiate multiple requests within a link without using the sprite diagram.

Optimize fonts

1. In the @font-face, Unicode-range can develop character ranges that are used to avoid downloading characters from unwanted languages.

2. Make sure that the fonts have been compressed.

3. Manage the logic of font loading with @font-face display properties and Fontface objects.

Critical Render Path

The browser renders a webpage through the following steps.

1. Process HTML markup and build the DOM tree.

2. Process the CSS markup and build the CSSOM tree.

3. Merges the DOM and CSSOM into a single render tree.

4. The layout is based on the render tree to calculate the geometry information for each node.

5. Draws the individual nodes to the screen.

Optimizing the critical rendering path means optimizing the rendering process to make the Web page appear as quickly as possible.

Css

• CSS files block rendering. After the browser has built the DOM tree, you must wait for the Cssom tree to finish building.

• Prevent the label of the CSS from being linked at the top of the document, allowing the browser to request CSS files as soon as possible.

• Avoid using @import in CSS files, because only the files containing the import are downloaded and compiled, the browser will not discover and download the import CSS.

• You can consider using inline CSS without additional requests and not blocking rendering.

Js

• JS will not begin execution until the Cssom build is complete.

• JS also blocks the DOM tree from being built. Unless you <script> mark Async on the label.

• Check the page with the Chrome developer tools audits.

Animation optimization

Redraw process

CSS Selector

• The more complex the selector, the longer the browser calculates. In the worst case, the browser needs to traverse the entire dom-tree, which equals the total number of elements multiplied by the number of selectors.

• Try not to make the selector too complex, and precede the element that needs to be manipulated with the class name.

Reflow, layout

Chrome, Opera, Safari, and Internet Explorer are called layout. Firefox calls it reflow.

• Reflow, the less the repaint the better, the fewer elements involved, the better.

Reflow always involves the entire document flow.

• Modifying the element CSS immediately after reading the CSS computed values will cause the browser to synchronize Reflow, blocking the JS thread.

Paint

When a browser renders a Web page, it layers the page (layer), merges the different layers, and finishes the rendering. In the same layer, even if only one small element changes, the entire layer will be repaint. This can be seen in the paint Profiler interface of the developer tool, where you can see how many layers of a page are on the layer interface.

• Paint is a cost-performance feature.

• Modifying transform and opacity can cause repaint

• Create a new layer to reduce the repaint area.

The Will-change property can create a new layer for the element (works in Chrome, Opera and Firefox). or Transform:translatez (0);(works in all browsers).

• Too many layers also consume memory and performance, and use performance to determine whether a new layer is optimized or not to create a new layer.

• A fixed element automatically has its own layer under a high-dpi screen. Low DPI needs to be created on its own.

• Repaint a layer, if the layer overlaps other elements, it causes the layer and overlapping elements to be repaint.

• The best animations are skipping layout and paint direct composite.

Use transform, opacity to make animation, can achieve without layout and repaint. (There is no animation-related event in main of Devtool performance.) )

Debounce

Debounce: Do not call functions with high frequency, only one function is called once the event is triggered continuously.

1. The listener function of the interactive event cannot be executed too long, otherwise it will block page scrolling.

2. Do not modify the style in the listener function of the interactive event, will cause the forced synchronization reflow, blocking JS execution.

3. Debounce, utilize Requestanimationframe method.

The listener function may call Perventdefault, causing the compositor thread to wait for the listener function to complete. However, the third parameter of the new extended AddEventListener method resolves this issue.

Little Tricks

• The animation cannot be less than 60 frames. UI feedback cannot be less than 100ms.

• UI feedback does not have to pursue the quickest, intentionally delaying to 100ms. and use this time to do other things.

• Try to increase the thread idle time to get quick feedback.

• UI feedback is the highest priority, so try to stop other tasks during the interaction.

Web page performance optimization, cache optimization, load-time optimization, animation optimization