最近看到有的朋友在纠结我们代码和浏览器到底具体发生了什么。
我们从打开浏览器一步一步开始。
- 打开浏览器
- 输入网址并搜索
- 浏览器解析网址并发送到DNS服务器
- 服务器收到信息后将相应的HTML,CSS,JS文件等外部资源发送给浏览器
- 浏览器解析将HTML代码称为DOM树结构
- 将CSS代码解析成CSSOM结构（CSS Object Model）
- 结合DOM和CSSOM构建渲染树
- 生成布局，即将所有渲染树的页面进行合成
- 将布局绘到屏幕
从第5-9步是真正的渲染过程，从5-7这三步非常快。
"生成布局"（flow）和"绘制"（paint）这两步，合称为"渲染"（render）
现在简单讲一下浏览器的渲染过程
首先，创建DOM树：
D： document（文档），没有文档，DOM也就无从谈起，当创建网页就把编写的页面文档转换辰为一个文档对象。
O：对象。对象分为用户自定义对象、内置对象、宿主对象。
M：model（模型），DOM把文档表现成一颗树。其本身就是这个M模型。
例如有这么一段代码：
<html>
<head>
<title>Beautiful page</title>
</head>
<body>
<p>
Once upon a time there was
a looong paragraph...
</p>
<div style="display: none">
Secret message
</div>
<div><img src="..." /></div>
...
</body>
</html>
那么DOM树是完全和HTML标签一一对应的，如下所示：
documentElement (html)
head
title
body
p
[text node]
div
[text node]
div
img
由此可知我们知道DOM树由一个个节点组成。其中有:元素节点、文本节点、属性节点。当构建完DOM树后，就会开始构建渲染树。
而渲染树就不同了，她只有哪些需要绘制出来的元素，所以head 以及被隐藏的div都不会出现在渲染树中。
root (RenderView)
body
p
line 1
line 2
line 3
...
div
img
...
重绘和重排
当页面刚初始化的时候页面就会开始一次重排操作。任何一次对渲染树的修改都会可能导致下面两个操作。
1，重排
就是渲染树的一部分必须要更新 并且节点的尺寸发生了变化。这就会触发重排操作。重排必定会导致重绘。
- 修改DOM
- 修改样式表
- 用户事件（比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等）
2，重绘
部分节点需要更新，但是没有改变他的集合形状，比如改变了背景颜色，这就会触发重绘。
更多请见：阮一峰大神的http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html