前端css性能优化
前端css性能优化
1. 减少样式表数量和压缩文件大小：
通过合并多个样式表、删除未使用的样式、压缩样式表等方式来减少样式表数量和大小，从而减少网络请求和提高加载速度。
-
通常来说，样式文件会被浏览器缓存，进入到其他页面样式文件不用再去下载。一般是样式表数量越少越好，但是如果样式文件偏大，也会影响加载速度，所以需要取舍。如果是大项目，应该合并成不同的样式文件，如果是简单的项目，建议合并成一个文件即可。如果无法确认项目规模，建议分开成不同的样式文件，日后要合并也比较方便。
-
浏览器想要渲染出网页必须要先将CSS等文件下载下来，所有文件越小，那么就能够更快的下载和渲染，特别是在一些网络速度比较慢的场景下效果尤为明显。我们可以借助一些打包工具进行压缩，比如webpack、gulp/grunt、rollup等。
2. 不要嵌套过多复杂的选择器：使用尽可能简洁的选择器来匹配元素，避免使用过于复杂的选择器，可以减少匹配时间和提高渲染速度。
如下：
法2的写法，性能更高，因为css选择器是从右到左解析的，法2可以直接获取child，而法1需要先获取所有的child，再获取family下的所有child
/* 法1 */
.family .child {font-size: 14xp;
}
/* 法2 */
.child {font-size: 14xp;
}
3. 避免使用通配符*选择器：通配符选择器（*）会匹配所有元素，会消耗大量计算资源。尽可能避免使用通配符选择器，或者将其限制在具体的元素或类别上。
4. 使用ID选择器代替类选择器：ID选择器比类选择器更具体，匹配速度更快。在需要使用样式的地方，尽可能使用ID选择器代替类选择器。
5. 避免在全局范围内使用过多的类选择器：为了提高选择器的效率，可以限定类选择器的范围，避免在全局范围内使用过多的类选择器。
6. 减少全局选择器的使用：全局选择器会匹配文档中的每一个元素，因此会降低选择器的效率。应尽量避免使用全局选择器，而是限定选择器的范围。
7. 使用子选择器：子选择器的效率比后代选择器高，因为子选择器只会选择直接子元素，而后代选择器会选择所有后代元素。因此，应尽量使用子选择器来提高选择器的效率。
8. 使用类选择器代替标签选择器：类选择器比标签选择器的效率高。因此，应尽量使用类选择器来代替标签选择器，从而提高选择器的效率。
9. 避免使用@import：@import会阻塞页面的加载，影响浏览器的并行下载，并且会增加页面的请求次数。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作，这就导致浏览器无法并行下载所需的样式文件。尽量避免使用@import，或者将其放在样式表的开头。
10. 避免使用过多的浮动和定位：浮动、定位元素不仅会影响其他元素的布局和渲染，也容易造成重绘与回流。如果使用过多的浮动与定位，会导致页面的渲染速度变慢。尽量避免使用过多的浮动与定位，或者使用其他布局方式代替。
11. 使用雪碧图：将多个小图标合并成一个大图，并使用CSS来控制显示区域，可以减少网络请求和提高加载速度。
12. 避免使用!important：!important会覆盖其他所有样式，会增加计算时间和降低渲染速度。尽量避免使用!important，或者将其限制在必要的地方。
13. 使用缩写属性：使用缩写属性可以减少样式表的大小，从而提高加载速度。例如，使用margin代替margin-top、margin-right、margin-bottom、margin-left。
14. 慎用一些需要浏览器计算的CSS属性：
如果某些CSS属性需要浏览器计算，那都是需要耗费一些性能的，比如box-shadow、border-radius、filter、透明度、:nth-child、calc等等，而且除了计算，这些属性也容易造成重绘和重排
如果非必要情况下可以不必使用这些属性，当然，大多数都是必要情况。
15. 利用继承减少代码量：
我们都知道CSS有一些属性是可以继承的，比如color，font-size，font-family等等，但是很多开发人员不注意这种细节，编写很多重复性代码，从而使得CSS文件变得比较大，影响加载速度。
16. 首屏关键css使用内联样式：
网站性能是留住用户的关键，那么网站首屏的加载速度更是关键的关键。
通常我们不会去写内联样式，因为这会造成代码维护困难，而且内联样式浏览器不会缓存的，每次刷新都会重新加载css。
但是，凡事都有两面性，内联CSS能够使页面渲染的开始时间提前，因为在HTML下载完成之后就能渲染了，不像link那样引用样式需要耗费更多时间。
那么，我们是否可以全部使用内联样式呢？答案是否定的，刚刚说了内联样式还是存在许多问题的，所以最好的解决办法就是：首屏关键CSS可以使用内联的形式。
17. 异步加载CSS：
CSS会阻塞渲染，在CSS文件请求、下载、解析完成之前，浏览器将不会渲染任何已处理的内容。
但是，有些CSS文件可能不是我们渲染必须的CSS文件，我们可以让它异步加载，从而提升渲染速度，比如下面两种异步加载CSS的方式：
-
使用JavaScript动态创建样式表link元素，并插入到DOM中
// 创建link标签 const myCSS = document.createElement( "link" ); myCSS.rel = "stylesheet"; myCSS.href = "mystyles.css"; // 插入到header的最后位置 document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling ); -
修改link标签（有兼容性问题）
<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">或者
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
18. 不要为了速度而放弃了可维护性和可读性：
渲染速度很重要，但是我们在编码过程中，也需要注意代码的可维护性和可读性，比如，不能盲目的为了压缩样式文件的大小，写一些很简单的类名，如a,b,c,d等
19. 减少页面重排、重绘：
页面的重排重绘都会耗费浏览器性能，我们在非必要情况下应该避免，比如下面这些情况。
改变元素的内外边距
CSS伪类激活
能使用background-color,就尽量不要使用background
改变font-size和font-family
当然有些情况我们是不能避免重绘和回流的，我们视情况而定
21.将css文件放在页面最上面：
我们可以看到，大多数的html页面在用link引入外部css文件的时候，都是把css文件放在页面的顶部，即放在标签里面，那么，这样做的原因是什么呢？
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- css放顶部 --><link rel="stylesheet" href="path/to/your/css/file.css">
</head>
<body><!-- 页面内容 -->
</body>
</html>
答案：可以让前端性能更优化
那么，为什么就可以让前端性能更加优化呢？这时，我们就需要先了解脚本和样式文件对页面渲染的影响。
浏览器从服务器获取文档并自上而下进行解析，在脚本文件不包含defer和async的情况下，会按照如下的规则进行解析：
- 解析html文档，遇到html标签时，构建DOM树
- 在解析html文档的时候，如果遇到外联的css文件或js文件，会阻塞html文档继续向下解析。
- css文件下载完毕之后，会构建 CSS Rule Tree，js文件下载完毕之后，会立即解析执行。
- 如果CSS Rule Tree先于DOM Tree生成，那么DOM Tree会在一边构建的同时一边结合CSS Rule Tree生成Rendering Tree(渲染树)，渲染页面。
- 如果CSS Rule Tree后于DOM Tree生成，那么在构建完DOM Tree之后，会再结合CSS Rule Tree树，再次构建一遍，渲染页面，这就会导致重绘与回流，影响性能
从上面的规则中我们可以看到，我们css文件放在顶部，就可以先于DOM树生成CSS Rule Tree，DOM Tree就只会构建一遍，节省了时间，前端性能就得到优化。
当然，这个用法并不是绝对的，如果css文件比较大，下载时间较长，屏幕就会出现较长的白屏时间，用户体验不好。
20.其它优化小点：
去除空规则：｛｝
属性值为0时，不加单位
尽量少的去对标签进行选择，而是用class
尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素
属性值为浮动小数0.**，可以省略小数点之前的0
标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后
选择器优化嵌套，尽量避免层级过深