This is the 18th day of my participation in Gwen Challenge
Summary of CSS performance optimization methods.
1. Avoid @import
It was mentioned in CSS modularization that you can implement CSS modularization via @import, but this method is not recommended. Because we use @import to import CSS files, we add a delay to the page load time.
So we usually import external CSS files through the link tag in the header.
2. Avoid excessive rearrangements
Modifying certain CSS styles will cause part or the entire page to be re-rendered, which should be minimized.
(1). Do not change the STYLE of the DOM one by one. Define the class in advance, and then change the dom classname
(2). Do not modify dom with a wide range of influence
(3). Use absolute positioning for animation elements
(4). Try not to use the table layout, because a small change will cause the entire table layout
(5). Avoid setting a large number of style attributes. Changing the node style by setting the style attribute will trigger reflow every time, so it is better to use the class attribute
(6). If there is a calculation expression in the CSS, it will be recalculated each time, triggering a reflow
3. Remove useless CSS code
We often end up with a lot of useless CSS code during page development,
They may be background Settings set during debugging, styles overwritten by later styles, or styles set that do not take effect.
All of this CSS code can be deleted.
4. Choose the right selector
There are many, many kinds of selectors in CSS. Maybe the same element object can use different selectors. Our principle should be precise and simple selectors. Don’t nest too many complex selectors, which is bad for rendering and bad for reading.
In addition, wildcard and attribute selectors are the least efficient and have the most elements to match, so avoid them as much as possible.
5. Carefully choose high-consumption styles
Some styles require a lot of calculation before drawing.
For example, border-radius, box-shadow, transform, we should choose the appropriate attributes according to the business requirements.
6. Use CSS expressions as little as possible
Expressions can make your code look cool, but they can be more wasteful of performance than you think.
7. Synthesize icon images
CssSprite is used to synthesize the icon image and display the icon image in the way of width and height plus background-position, which is very practical and reduces HTTP requests.
8. Reduce CSS nesting
It’s easy to nest CSS code, but this is a performance waste, and it’s best not to nest more than three layers.
9. Merge common styles
Split out the common CSS files. For larger projects, you can extract the common structure styles of most pages into a single CSS file, which can be cached after a single download.
10. Compress CSS files
File size has a direct impact on the browser’s load speed, especially when the network is poor. Webpack, gulp/ Grunt, and rollup also support CSS compression. The compressed file can be significantly smaller, which can greatly reduce the browser load time.
The above is my summary of CSS performance optimization methods, welcome criticism ~~