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

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

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

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

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

 

渲染树构建

　　

 

 

　　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》