【重绘与重排】

1、DOM

DOM全称 Document Object Model，即文档对象模型，它允许脚本(js)控制Web页面、窗口和文档。对象你知道吧，一个人就是一个对象。那么动物呢，一条狗也是对象，作为高大尚的人怎么可以和动物扯在一块，这个时候，是不是就要分类啦比如人类呀，动物啦，植物啦，等等… 所以就有了w3c里面介绍的那样咯，DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

2、DOM的作用

做网页的都知道，想要做一个动态页面，需要交互之类的，那这个时候，静态页面是无法满足的，千万别跟我说，你可以提前把要查询的显示的内容写在代码里，那么多数据，你要写几年啊。。要实时变化嘛，当然得有后台支持。就比如你在博客里，修改个人信息，添加一个标签页，删除个性签名等等，都需要同步的额。
这是典型的dom树

3、什么是重绘和重排

重绘就是重新绘制（repaint）
重排就是重新排列（reflow）

DOM发生改变的时候触发重排，使DOM重新排列，重绘不一定会重排，但是重排一定发生重绘，重绘和重排都会耗费浏览器的性能，尽量避免

4、重绘的产生：

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如
visibility、outline、背景色等属性的改变。

5、回流的产生：

1.页面第一次渲染 在页面发生首次渲染的时候，所有组件都要进行首次布局，这是开销最大的一次回流。
2.浏览器窗口尺寸改变
3.元素位置和尺寸发生改变的时候
4.新增和删除可见元素
5.内容发生改变（文字数量或图片大小等等）
6.元素字体大小变化。
7.激活CSS伪类（例如：:hover）。
8.设置style属性
下面的代码是影响回流和重绘的:

var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 重绘
s.backgroundColor = "#ccc"; // 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));// 添加node，再一次 回流+重绘

优化

目的：尽量减少重绘和重排的次数，限定范围

1.div.style.left = '10px';
2.div.style.top = '10px';
3.div.style.width = '20px';
4.div.style.height = '20px';

这只触发一次重排，由于浏览器的渲染队列机制，但是如果你在其中加入console就会触发多次，然后清空渲染队列，因为console是立即执行渲染队列机制。

console和js分离，然后把重排改变的样式集中写，这样可以把他们放在渲染队列
读写分离

// bad 强制刷新 触发两次重排

```css
div.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';
// good 缓存布局信息 相当于读写分离
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';

操作DOM之前先隐藏DOM，或者通过DocumentFragment创建一个DOM碎片，在里面完成重排然后在加入原来的DOM中。
用absolute和fixed重排使用性能少，优化动画，开启3d，比如实现一个动画，以1个像素为单位移动这样最平滑，但是reflow就会过于频繁，大量消耗CPU资源，如果以3个像素为单位移动则会好很多。GPU 加速通常包括以下几个部分：Canvas2D，布局合成, CSS3转换（transitions），CSS3 3D变换（transforms），WebGL和视频(video)。
强制刷新style样式
1.offsetTop, offsetLeft, offsetWidth, offsetHeight

2.scrollTop, scrollLeft, scrollWidth, scrollHeight

3.clientTop, clientLeft, clientWidth, clientHeight

4.getComputedStyle(), 或者 IE的 currentStyle