浏览器渲染
29 Sep 2015浏览器如何渲染页面
浏览器解析
- 浏览器通过请求的URL进行域名解析， 向服务器发送请求，接收文件（比如html,css,js,image,audio等等）
- HTML文件加载后，开始绘制文档树(DOM tree）
- CSS样式加载后，开始绘制和构建CSS RUle tree
- Javascript脚本文件加载后，通过DOM API和CSS DOM API 来操作文档树和CSS Rule tree
浏览器渲染
- 浏览器引擎通过 DOM Tree 和 CSS Rule Tree 构建 Rendering Tree
- Rendering Tree 并不与 DOM Tree 对应，比如像 <head> 标签内容或带有 display: none; 的元素节点并不包括在 Rendering Tree 中 。
- 通过 CSS Rule Tree 匹配 DOM Tree 进行定位坐标和大小，是否换行，以及 position、overflow、z-index 等等属性，这个过程称为 Flow 或 Layout 。
- 最终通过调用Native GUI 的 API 绘制网页画面的过程称为 Paint 。
Repaint
当一个元素发生改变的时候，但是没有不会改变位置上的属性，比如改变了一个background-color，color，visibility，font等一些无关位置的属性时。浏览器会为新的样式重绘该元素，这个过程叫做Repaint(重绘）
Reflow
当一个元素的在html中的位置，宽度，高度以及影响页面布局的属性发生改变是，这些属性的改变可能会导致页面中的元素重新排列，这个过程叫做Reflow(回流)
导致Reflow的几个因素
- 增加，删除，改变DOM节点
- 增加，删除’class’样式
- 元素尺寸的改变
- 文本内容的改变
- 浏览器resize尺寸的改变
- 动画效果以及:hover的激活
- 等等