参考链接：
浏览器渲染的那些事(一)
浏览器内部工作原理
浏览器的渲染原理简介
有关网页渲染，每个前端开发者都该知道的那点事
1. 浏览器的主要概念
浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是 HTML，也包括PDF、image 及其他格式。用户用 URI（统一资源标识符）来指定所请求资源的位置。
-
浏览器的主要构成：
浏览器主要构成 User Interface（用户接口）：浏览器中的地址栏、前进后退、书签菜单等。除了网页显示区域以外的都是。
Browser engine（浏览器引擎）：查询与操作渲染引擎的接口。
Rendering engine（渲染引擎）：负责显示请求的内容。
Networking（网络）：用于网络请求。
JavaScript Interpreter（JavaScript 解释器）：用于解析执行 JavaScript 代码。
UI Backend（UI 后端）：绘制基础原件。
Data Persistence（持久层）：数据存储。
2. 浏览器渲染流程
- 浏览器解析 HTML/SVG/XHTML 生成 DOM 树；
- 浏览器解析 css 生成 css规则树（CSS Rule Tree）；
- 浏览器解析JavaScript，主要通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree；
- 解析完成后，浏览器引擎通过 DOM Tree 和 CSS Rule Tree 构造 Render Tree；
- 构建好 Render Tree 会执行 布局 过程，确定节点的确切位置
- 遍历Render Tree ，使用UI后端层 绘制 每个节点。
2.1 HTML解析
- 为了更好的用户体验，浏览器不会等到所有的 HTML 都解析完成之后再去构建和布局 Render Tree，而是解析完一部分内容就显示一部分内容，同时还可能在通过网络下载其余内容。
- 解析输出的 DOM 树，是由 DOM 元素及属性节点组成的。DOM 是文档对象模型的缩写，它是 HTML 文档的对象表示，作为 HTML 元素的外部接口供JS等调用。
- 浏览器容错：浏览器具有错误处理的能力，无效的不合法的标签浏览器会在解析的过程中修复这种错误。
- 解析结束时文档状态被设置为完成，同时会触发一个 load事件。
2.2 css 解析
解析 css 生成 css规则树（CSS Rule Tree）。
2.3 渲染树 Render Tree
- Render Tree 主要负责布局并将自身及其子元素绘制出来。
- 在渲染树中，每一段文本字符串都表现为独立的渲染器。每一个渲染对象都包含与之对应的 DOM 对象，或者文本块，还加上计算过的样式。
- 渲染树由元素显示序列中的可见元素组成，它是文档的可视化表示，构建这棵树是为了以正确的顺序绘制文档内容。
- 呈现树与 DOM 元素相对应，但不是一一对应。非可视化的 DOM 元素就不会插入呈现树，例如 head 元素。display 为 "none" 的元素也不会显示在呈现树中（visibility:hidden的元素仍会显示）。
2.4 布局 Render Tree
对渲染树上的每个元素，计算它的坐标，确定元素的位置，称之为布局。浏览器采用一种流方法，布局一个元素只需通过一次，但是表格元素需要通过多次。
2.5 绘制 Render Tree
将渲染树上的元素展示在浏览器里，这一过程称为“painting”。
2.6 重排、重绘
当用户与网页交互，或者脚本程序改动修改网页时，会发生重排或者重绘。
2.6.1 重绘
当改变那些不会影响元素在网页中的位置的元素样式时，譬如background-color(背景色)， border-color(边框色)， visibility(可见性)，浏览器只会用新的样式将元素重绘一次(这就是重绘，或者说重新构造样式)。
2.6.2 重排
当改变影响到文本内容或结构，或者元素位置时，重排或者说重新布局就会发生。
-
触发重排的操作：
- DOM操作（元素添加，删除，修改，或者元素顺序的改变）;
内容变化，包括表单域内的文本改变;
CSS属性的计算或改变;
添加或删除样式表;
更改“类”的属性;
浏览器窗口的操作（缩放，滚动）;
伪类激活（悬停）。
并不是所有会导致重绘重排的操作浏览器都会马上执行，浏览器的优化技巧是，在运行几段 JavaScript 代码时，浏览器会 缓存 这些改变，在代码运行完毕后再将这些改变经一次通过加以应用。即将多次重排重绘一次执行，这叫做 异步 reflow 或增量异步 reflow。
强制性重排：例如在改变元素的属性后马上就访问该属性，浏览器就会马上执行重排而不会攒到一起重排。
频繁的重绘和重排可能会带来页面的性能问题，因此需要进行优化渲染，提升页面性能。
2.7 优化渲染
不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className。
把 DOM 离线后修改，减少 DOM 操作：
使用 documentFragment 对象在内存里操作DOM；
先把 DOM 给 display:none(有一次 reflow )，然后一次性修改完再把他显示出来。
clone 一个 DOM 结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。
不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性，而应该在最开始就把这个属性赋给一个变量，在循环里访问这个变量就可以避免循环查找 DOM 树。
尽可能的修改层级比较低的 DOM 。当然，改变层级比较底的 DOM 有可能会造成大面积的 reflow，但是也可能影响范围很小。
为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
尽量简化和优化 CSS 选择器
