dom 的解析渲染流程

解析渲染的过程

• 同步进行的两个操作 1.浏览器将HTML解析成树形的数据结构 2.浏览器将CSS解析成树形的数据结构。
• DOM和CSSOM合并后生成Render Tree（渲染树）
• 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。
• 按照算出来的规则，通过显卡，把内容画到屏幕上。
• 当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。reflow 会从 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。
• 改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

总结常见问题

• css不会影响dom 的解析
• css 会影响dom 的渲染
• 遇到JS文件，页面会停止DOM解析 对于JS，首先要知道JS是单线程执行的，JS可以对DOM的结构进行操作，比如删除、修改、新增dom。所以遇到JS文件，页面会停止DOM解析，如果不停止DOM解析，即一边执行JS，一边解析DOM，解析完DOM之后，发现JS修改了DOM结构，那么之前解析的DOM不就白费了吗？浏览器才不会这么傻呢？
• CSS文件会阻塞JS JS文件还会去读取CSS，所以执行JS还必须等到CSS文件解析完之后，这就相当于CSS文件阻塞了JS