页面重绘与回流

渲染：就是把浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程。

浏览器解析HTML的基本过程：

1   用户输入网址，浏览器向服务器发出请求，服务器返回html文件

2   浏览器载入html代码，发现标签内有一个标签引用外部css文件

3 浏览器又发出css文件的请求，服务器返回这个css文件

4 浏览器继续载入html中的部分的代码，并且css文件已经拿到手了，可以渲染页面

5浏览器在代码中发现一个重绘与回流标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码

6 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来渲染这部分代码

7  浏览器发现了一个包含一行javascript代码的script标签，赶快运行它

8 javascript脚本执行了这条语句，命令浏览器隐藏代码中某个，杯具了，突然就少了一个元素，浏览器不得不重新渲染这部分代码

9   终于等到的到来，浏览器泪流满面 

10   等等，还没完，用户点了一个界面中的“换肤”按钮，javascript让浏览器换了一个标签中的css的路径

11 浏览器召集了在座的各位

• "大伙需要收拾下行李，咱得重新来过"，浏览器向服务器请求了新的css文件，重新渲染页面

当页面的布局发生变化时，浏览器会回过头来重新渲染，这就是页面变慢的原因，当一个点的变化影响了布局，倒回去重新渲染，这个倒回去的过程称为回流（reflow）

减少reflow: 可以给图片设定好宽度和高度，这样就可以把图片的占位面积预定好

repaint(重绘)：当只改变背景颜色，文字颜色，边框颜色，而不修改页面布局时，浏览器就会repaint，repaint的速度明显比reflow的速度快。