从CRP(关键渲染路径)优化中谈浏览器渲染原理

前言:

  1. 该文中涉及的一切问题,只在页面首次渲染条件下讨论,因后续产生的DOM和CSSOM的更新及布局绘制不在本文范围内;
  2. 本文参考Google的Critical Rendering Path部分,做了选择性的摘录,以及自己的思考和总结,若对原文感兴趣的可以点击前往。如有表述不当的地方,还请指出

1. CRP

CRP,即critical rendering path的缩写,中文译文关键渲染路径。具体是什么呢?

浏览器从收到 HTML、CSS 和 JavaScript 字节到对其进行必需的处理,从而将它们转变成渲染的像素这一过程中有一些中间步骤,这些必要的步骤,就是CRP。

注意:
CRP的起点发生在新页面,为从服务器获得HTML文件的那一刻;故以下几项和CRP没有半毛钱全系: 通过控制台添加节点、hover, active等使样式发生变化、用JS写成的交互性渲染操作之类的操作。
CRP的终点是完成浏览器内像素的渲染,但之后的工作不属于CRP: 例如 1. 不会对页面的初始渲染产生影响的js代码的运行;2. 与服务器进行的后续数据传输;3. 甚至不符合当前的媒体查询条件的CSS文件的加载(因为这些样式对当前来说是不起作用的,不符合“必需”要求);

问题来了,凭什么说例子中的几项不在CRP中,即:如何判别某一事项不会影响页面的初次渲染成像呢?那就需要谈及浏览器的渲染流程。

2. 浏览器的渲染原理

2.1 对象模型(OM)的构建

2.1.1 文档对象模型(DOM)

虽然家喻户晓,但还是说一下吧:

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Pathtitle>
  head>
  <body>
    <p>Hello <span>web performancespan> students!p>
    <div><img src="awesome-photo.jpg">div>
  body>
html>

一串HTML/SVG/XHTML等标记语言的代码传入浏览器后,会经过如下步骤:
从CRP(关键渲染路径)优化中谈浏览器渲染原理_第1张图片
字节 -> 字符 -> 令牌(标记) -> 节点 -> 文档对象模型

link 和 script 也是属于DOM的,它们也是HTML元素,也是节点

2.1.2 CSS对象模型(CSSOM)

当在读取HTML遇到linkstyle时,会返回相应的CSS代码,例如:

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }

此时浏览器亦会参考DOM的流程执行以下步骤:
从CRP(关键渲染路径)优化中谈浏览器渲染原理_第2张图片
注意这并非实际的最终样式表,因为每个浏览器会有自身的默认样式(User Agent)

2.2 渲染树创建过程中的阻塞

2.2.1 CSS为阻塞资源

渲染树由DOM和CSSOM共同构建,故意味着浏览器在将CSSOM构建完成前,不会完成渲染树的构建: CSS被视为阻塞渲染的资源

注意:当css资源不符合当前媒体查询条件时,可不被视为阻塞资源,即该CSS资源不参与CRP,为非必要的

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

print.css 和 other.css 只有在打印模式/页面宽度大于40em时才会参与CSSOM的构建,但仍然会被浏览器下载

以下为纯HTML 和 掺杂CSS阻塞的HTML 的渲染流程的区别
1. 纯HTML

从CRP(关键渲染路径)优化中谈浏览器渲染原理_第3张图片
2. 只含CSS

从CRP(关键渲染路径)优化中谈浏览器渲染原理_第4张图片

2.2.2 JavaScript的阻塞

JavaScript, HTML和CSS之间有着以下依赖关系
1. 当构建DOM树时,若遇到

你可能感兴趣的:(页面性能)