1.背景介绍

浏览器渲染页面的大致过程：

从浏览器地址栏的请求链接开始，浏览器通过DNS解析查到域名映射的IP地址，成功之后浏览器端向此IP地址取得连接，成功连接之后，浏览器端将请求头信息 通过HTTP协议向此IP地址所在服务器发起请求，服务器接受到请求之后等待处理，最后向浏览器端发回响应，此时在HTTP协议下，浏览器从服务器接收到 text/html类型的代码，浏览器开始显示此html，并获取其中内嵌资源地址，然后浏览器再发起请求来获取这些资源，并在浏览器的html中显示

2.知识剖析

浏览器解析的大概的工作流程可以归纳为以下几个步骤

1. 用户输入网址（假设是个 HTML 页面，第一次访问，无缓存情况），浏览器向服务器发出HTTP请求，服务器返回 HTML 文件； （善用缓存，减少HTTP请求，减轻服务器压力）

2. 浏览器载入 HTML 代码，发现 head 内有一个 link 引用外部 CSS 文件,则浏览器立即发送CSS文件请求，获取浏览器返回的CSS文件；  （CSS文件合并，减少HTTP请求）

3. 浏览器继续载入 HTML 中 body 部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染页面了；CSS文件需要放置最上面，避免网页重新渲染。

4. 浏览器在代码中发现一个 img 标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；（图片文件合并，减少HTTP请求）

5. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；  （最好图片都设置尺寸，避免重新渲染）

6. 浏览器发现了一个包含一行 JavaScript 代码的 script  标签，会立即运行该js代码；（script最好放置页面最下面）

7.js脚本执行了语句，它令浏览器隐藏掉代码中的某个 div,突然就少了一个元素，浏览器不得不重新渲染这部分代码；  （页面初始化样式不要使用js控制）

8.终于等到了 /html 的到来，浏览器泪流满面……

9. 当用户点了一下界面中的“换肤”按钮，JavaScript 让浏览器换了一下 link 标签的 CSS 路径；

10. 浏览器召集了在座的各位 div span ul li 们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

浏览器每天就这么来来回回跑着，要知道不同的人写出来的 HTML 和 CSS 代码质量参差不齐，说不定哪天跑着跑着就挂掉了。

好在这个世界还有这么一群人——页面重构工程师，平时挺不起眼，也就帮视觉设计师们切切图啊改改字，其实背地里还是干了不少实事的。

3.常见问题

什么是repain（重绘）和reflow（回流）？

4.解决方案

说到页面为什么会慢？那是因为浏览器要花时间、花精力去渲染，尤其是当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染， 该过程称为reflow（回流）。

reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。

repaint 的速度明显快于 reflow（在IE下需要换一下说法，reflow 要比 repaint 更缓慢）。

为什么reflow 要比 repaint 更缓慢？

repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。

reflow(回流)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

注意：回流必将引起重绘，而重绘不一定会引起回流。

5.编码实战

6.扩展思考

引起repain（重绘）和reflow（回流）的一些操作？

reflow 的成本比 repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。

当你增加、删除、修改 DOM 结点时，会导致 reflow 或 repaint。

当你移动 DOM 的位置，或是搞个动画的时候。

当你修改 /删除CSS 样式的时候。

当你 Resize 窗口的时候，或是滚动的时候。

当你修改网页的默认字体时。

当你设置 style 属性的值 （Setting a property of the style attribute）。

注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。

7.参考文献

参考一：reflow（回流）和repaint（重绘）及其优化

参考二：浏览器加载渲染网页过程解析？

8.更多讨论

如何减少repain（重绘）和reflow（回流）？

reflow是不可避免的，只能将reflow对性能的影响减到最小,给出下面几条建议：

1. 不要一条一条地修改 DOM 的样式。通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow。所以最好通过设置class的方式，这样可以将多次改变样式属性的操作合并成一次操作。

2. 让要操作的元素进行”离线处理”，处理完后一起更新；

- 使用DocumentFragment进行缓存操作,引发一次回流和重绘；

var fragment = document.createDocumentFragment();

fragment.appendChild(document.createTextNode('keenboy test 111'));

fragment.appendChild(document.createElement('br'));

fragment.appendChild(document.createTextNode('keenboy test 222'));

document.body.appendChild(fragment);

- 使用display:none技术，只引发两次回流和重绘;

原理：由于display属性为none的元素不在渲染树中，对隐藏的元素操 作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。

3.设置元素的position为absolute或fixed；

元素脱离标准文档流，也从DOM树结构中脱离出来，在需要reflow时只需要reflow自身与下级元素。

4.不要用tables布局；

tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。

5.避免使用CSS的JavaScript表达式，如果css里有expression，每次都会重新计算一遍。

鸣谢