CSS 如何做性能优化

[Leo-lin214]

我相信很多童鞋们肯定被问过不少，在面试时，面试官也会经常询问的一道题目。

在开发过程中，我们都知道如何在 JavaScript 层面对性能进行优化。那么在 CSS 层面呢？你会选择如何回答。接下来，我就简单滴说一说 😄。

针对首屏页面，应该选用内敛样式

首先必须知道的是，在 HTML 中我们一般都会使用 link 标签引入相应的 CSS 文件进行解析，那么样式下载速度将会直接影响到 HTML 文档的解析，也就直接导致了白屏。

首屏对于哪一个页面或者是 APP 都显得尤为的重要，那么使用内敛样式在针对首页进行处理的话，就不需要等待下载时间了，而是直接滴解析便可。

压缩 CSS

主要是通过 Webpack 进行相应的压缩，可在 css-loader 中启动 minimize 属性来开启 CSSNano，接着可以压缩相应的 CSS 文件。

Preload 异步加载 CSS

需要理解的是，CSS 会阻塞渲染，也就是说，浏览器在解析文档时，必须要等到 CSS 文件下载完成后才会去做真正的渲染过程。使用 Preload 加载资源会告诉浏览器提前加载相应的资源，并将它们存储到缓存当中，当真正执行时便会直接从缓存中获取。

那么，对于一些非必须的 CSS 使用 Preload 预获取的话，就可以先获取资源，接着浏览器在解析相应的 HTML 文档后，就无须等待下载而是直接从缓存中获取相应资源即可。

剔除无用 CSS 代码

在开发过程中，由于一些新的业务迭代，导致原来的页面已经不可用，那么我们就有必要删掉它们 CSS，没必要保留，最愚蠢的方法便是一个一个找出来，毕竟这是很耗时间的。。。

当然也可以借助第三方库实现剔除无用的 CSS 代码，如 uncss。

考虑 BFC 元素

由于我们平时定义的元素在使用 JS 操作过程中，很容易就会导致页面的回流，那么考虑使用 BFC 元素，可以很好避免这个问题，首先 BFC 元素跟外部元素是不会有任何的联系的，它只会让它内部进行相应的回流或者重绘，这样可以很好滴减少整个页面的回流。

合理使用选择器

浏览器在解析 CSS 代码时，都会是直接从右向左进行解析的，主要就是因为每个子节点至多只有一个父节点，那么，不符合就可以直接抛弃，相反一个父节点会有很多个子节点的可能性，所以在正向解析过程会导致很多性能问题。

那么合理使用选择器可有效减少查询过程。

避免使用 @import

@import 引入流程会破坏浏览器的解析流程。浏览器在下载完 link 标签中 CSS 后，会开始解析里面代码，当在解析过程发现使用 @import，又会继续开始新一轮的等待下载时间，这样一来便会阻塞了渲染流程。

所以对于引入样式，尽量使用 link 标签进行引入，避免使用 @import。