什么是DOM和CSSOM?
浏览器渲染页面前需要先构建DOM树和CSSOM树。
转换步骤: Bytes → characters → tokens → nodes → object model。
HTML标签被转换成文档对象模型(Document Object Model)。
CSS模型被转换成CSS对象模型(CSS Object Model)。
DOM和CSSOM是相互独立的结构。
<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>
上面的结构会被转换成如下DOM树
![v2-cc3a2a29937364a40360717171744b03_b.png](https://i-blog.csdnimg.cn/blog_migrate/29775f700f0a789caa0040a668b45825.png)
字节转换成字符 -> 标签 -> 节点 -> DOM树
获取CSS变成浏览器可以操作的对象的过程,跟HTML差不多
![v2-490c862dc09c29bf0015520ccaa76140_b.png](https://i-blog.csdnimg.cn/blog_migrate/15be353faed0f77600b66bf84832b6b7.png)
![v2-04461cf542398e41a930be8e4ada6e60_b.png](https://i-blog.csdnimg.cn/blog_migrate/bea70f32e7a87f2e2e7ccdcc223722e2.png)
字节转换成字符 -> 标签 -> 节点 -> CSSOM树
它们对页面性能有什么影响?
构建DOM和CSSOM都是要花时间的,好消息是这些都是浏览器自动处理的,开发者能做的不多。也就是说,优化时只要针对性的做几项就可以了。
参考链接:
https://www.w3.org/TR/cssom-1/
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model
https://varvy.com/performance/cssom.html