谷歌 Web 开发最佳实践手册(4.1.3):阻塞渲染的CSS

【伯乐在线提示】:① 5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。② 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。③ 手册中文版尚不完整,请不要转载,谢谢合作。


【导读】:在默认情况下,CSS会被当做渲染中的阻塞性资源,也就是说浏览器即使已经处理好了某些页面内容,只要CSSOM没有构建好,便不会进行渲染。所以要给你的CSS瘦身,提高传输速度,并使用媒介类型和媒介查询来解除阻塞。

在前部分中我们看到了关键的渲染途径需要同时具备DOM(Document Object Mode,文档对象模型)和CSSOM(CSS Object Model,CSS对象模型)来构造渲染树,这在渲染性能上有一个很重要的含义:HTML和CSS都是渲染过程中的阻塞性资源。HTML很明显,因为没有DOM的话,我们也没有任何东西来渲染,但是对CSS的要求也许并不明显。如果我们尝试渲染一个普通的页面,而不让CSS阻塞渲染过程,那会发生什么呢?

学习重点

  • 默认情况下CSS被视为一种阻塞性渲染资源
  • 媒介类型和媒介查询让我们能把一些CSS资源标记为非阻塞性渲染资源
  • 不管是阻塞性的还是非阻塞性的行为,所有的CSS资源都是通过浏览器下载的

有 CSS 的纽约时报网站                                 无 CSS 的纽约时报网站

NYTimes with CSSNYTimes without CSS

上面的例子展示了NYTimes在使用和不使用CSS时的样子,这表明了为什么直到CSS可用时才渲染 — 缺少CSS的页面实际上是无法使用的。事实上,右边的用户体验通常叫做“Flash of Unstyled Content” (FOUC)。所以结果是,浏览器会在同时具备了DOM和CSSOM时才渲染界面。

CSS是一种阻塞性渲染资源,需要让它尽可能快地下载到客户端,并在第一次渲染的时候进行优化。

然而,假如一些CSS样式只能用于某些特定的条件下怎么办呢?例如,当页面被打印时,或者被投影到大屏幕时。如果这些资源能够不阻塞渲染的话,那就太棒了!

CSS “媒介类型”和“媒介查询”使我们能够处理下列情况:

一个媒介查询由一个媒介类型和0个或多个检查特殊媒介特征的条件的表达式构成。例如,我们的第一个样式声明没有使用提供任何媒介类型和查询,因此它适用于各种情况 — 也就是说,它总是会阻塞渲染。另一方面,第二种样式只被用于当内容被打印时 — 也许你想要重新设置布局或改变字体等等 — 因此当这个样式第一次被加载时,它不会阻塞页面的渲染。最后一个样式声明提供了一个由浏览器来执行的媒介查询:如果条件符合的话,浏览器会在该样式下载完并处理完后才渲染。

使用媒介查询,我们的外观可以定制成特定的使用案例,例如显示和打印,还有一些动态的条件,例如在屏幕方向上的改变,调整大小等等当声明你的样式资源时,一定要仔细注意媒介类型和媒介查询,因为它们会对关键渲染路径有很大的性能影响!

让我们来考虑一些实际的例子:

  • 第一条声明是阻塞渲染的,并且匹配所有情况。
  • 第二条声明也是阻塞渲染的:“screen”是默认的类型,如果你没有指定任何类型,默认会给设置成“screen”。因此,第一条和第二条实际上是一样的。
  • 第三条声明有一个动态的媒介查询,当页面正在加载时会对其进行判断。当页面加载时跟据设备的方向来决定portrait.css是否会阻塞渲染。
  • 最后一条声明只用于页面正在打印时,因此当页面第一次加载到浏览器中时,它不会阻塞渲染。

最后,要记住“阻塞渲染”只与资源是否会阻塞页面在浏览器的初次渲染有关。无论是否阻塞,CSS资源仍然会通过浏览器来下载,只是作为一项非阻塞性的低优先级资源。

收藏 评论

关于作者:shinancao

(新浪微博:@午后的小甜点) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部