浏览器渲染过程
几个概念
- DOM Tree：浏览器通过 DOM 将 HTML 页面进行解析，并生成
HTML tree树状的数据结构和对应访问方法 - CSS Rule Tree：浏览器通过 DOM 将 css 进行解析，并生成
CSS Rule Tree树状的数据结构 - Render Tree：根据 可视化节点（DOM） 和 css 样式（CSSOM） 合并后生成的树
- layout：有了
Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置 - painting：按照算出来的规则，通过显卡，把内容画到屏幕上
- reflow：当
Render Tree中部分或全部节点, 因元素的尺寸、布局、隐藏等改变而需要重新构建，计算它们在设备视口 (viewport) 内的确切位置和大小，浏览器重新渲染的过程称为 回流 - repaint：当页面中元素样式（例如：
color、background-color等）的改变并不影响它周围或内部布局（尺寸、大小等）时，浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘
注意
display为none的元素在页面不需要渲染，渲染树构建不会包括这些节点；但visibility为hidden的元素会在渲染树中。因为display为none会脱离文档流，visibility为hidden虽然看不到，但类似与透明度为0，其实还在文档流中，还是有渲染的过程。
display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。
渲染过程
webkit的主要流程图
渲染过程
- 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
- 将CSS解析成 CSS Rule Tree 。
- 根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
- 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。
- 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。
注意
上述渲染过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
