Yukun的blog

前端性能优化关键词：DOM、CSSOM

什么是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树
full-process
字节转换成字符 -> 标签 -> 节点 -> DOM树
获取CSS变成浏览器可以操作的对象的过程，跟HTML差不多
cssom-construction
cssom-tree
字节转换成字符 -> 标签 -> 节点 -> 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

Yukun