黑马程序员技术交流社区

标题: CSS [打印本页]

---

作者: XuZhenXiang    时间: 2019-1-3 13:41
标题: CSS
CSS 是页面渲染的关键因素之一，（当页面存在外链 CSS 时，）浏览器会等待全部的 CSS 下载及解析完成后再渲染页面。关键路径上的任何延迟都会影响首屏时间，因而我们需要尽快地将 CSS 传输到用户的设备，否则，（在页面渲染之前，）用户只能看到一个空白的屏幕。

最大的问题是什么？
广义而言，CSS 是（渲染）性能的关键，这是由于：

浏览器直到渲染树构建完成后才会渲染页面；
渲染树由 DOM 与 CSSOM 组合而成；
DOM 是 HTML 加上（同步）阻塞的 JavaScript 操作（DOM 后的）结果；
CSSOM 是 CSS 规则应用于 DOM 后的结果；
使 JavaScript 非阻塞非常简单，添加 async 或 defer 属性即可；
相对而言，要让 CSS 变为异步加载是比较困难的；
所以记住这条经验法则：（理想情况下，）最慢样式表的下载时间决定了页面渲染的时间。
基于上述考虑，我们需要尽快构建 DOM 与 CSSOM。一般情况下，DOM 的构建是相对较快，（当请求某个页面时，）服务器响应的首个请求是 HTML 文档。但一般 CSS 是作为 HTML 的子资源而存在，因此 CSSOM 的构建通常需要更长的时间。

在这篇文章中，会讲述 CSS 为何是网络瓶颈（无论是对于它自己或是其他资源），该如何突破它，从而缩短关键路径以减少首次渲染前的等待时间。

使用关键 CSS
如果条件允许，缩短渲染前等待时间最有效的方式就是使用 Critical CSS （关键 CSS）模式：找出首次渲染所需的样式（通常是首屏相关的样式），将它们内联到 标签中，其他样式则通过异步的方式进行加载。

虽然这十分有效，但实施起来却并不容易，比如：高度动态化的网站（译者注：如 SPA）通常难以提取首屏相关的样式、提取的过程需要自动化、需要对首屏不同元素显示或隐藏的状态作出假设、某些边界情况难以处理以及相关工具仍未成熟等问题。如果你的项目相当庞大或是有历史包袱，这将变得更为复杂。

根据媒体类型拆分代码
如果在项目组难以执行关键 CSS 策略，可以尝试根据媒体查询拆分 CSS 文件，这也是一种可靠的策略。执行此策略后，浏览器表现如下：

以非常高的优先级下载符合当前上下文（设备、屏幕尺寸、分辨率、方向等）的 CSS 文件，阻塞关键路径；
以非常低的优先级下载不符合当前上下文的 CSS 文件，不会阻塞关键路径。
浏览器基本上能将未命中媒体查询的 CSS 文件延迟下载。
避免在 CSS 文件中使用 @import
为缩短渲染等待时间而努力的下一项任务非常简单：避免在 CSS 文件中使用 @import

如果了解 @import 的原理，那应该清楚它的性能并不高，使用它会阻塞渲染更长时间。这是因为我们在关键路径上创造了更多（队列式）的网络请求：

下载 HTML；
请求并下载依赖的 CSS；
（下载及解析完成后，本该是构造渲染树，然而；）
CSS 依赖了其他的 CSS，继续请求并下载 CSS 文件；
构造渲染树。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2