以前在写网页的时候很少关注到网站的性能，时间进入今天，一个网站不在是单纯几张图片或者几段文字，组成一个网站，今天的用户更加注重网站体验，所以写一个页面的时候网站的性能优化变得格外重要，作为一个前端的开发人员，一定的要对网站的每一个页面做到最大性能优化，今天的学习了一下如果提高网站性能重要的知识：

回流与重绘

----------------------------------------让你的网页快点在快点-----------------------------------------------

html中的每个tag都是dom 树中的1个节点，document（根节点）。

回流：

当视图中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就叫着回流（也可以叫做重新布局）

重绘:

当视图中的有些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，就叫着重绘

这里提到重要的一点： 回流一定会重绘，而重绘未必回流。

会产生回流或者重绘的操作：

1、添加、删除元素（回流+重绘）

2、隐藏元素 display：none,(回流+重绘)，visibility：hidden（重绘，不回流）

3、移动元素：改变top,left,或者移动元素到另外1个父元素中（重绘+回流）

4、对style的操作（）

5、改变浏览器的大小（回流+重绘）

浏览器在处理回流和重绘的时候，会把所有的引起回流、重绘的操作放入一个队列里面，一定数量或者时间间隔就会flush对象，这样就会让多次的回流、重绘变成一次回流重绘

减少回流、重绘

1.不要改变一个元素的样式属性，最后直接改变类名，类名是预先定义好的样式，不是动态的，你要动态的改变一些样式，可以使用字符串拼接形式进行改变

示例：

// 不好的写法
var left = 1;var top = 1;
el.style.left = left + "px";
el.style.top  = top  + "px";// 比较好的写法 
el.className += " className1";// 比较好的写法 
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

2.让要操作的元素的进行“离线处理”，

3.不要经常访问会引起浏览器fiush队列的属性，如果确实要访问，可以先对变量进行缓存，应聘哪的时候就可以直接读取变量

示例：

// 别这样写，大哥
for(循环) {
    el.style.left = el.offsetLeft + 5 + "px";
    el.style.top  = el.offsetTop  + 5 + "px";
}// 这样写好点
var left = el.offsetLeft,top  = el.offsetTop,s = el.style;for(循环) {
    left += 10;
    top  += 10;
    s.left = left + "px";
    s.top  = top  + "px";
}

4.一定要思考清除，操纵元素会影响到多少个节点，尽量减少对节点的影响，影响越多，就越耗费资源、