一文大白话讲清楚CSS性能优化

一文大白话讲清楚CSS性能优化

1.讲性能优化肯定得先说清楚要什么性能，才能知道怎么优化

• 我们CSS要什么性能，三句话概括

1. 快速地编写

• 不写重复无用的代码，提高代码的可复用性

2. 快速地运行

• 快速地加载，快速地运行

3. 快速地维护

• 阅读顺畅，二开高效
• 当然有时候要在三个快之间做平衡，不是哪个越快整体越好，而是三者之间寻找一个平衡的点，既快又好的效果

2.优化方向之一：快速地编写

2.1 使用预编译语言

• 可以使用Scss，Less等预编译语言，降低重复代码的编写，提高代码复用性，提高代码开发速度，不懂预编译语言的看我这篇文章 https://blog.csdn.net/xiaobangkeji/article/details/144911034

2.2 适用速记属性

• 如果设置margin的四个属性，可以直接margin：上 右 下 左；不需要margin-top；margin-right；margin-left；margin-bottom这样一个一个设置

2.3 使用CSS原生变量

• 我们可以使用CSS原生变量，提高代码的复用性，进而提高代码编写速度

2.4 其他

3. 优化方向之二：快速的运行

3.1 快速运行的前提是快速的加载

3.1.1 要想加载快，那首先CSS文件体积小肯定很重要

1. 删除无用的代码
2. 使用css压缩工具压缩CSS代码
3. 使用css Sprite
4. 其他

3.1.2 尽量避免使用import

• import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，而且多个import有可能会导致下载顺序错乱

3.1.3 首屏使用内联CSS

• 为了使首屏更快的呈现给用户，可以使用内联css，提前css渲染时间

3.1.4 异步加载CSS

• 可以使用异步加载css

3.2 想要运行快，高耗时耗性能的事少干

3.2.1 减少回流和重绘

• 不懂得看我这篇文章 https://blog.csdn.net/xiaobangkeji/article/details/144908721

3.2.2 合理使用选择器

• CSS的匹配规则是从右往左，譬如#title .div h2匹配的时候，先找到h2；然后去除上一层不是.div的元素；然后再往上去除不是#title的元素。如果嵌套的层级太多，匹配花费的事件会很大

3.2.3 减少使用昂贵属性

• 在页面重绘时，向box-shadow / border-radius / filter / opacity 等昂贵属性会降低浏览器的渲染能力

3.2.4 优化媒体查询

• 媒体查询的预设可以更高效的适配不同的设备

3.3 其他

4. 优化方向三：快速地维护

4.1 基础是能快速看懂

1. 设计良好的CSS结构
2. 编写良好的注释代码
3. 合理的使用预编译语言

4.2 关键是二开要高效

• 二开要高效，就是要快速的更改所有需要更改的代码，所以问题还是回到了提高代码的复用性上，可以使用变量，预编译语言等，提高二开效率