CSS性能优化指南

🧨🧨🧨

大家好，我是搞前端的半夏 🧑，一个热爱写文的前端工程师 💻.
如果喜欢我的文章，可以关注 ➕ 点赞 👍 一起学习交流前端，成为更优秀的工程师～ 更多故事—点我探索新世界！

🧨🧨🧨

浏览器是如何加载网页的

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

1. 浏览器获取到html文档。

2. 浏览器将HTML文件转化成一个DOM（Document Object Model）

3. 浏览器会获取取比如嵌入到页面的图片、视频和CSS样式。

4. 浏览器拉取到CSS之后会进行解析，生成CSS树

5. 将DOM树和CSS树合并成渲染树

6. 根据渲染树来布局，绘制每个节点

7. 将布局绘制到屏幕上

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

如何优化CSS

压缩和缩小 CSS

压缩

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