CSS会阻塞渲染树的构建，不阻塞DOM构建，但是在CSSOM构建完成之前，页面不会开始渲染（一片空白），CSSOM构建完成后，页面将会显示出内容。

DOM（Document Object Model）是一个与语言无关的、用来操作XMl和HTML文档的应用程序接口。在浏览器环境下，我们是通过Javascript来实现对DOM的操作。而针对DOM进行频繁操作会严重影响前端的体验和性能

DOM 就是描述html节点关系的图谱

DOM提供获取元素的方法和之间关系属性以及操作元素的方法

 

渲染树构建

　　

前端性能----页面渲染（DOM）_javascript

 

 

　　1、从 DOM 树的根节点开始遍历每个可见节点。

　　2、某些节点不可见（例如脚本标记、元标记等），因为它们不会体现在渲染输出中，所以会被忽略。
　　　  某些节点通过 CSS 隐藏，因此在渲染树中也会被忽略，例如，上例中的 span 节点---不会出现在渲染树中，---因为有一个显式规则在该节点上设置了“display: none”属性。

　　3、对于每个可见节点，为其找到适配的 CSSOM 规则并应用它们。

　　4、发射可见节点，连同其内容和计算的样式。

 

DOM优化方案

　　精简DOM结构、减少DOM的回流和重绘（详解的介绍见链接：​​https://www.jianshu.com/p/17aaf575a54e​​）

  • 减少DOM访问次数
  • 多次访问同一DOM，应该用局部变量缓存该DOM
  • 尽可能使用querySelector，而不是使用获取HTML集合的API
  • 注意重排和重绘
  • 使用事件委托，减少绑定事件的数量
  • 更多内容，可以阅读《高性能JavaScript》

1.作者：Syw

2.本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

3.如果文中有什么错误，欢迎指出。以免更多的人被误导。