深入了解：http://mp.weixin.qq.com/s/nzLCd-wpo4-vkrxtf8mMcw
加载资源的形式
- 输入url加载html
- 加载html 中的静态资源
加载一个资源的过程
- 浏览器根据DNS服务器得到域名的IP地址
- 向这个IP的机器发送http请求
- 服务器收到 处理并返回http请求
- 浏览器得到返回的内容
- 根据html结构生成DOM Tree
- 根据CSS生成CSSOM
- 将DOM和CSSOM整合形成RenderTree
- 根据RenderTree开始渲染和展示
- 遇到<script>时，会执行并阻塞渲染
DOCTYPE及作用
- DTD（文档类型定义）：告诉浏览器该文档的类型，浏览器根据文档类型来判断用什么引擎来解析渲染
- DOCTYPE：告诉浏览器文档使用哪种DTD（HTML 或 XHTML 规范）-----------》HTML 是用什么版本编写的
浏览器渲染过程
- 使用 HTML 创建文档对象模型（DOM）。
- 使用 CSS 创建 CSS 对象模型（CSSOM）。
- 基于 DOM 和 CSSOM 执行脚本（Script）。
- 合并 DOM 和 CSSOM 形成渲染树（Render Tree）。
- 使用渲染树布局（Layout）所有元素的大小和位置。
-
绘制（Paint）所有元素。
渲染过程.png
reflow(重排) -VS- repaint(重绘)
当DOM变化影响了元素的几何属性（宽、高改变等等）
浏览器此时需要重新计算元素几何属性
并且页面中其他元素的几何属性可能会受影响
这样渲染树就发生了改变，也就是重新构造RenderTree渲染树
这个过程叫做重排（reflow）
如果DOM变化仅仅影响的了背景色等等非几何属性
此时就发生了重绘（repaint）而不是重排
因为布局没有发生改变
影响了布局-》重排
没有影响布局-》重绘
重排必将引起重绘，而重绘不一定会引起重排.
布局 layout
有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置
绘制 painting
按照算出来的规则，通过显卡，把内容画到屏幕上。
