几个概念
1. DOM:
浏览器将HTML解析成树形的数据结构（DOM 树）。
2. CSSOM:
浏览器将CSS解析成树形的数据结构。
3. Render Tree:
DOM和CSSOM合并后生成Render Tree。（虽然有了Render Tree，但并不知道节点的位置，需要依靠接下来的layout）
4. layout:
计算 Render Tree 每个节点在屏幕中的具体位置(宽高、颜色等)。
5. painting:
通过显卡，把 layout 后的节点内容分别显示到屏幕上
6.reflow:
元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。
reflow 几乎是无法避免的。
树状目录的折叠、展开（实质上是元素的显示与隐藏）,鼠标滑过、点击……等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。
注：
- display:none会触发reflow;
- visibility:hidden只会触发repaint，因为没有发现位置变化。
7.repaint:
改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
浏览器渲染主流程
1.浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
2. 将CSS解析成 CSSOM 。
3. 根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
4. 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。
5. 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。
DOM 和 CSSOM 构建的具体流程
DOM 和 CSSOM 都是以 "Bytes → characters → tokens → nodes → object model "这样的方式生成最终的数据
1、 当服务器返回一个HTML文件给浏览器的时候，浏览器接受到的是一些字节数据。
2、 然后浏览器根据HTTP响应中的编码方式（通常是utf-8），解析字节数据，得到一些字符。
3、 浏览器根据DTD中的对元素（标签）的定义，对接受到的字符进行语义化(token)。
4、 接着，浏览器使用这些语义块(token)创建对象，形成节点。
5、 然后HTML解析器就会从HTML文件的头部到尾部，一个个地遍历这些节点。当这些节点是普通节点的话，HTML解析器就会将这些节点加入到DOM树中。当这些节点是JS代码的话，HTML解析器就会将控制权交给JS解析器。如果这些节点是CSS代码的话，HTML解析器就会将控制权交给CSS解析器。
不过，当外联的JS代码和CSS代码还没从服务器传到浏览器的时候，这个时候如果DOM树上有可视元素的话，浏览器通常会选择在这个时候，将一些内容提前渲染到屏幕上来。
6、 当HTML解析器读到最后一个节点的时候，整个DOM树也构建完成了，这个时候就会触发domContentloaded事件。而很多JS库（像JQ）通常会在这个时候有所反应的。
至此，DOM树就全部构建完成了。
DTD(Document Type Definition)
即文档类型定义
是一系列的语法规则，用来定义XML或者(X)HTML文件类型。浏览器会使用DTD来判断文本类型，决定使用何种协议来解析，以及切换浏览器模式。（说白了就是：DTD就是告诉浏览器，我是什么文档类型，你要用什么协议来解析我）
DOCTYPE：用来声明DTD规范。
一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出现一些差错。（即，DOCTYPE就是用来声明DTD的）
常见的DOCTYPE声明：
- strict html4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- transitional html4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
- frameset html4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- strict xhtml1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XTHML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- transitional xhtml1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- frameset xhtml1.0
<!DOCTYPE html PUBIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
