参考原文： 网站性能优化—CRP
一个普通的页面，里面包含一些文本和一张图片，浏览器是如何处理这个页面的呢？
第一步：构建DOM树
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>
image.png
- 转换：浏览器从磁盘或网络读取HTML的原始字节，然后根据指定的文件编码格式（例如 UTF-8）将其转换为相应字符
- 令牌化：浏览器把字符转化成W3C HTML5 标准指定的各种确切的令牌，比如"<html>"、"<body>"以及其他在尖括号内的字符串。每个令牌都有特殊的含义以及它自己的一套规则
- 词法分析：生成的令牌转化为对象，这个对象定义了它们的属性及规则
-
DOM构建：最后，由于HTML标记定义了不同标签之间的关系（某些标签嵌套在其他标签中），创建的对象在树状的数据结构中互相链接，树状数据结构也捕获了原始标签定义的父子关系：HTML对象是body对象的父对象，body是p对象的父对象等等
image.png
DOM树捕获了文档标记的属性及关系
第二步：CSS对象模型（CSSOM）
当浏览器构建上述网页DOM的时候，在head里面碰到一个link标签，这个标签引用了一个外部的CSS样式表：style.css。浏览器预测会需要这个资源来渲染页面，因此会立即发出一个该资源的请求。
与HTML一样，我们需要将收到的 CSS 规则转换为浏览器可以理解、能够处理的东西。
image.png
第三步：构建渲染树
将 DOM 树和 CSSOM 树融合成渲染树。
第四步：布局
根据渲染树进行布局，计算每个节点的几何信息
它精确地捕获了每个元素在视口中的准确位置及尺寸大小：所有相对度量单位都被转换为屏幕上的绝对像素。
第五步：绘制
相当于画画的最后一步，画笔，颜料都准备好了，画布的布局怎么画都构思好了，最后一步就是一气呵成画出来。
我们已经知道了哪些节点是可见的以及它们的计算样式和几何信息，然后我们就可以把这些信息传送到最后一个阶段，即把渲染树中的每一个节点都转化到屏幕上实际的像素点。
网友评论