1. 精简样式文件
很多时候我们会把很多个页面的样式文件合并为一个，因为通常页面之间会有公共的样式文件，但是这样做有好处也有坏处：
坏处：
- 样式文件偏大，影响加载速度
- 浏览器会进行多余的样式匹配，影响渲染时间。
好处：
- 样式文件会被浏览器缓存，进入到其他页面样式文件不用再去下载。
很多人认为样式文件越少越好，因为浏览器会对样式文件进行缓存，所以便一味的进行合并，但是我们也需要懂得取舍，正确的做法是：
- 如果是大项目，应该合并成不同的样式文件，如果是简单的项目，建议合并成一个文件即可。如果无法确认项目规模，建议分开成不同的样式文件，日后要合并也比较方便。
2. 利用继承减少代码量
我们都知道CSS有一些属性是可以继承的，比如color，font-size，font-family等等，但是很多开发人员不注意这种细节，编写很多重复性代码，从而使得CSS文件变得比较大，影响加载速度。
3. 内联首屏关键CSS
网站性能是留住用户的关键，那么网站首屏的加载速度更是关键的关键。
通常我们不会去写内联样式，因为这会造成代码维护困难，而且内联样式浏览器不会缓存的，每次刷新都会重新加载css。
但是，凡事都有两面性，内联CSS能够使页面渲染的开始时间提前，因为在HTML下载完成之后就能渲染了，不像link那样引用样式需要耗费更多时间。
那么，我们是否可以全部使用内联样式呢？答案是否定的，刚刚说了内联样式还是存在许多问题的，所以最好的解决办法就是：首屏关键CSS可以使用内联的形式。
4. 异步加载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 );
2. 修改link标签（有兼容性问题）
<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">
或者
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
5. 压缩文件
浏览器想要渲染出网页必须要先将CSS等文件下载下来，所有文件越小，那么就能够更快的下载和渲染，特别是在一些网络速度比较慢的场景下效果尤为明显。
我们可以借助一些打包工具进行压缩，比如webpack、gulp/grunt、rollup等。
6. 正确使用选择器
尽管现阶段各大浏览器对选择器的优化已经很好了，差别不大，但是我们还是可以尽量按照一定的规则来进行使用，比如以下几点：
- 不要嵌套过多复杂的选择器
- 通配符选择器尽量少用
- 不要为了速度而放弃了可维护性和可读性
7. 慎用一些CSS属性
如果某些CSS属性需要浏览器计算，那都是需要耗费一些性能的，比如如box-shadow、border-radius、filter、透明度、:nth-child等等。
如果非必要情况下可以不必使用这些属性，当然，大多数都是必要情况。
8. 不要使用@import
有些小伙伴可能习惯使用@import引入CSS样式文件，但是其实这样做有很大的弊端。
使用@import引入CSS会影响浏览器的并行下载。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作，这就导致浏览器无法并行下载所需的样式文件。
9. 减少页面重排、重绘
页面的重排重绘都会耗费浏览器性能，我们在非必要情况下应该避免，比如下面这些情况。
- 改变元素的内外边距
- CSS伪类激活
- 能使用background-color,就尽量不要使用background
- 改变
font-size和font-family
当然有些情况我们是不能避免重绘和回流的，我们视情况而定
10. 其它优化小点
- 慎重使用高性能属性：浮动、定位
- 去除空规则：｛｝
- 属性值为0时，不加单位
- css雪碧图，同一页面相近部分的小图标
- 将css文件放在页面最上面
总结
CSS的性能优化因人而异，也因项目而异，但作为一个优秀的程序员，宗旨是不变的，都要往好的方向发展。
