文章目录
- 一文大白话讲清楚CSS性能优化
- 1.讲性能优化肯定得先说清楚要什么性能，才能知道怎么优化
- 2.优化方向之一：快速地编写
-
- [2.1 使用预编译语言](#2.1 使用预编译语言)
- [2.2 适用速记属性](#2.2 适用速记属性)
- [2.3 使用CSS原生变量](#2.3 使用CSS原生变量)
- [2.4 其他](#2.4 其他)
- [3. 优化方向之二：快速的运行](#3. 优化方向之二：快速的运行)
-
- [3.1 快速运行的前提是快速的加载](#3.1 快速运行的前提是快速的加载)
-
- [3.1.1 要想加载快，那首先CSS文件体积小肯定很重要](#3.1.1 要想加载快，那首先CSS文件体积小肯定很重要)
- [3.1.2 尽量避免使用import](#3.1.2 尽量避免使用import)
- [3.1.3 首屏使用内联CSS](#3.1.3 首屏使用内联CSS)
- [3.1.4 异步加载CSS](#3.1.4 异步加载CSS)
- [3.2 想要运行快，高耗时耗性能的事少干](#3.2 想要运行快，高耗时耗性能的事少干)
-
- [3.2.1 减少回流和重绘](#3.2.1 减少回流和重绘)
- [3.2.2 合理使用选择器](#3.2.2 合理使用选择器)
- [3.2.3 减少使用昂贵属性](#3.2.3 减少使用昂贵属性)
- [3.2.4 优化媒体查询](#3.2.4 优化媒体查询)
- [3.3 其他](#3.3 其他)
- [4. 优化方向三：快速地维护](#4. 优化方向三：快速地维护)
-
- [4.1 基础是能快速看懂](#4.1 基础是能快速看懂)
- [4.2 关键是二开要高效](#4.2 关键是二开要高效)
一文大白话讲清楚CSS性能优化
1.讲性能优化肯定得先说清楚要什么性能，才能知道怎么优化
- 我们CSS要什么性能，三句话概括
- 快速地编写
- 不写重复无用的代码，提高代码的可复用性
- 快速地运行
- 快速地加载，快速地运行
- 快速地维护
- 阅读顺畅，二开高效
- 当然有时候要在三个快之间做平衡，不是哪个越快整体越好，而是三者之间寻找一个平衡的点，既快又好的效果
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文件体积小肯定很重要
- 删除无用的代码
- 使用css压缩工具压缩CSS代码
- 使用css Sprite
- 其他
3.1.2 尽量避免使用import
- import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，而且多个import有可能会导致下载顺序错乱
3.1.3 首屏使用内联CSS
- 为了使首屏更快的呈现给用户，可以使用内联css，提前css渲染时间
3.1.4 异步加载CSS
- 可以使用异步加载css
3.2 想要运行快，高耗时耗性能的事少干
3.2.1 减少回流和重绘
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 基础是能快速看懂
- 设计良好的CSS结构
- 编写良好的注释代码
- 合理的使用预编译语言
4.2 关键是二开要高效
- 二开要高效，就是要快速的更改所有需要更改的代码，所以问题还是回到了提高代码的复用性上，可以使用变量，预编译语言等，提高二开效率