CSS性能优化指南

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

浏览器是如何加载网页的

我们知道浏览加载网页，大概经历了一下几个步骤：

1. 浏览器获取到html文档。
2. 浏览器将HTML文件转化成一个DOM（Document Object Model）
3. 浏览器会获取取比如嵌入到页面的图片、视频和CSS样式。
4. 浏览器拉取到CSS之后会进行解析，生成CSS树
5. 将DOM树和CSS树合并成渲染树
6. 根据渲染树来布局，绘制每个节点
7. 将布局绘制到屏幕上

根据这一点，我们可以确定的是，CSS不会影响DOM的解析，但是它会阻塞页面的渲染

如何优化CSS

压缩和缩小 CSS

压缩

浏览器和服务器建立连接，下载外部样式是不可避免地会导致延迟，但是我们可以通过压缩文件和压缩文件的内容来减少传输的时间。

我们可以通过开启GZIP的方式来压缩文件的大小。

缩小

缩小是删除空格和任何不需要的代码的过程。输出是一个较小但完全有效的代码文件，浏览器可以解析它。

1. 如果你使用的是webpack的话，那么你可以选择 mini-css-extract-plugin 插件来打包CSS 。
2. 删除空格
3. 发布之前删除注释
4. 避免0px ，直接使用0，
5. 删除未使用的css

异步加载不重要的CSS

比如说希望用户在打印网页内容的时候，可以显示特定的CSS样式，那么这个时候，你就可以使用media='print’来设置打印的样式

<link rel="stylesheet" href ="不重要的css" media ="print" onload ="this.media='all'" 

>    

当你想不阻塞DOM加载的时候可以选择preload。

preload 是一个声明式 fetch，可以强制浏览器在不阻塞 document 的 onload 事件的情况下请求资源。

<link rel="preload">

用 CSS 效果替换图像

利用边框、阴影、圆角边缘、渐变和一些几何形状等等效果，来代替图片。

避免在 HTML 中使用内联样式

尽量将css样式写在css文件中，这样不仅有利于可读性，更有利于减少冗余代码的出现。

简化选择器

css选择器很多的，我们进行避免复杂的选择器，必要的时候可以选择id选择器。这里我讲的是抛弃复杂的选择器，并不是对于css性能来说的，对于大多数网站，优化 CSS 选择器可能带来的性能提升很小。这一点的提出，是基于Performance Impact of CSS Selectors提出的。

采用 CSS 动画

原生 CSS过渡和动画总是比修改相同属性的 JavaScript 驱动的效果更快。通常很多人习惯性通过操作DOM和CSS来实现动画，但是这是很损耗性能的，因为JS操作DOM和CSS，浏览器会不停的执行重排和重绘

用CSS3动画替代js模拟动画的好处：

1. 硬件加速；
2. 浏览器对动画做优化
3. CSS3的动画是利用C语言编写的，它是系统层面的动画。

将关键的 CSS 样式移动到style标签

浏览器将不会呈现 DOM 元素，直到它的所有相应样式都已加载。如果元素样式都存储在需要几秒钟才能加载的单个大型样式表中，这可能是一个问题。相反，我们可以通过将关键 CSS 样式放到style标签中。

书写顺序

这是一个通常被大家忽略的重要因素。

比如下面的例子

width: 150px;
height: 150px;
position: absolute;

当浏览器解析到 position 的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染。

如果你使用，我推荐安装CSScomb插件。同时推荐阅读Code Guide by @AlloyTeam

CSS 对于加载页面和令人愉悦的用户体验至关重要。虽然我们通常可能会优先考虑其他资产（例如脚本或图像）的影响更大，但我们不应该忘记 CSS。