《CSS性能优化的8个技巧（摘取重点）》

[wangsiyuan0215]

如果想了解完整文章，请点击这里。

1. 异步加载 CSS

异步加载有四种方式：

1. 通过 JS 动态的创建 link 标签然后插入到 head 标签内部；

// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );

2. 将 link 中的 media 的属相设置为用户浏览器不识别的媒体类型（如：noexist），对于浏览器来说，遇到不识别的媒体类型，会降低其下载的优先级，在不阻塞页面渲染的情况下进行下载；但是别忘了，在下载完成后要将 media 的属性改为 screen / all。

<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">

3. 与第2中类似的，可以通过 rel 属性将link元素标记为 alternate 可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将 rel 改回去。

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">

4. 将 rel 属性设置为 preload，这一 Web 标准指出了如何异步加载资源，包括CSS类资源。

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

注意，as是必须的。忽略as属性，或者错误的as属性会使 preload 等同于 XHR 请求，浏览器不知道加载的是什么内容，因此此类资源加载优先级会非常低。as 的可选值可以参考上述标准文档。

2. CSS 选择器为什么要从右向左遍历匹配？

因为 CSS 选择器在匹配一条 CSS 的规则（.mod-nav h3 span）时，会生成索引树：

• 若先从左向右遍历，则需要先遍历 .mod-nav 下的所有子节点找到 h3 所有节点，再从 h3 节点下继续遍历子节点直到找到 span 节点，若 .mod-nav 或 h3 节点下有 1000 个子节点呢？会浪费 999 次的遍历所需要的资源和时间；

• 若从右向左遍历，则只需要找到所有 span 节点（n 个），然后逐一向上查找匹配的父节点，这样消耗的资源和时间会少很多，因为仅仅需要遍历 n 次就可以找到其父节点；

3. CSS 与网络性能

这里仅列出目前对于我自身容易实现或约束的一些点，若想了解全部，请查看原文。

1. 懒加载非关键 CSS，优先加载关键 CSS，或根据媒体类型拆分 CSS 文件；
2. 避免使用 @import：

• 在 HTML 文档中应该避免；
• 在 CSS 文件之中更应避免，以及警惕预加载扫描器的怪异行为(url 不添加引号)。

3. 关注 CSS 与 JavaScript 的顺序：

• 在 CSS 文件后的 JavaScript 仅在 CSSOM 构建完成后才会执行；
• 如果你的 JavaScript 不依赖 CSS，将它放置于 CSS 之前；
• 如果 JavaScript 依赖 CSS，将它放置于 CSS 之后；

4. 仅加载 DOM 依赖的 CSS：这将提高初次渲染的速度使让页面逐步渲染。