专栏首页Super 前端前端优化--阻塞渲染的CSS

前端优化--阻塞渲染的CSS

接上一篇「关键渲染路径」,浏览器大致经过了:构建 DOM 树、构建 CSSOM 树、构建渲染树、布局、绘制五个步骤。

这里主要简述,构建 CSSOM 相关!

默认情况下,CSS 被视为阻塞渲染的资源,这意味着浏览器将不会渲染任何已处理的内容,直至 CSSOM 构建完毕。请务必精简您的 CSS,尽快提供它,并利用媒体类型和查询来解除对渲染的阻塞。

渲染树构建(可查看上篇文章) 中,我们看到关键渲染路径要求我们同时具有 DOM 和 CSSOM 才能构建渲染树。这会给性能造成严重影响:HTML 和 CSS 都是阻塞渲染的资源。 HTML 显然是必需的,因为如果没有 DOM,我们就没有可渲染的内容,但 CSS 的必要性可能就不太明显。如果我们在 CSS 不阻塞渲染的情况下尝试渲染一个普通网页会怎样?

  • 默认情况下,CSS 被视为阻塞渲染的资源。
  • 我们可以通过媒体类型和媒体查询将一些 CSS 资源标记为不阻塞渲染。
  • 浏览器会下载所有 CSS 资源,无论阻塞还是不阻塞。

上例展示了纽约时报网站使用和不使用 CSS 的显示效果,它证明了为何要在 CSS 准备就绪之前阻塞渲染,— 没有 CSS 的网页实际上无法使用。右侧的情况通常称为“内容样式短暂失效”(FOUC)。浏览器将阻塞渲染,直至 DOM 和 CSSOM 全都准备就绪。

CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端,以便缩短首次渲染的时间。

不过,如果我们有一些 CSS 样式只在特定条件下(例如显示网页或将网页投影到大型显示器上时)使用,又该如何?如果这些资源不阻塞渲染,该有多好。

我们可以通过 CSS“媒体类型”和“媒体查询”来解决这类用例:

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

媒体查询由媒体类型以及零个或多个检查特定媒体特征状况的表达式组成。例如:

第一个样式表声明未提供任何媒体类型或查询,因此它适用于所有情况,也就是说,它始终会阻塞渲染。 第二个样式表则不然,它只在打印内容时适用 — 或许您想重新安排布局、更改字体等等,因此在网页首次加载时,该样式表不需要阻塞渲染。 最后一个样式表声明提供由浏览器执行的“媒体查询”:符合条件时,浏览器将阻塞渲染,直至样式表下载并处理完毕。

通过使用媒体查询,我们可以根据特定用例(比如显示或打印),也可以根据动态情况(比如屏幕方向变化、尺寸调整事件等)定制外观。声明样式表时,请密切注意媒体类型和查询,因为它们将严重影响关键渲染路径的性能。

让我们考虑下面这些实例:

<link href="style.css"    rel="stylesheet">
<link href="style.css"    rel="stylesheet" media="all"> 
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css"    rel="stylesheet" media="print">
  • 第一个声明阻塞渲染,适用于所有情况。
  • 第二个声明同样阻塞渲染:“all”是默认类型,如果您不指定任何类型,则隐式设置为“all”。因此,第一个声明和第二个声明实际上是等效的。
  • 第三个声明具有动态媒体查询,将在网页加载时计算。根据网页加载时设备的方向,portrait.css 可能阻塞渲染,也可能不阻塞渲染。
  • 最后一个声明只在打印网页时应用,因此网页首次在浏览器中加载时,它不会阻塞渲染。

最后,请注意“阻塞渲染”仅是指浏览器是否需要暂停网页的首次渲染,直至该资源准备就绪。无论哪一种情况,浏览器仍会下载 CSS 内容,只不过不阻塞渲染的资源优先级较低罢了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端优化--关键渲染路径

    优化关键渲染路径(Critical Rendering Path)是指优先显示与当前用户操作有关的内容。

    奋飛
  • JavaScript设计模式--模板方法模式

    模板方法是基于继承的设计模式,可以很好的提高系统的扩展性。 java中的抽象父类、子类 模板方法有两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子...

    奋飛
  • Git提交信息规范化

    message信息格式采用目前主流的Angular规范,这是目前使用最广的写法,比较合理和系统化,并且有配套的工具。

    奋飛
  • Unity-摄像机

    远近裁剪面被称定义为摄像机视锥。在视锥之外的对象将不会被渲染,这个过程被称为视锥剔除,无论在游戏中是否使用遮挡剔除,都会有是视锥剔除的过程。 有的时候我们想更...

    祝你万事顺利
  • CSS实现水平|垂直居中漫谈

    利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right mar...

    晚晴幽草轩轩主
  • vray渲染速度慢的影响因素和提升技巧-Renderbus

    模型因素 较为复杂的模型(特别是存在较多细小转角的模型),会耗费更多的渲染计算时间。模型的复杂程度对渲染的影响较大,这个问题可以说是“硬件伤”。

    Renderbus云渲染农场
  • V8带来的JS性能优化

    二、解释型语言:支持动态类型,弱类型,在程序运行的时候才进行编译,而编译前需要确定变量的类型,效率比较低,对不同系统平台有较大的兼容性。

    Cloud-Cloudys
  • 大数据能为穹顶之下的环保做什么?

    原创2015-03-09罗超 《穹顶之下》令人印象深刻的一点,是keynote(幻灯片)。通过可视化报表,柴静团队向观众传递雾霾问题的严峻性、雾霾的成因等等。K...

    罗超频道
  • 干货,一文带你超详细了解 Filter 的原理及应用

    1) Filter(过滤器) 的基本功能是对 Servlet 容器调用 Servlet (JSP)的过程进行拦截, 从而在 Servlet 处理请求前和Serv...

    java架构师
  • 产品动效设计全方位科普手册,超级全面的分析!

    本文主要讲述了为什么做动效,好的动效设计的标准是什么,如何做动效设计,以及如何使自己设计的动效完美落地。

    宇相

扫码关注云+社区

领取腾讯云代金券