Overview of performance optimization
1. Performance optimization is necessary
Performance optimization has always been a topic we have been discussing, and it is also an important knowledge point. When the project has more and more functions and the module size is gradually expanded, a series of performance problems will occur, such as the first screen loading of Vue will become very slow, compilation will be delayed, and packaging will take half a day. The importance of performance tuning must be made clear, and the life of any project will lead to performance tuning
2. Errors in performance optimization
One area where we often make a mistake is to confuse performance tuning with performance efficiency.
Such as:
1. Is the while loop faster or the for loop faster? 2. | 0 than Math. Floor performance is good? 3. Which is faster, if else or ternary operator?
Many people will think that the above three problems are the category of performance optimization, and will struggle with these problems. In reality, however, these three problems have nothing to do with performance optimization, and are simply performance problems.
3. What is front-end performance optimization
In summary, these three aspects
1. Page loading performance (loading time)
2. Animation and operation performance (smooth and no lag)
3. Memory and power consumption (memory occupation and power consumption)
Optimize the performance based on the above aspects
1. Page loading performance (loading time)
A. Reduce the number of requests
(1) JS, CSS, packaged into HTML, and for a request
(2) Sprite diagram, multiple small diagram and a picture, only request once
(3) Replace small images with font ICONS, or use data-URL
(4) JS control image lazy loading, asynchronous loading, page initialization to avoid a request for more than a picture
B. Reduce the transmission volume
(1) Js inventory is placed on the static CDN. When the project is executed, a link is taken over
(2) Compression strategy, large image compression (Tinypng), code compression (Webpack,Gzip)
(3) Elegant degradation, according to the user’s network status and model control picture definition
(4) Low definition pictures, sharpen processing, improve user experience
C. Cache policy
(1) Image cache
(2) Data cache, commonly used is the address option, province, do not repeat the request, cache to the local user
2. Animation and operating performance
A. Avoid manipulating too many DOM elements
The virtual DOM can be manipulated by data drive, and then converted into real DOM by comparison through diff algorithm
B. Avoid manipulating the values of top, left, etc
If you change the value of top and left of an element, it will cause DOM backflow. You can use DOM redraw
Dom reflux: When the HTML structure of the page changes (adding, deleting, changing position), the browser needs to recalculate the new DOM structure and re-render the current page. Reflux is a performance drain, especially on mobile devices with limited performance. Dom redraw: When part of an element’s style changes (e.g. background color, font color, position (in the case of Transform)), the browser rerenders the current element. Backflow takes a lot of energy than drawing, so when optimizing the program system, we tried to minimize DOM backflow in the browser.
The value of left can be replaced by the translate in the transform
3. Memory and power consumption
A. Scope issues (memory-related)
(1) Avoid defining meaningless variables. Every time you remove var to define a value or an object, it takes up memory
(2) Do not abuse closures. The JS garbage collection mechanism will not reclaim variables in closures. They will be resident in memory.
B. Cycles (performance-related)
The front end should avoid the comparison and circulation of large-scale data, and can be processed separately or processed in the background first, otherwise it will also lead to lag
C. Power consumption (mainly when playing games on the front end)
(1) Optimize art resources, such as reasonably planning the atlas, agreeing on the maximum number of triangular faces of the model, and formulating reasonable particle effect specifications. This is arguably one of the most important aspects of game optimization, and therefore technical art plays a huge role in game development.
(2) Simplify or optimize shaders, such as compiling and loading the shader before the game starts.
(3) Use Batching and minimize DrawCall
Batching: Batch processing of dynamic or static objects (batch processing to optimize power consumption)
DrawCall: The CPU calls a graphics programming interface (such as DirectX or OpenGL) to command the GPU to render (the more times it draws, the more power it consumes).
The above is my summary and experience, if not correct, please correct.
If it is helpful to you, you can forward the comments, please note the author and source.