一、浏览器的渲染包括以下几个步骤：
1、构建DOM树：浏览器从上向下解析HTML文档并生成DOM树；
2、构建CSSDOM：浏览器解析css样式，生成CSSDOM。包含了HTML节点以及这些节点的样式；
3、解析JS脚本：加载并执行JS代码，这一过程会阻塞HTML文档的解析，因此一般将script标签放在最后；
4、构建渲染树（Render tree）：根据DOM树和CSSDOM树生成Render tree，Rend tree即是一系列的矩形对象，包含了字体颜色尺寸等；
5、开始布局（Layout）：根据渲染树将节点树的每一个节点布局在屏幕上对应的具体位置，这一过程会发生回流（reflow）；
6、绘制（Painting）：绘制所有的节点，在浏览器上展示出来，这一过程会发生重绘（repaint）。
二、回流和重绘
1、回流
当渲染树（Render tree）中的一部分或者全部因为尺寸、位置、隐藏等的改变需要重新构建时这一过程称为回流；
那些操作会引起回流呢？通常我们改变的元素的尺寸、位置、添加删除等方式操作元素、以及窗口大小的改变都会引起回流。因此如果不注意。很有可能会导致浏览器好不容易渲染好的树又推倒重来。这是一个费时又费力的过程。 因此我们应当尽量避免回流操 作。
2、重绘
当我们改变元素的视觉样式，而不改变尺寸时，会发生重绘。
另：回流一定会导致重绘，而重绘不一定不会导致回流。
三、如何优化性能
自己总结了要注意的几点：
1、HTML文档结构嵌套要少；
2、减少通过JS修改元素的样式等，尽量通过className和cssText；
3、将修改样式的JS代码都放在一起，不要上面修改了样式，下面又执行其他的JS代码，下面再修改。这样会导致多次回流，例如：
// 不好的： xx.style.marginTop = 30 + 'px';// 1次重绘和回流 var marfinLeft = parseInt(xx.style.marginLeft);// 执行js代码 xx.style.marginLeft = marginLeft + 10 + 'px';// 2次重绘和回流 // 好的： xx.style.marginTop = 30 + 'px'; xx.style.marginLeft = marginLeft + 10 + 'px';// 1次重绘和回流 var marfinLeft = parseInt(xx.style.marginLeft);// 执行js代码