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

最新推荐文章于 2023-09-26 21:48:37 发布

PlayerYK

最新推荐文章于 2023-09-26 21:48:37 发布

阅读量283

点赞数

文章标签： html javascript js vue java

本文链接：https://blog.csdn.net/o_oak/article/details/109640997

版权

什么是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树

字节转换成字符 -> 标签 -> 节点 -> DOM树
获取CSS变成浏览器可以操作的对象的过程，跟HTML差不多

字节转换成字符 -> 标签 -> 节点 -> 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

PlayerYK

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端性能优化关键词：DOM、CSSOM

什么是DOM和CSSOM？浏览器渲染页面前需要先构建DOM树和CSSOM树。转换步骤： Bytes → characters → tokens → nodes → object model。HTML标签被转换成文档对象模型（Document Object Model）。CSS模型被转换成CSS对象模型（CSS Object Model）。DOM和CSSOM是相互独立的结构。<html>...
复制链接

扫一扫