网页的重绘和回流

闭包

function f1(){
        var n=999;
        nAdd=function(){n+=1}
        function f2(){
            alert(n);
        }
        return f2;
    }

var result=f1();
    result();
    nAdd();
    result();

其中的结果是：

第1次弹出999

第2次弹出10

第一次运行的时候，f2直接显示出n的值，第二次，是因为调用了    nAdd();，使n的值发生了改变。所以，显示出来的值是，变化过的值。

当无法获取函数里面的值的时候，可以用内部函数返回值的方法，来获取函数里面的值。

回流与重绘

首先要记住的是：

回流：就是在加载元素的尺寸、布局、隐藏等。

重绘：只会影响元素外观，改变元素颜色和外观等。

有回流就会有重绘，有重绘不一定会有回流。

1、添加、删除元素(回流+重绘)

2、隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)

3、移动元素，?比如改变top,left(jquery的animate?方法就是,改变top,left不?一定会影响回流)，或者移动元素到另外1个?父元素中。(重绘+回流)

4、对style的操作(对不同的属性操作，影响不?一样)

5、还有?一种是?用户的操作，?比如改变浏览器?大?小，改变浏览器的字体?大?小等(回流+重绘)

在编写就js的时候：

//不好写法：

var left=1;

var top=1;

el.style.left=left+"px";

el.style.left=top+"px";

//比较好的写法：

var className=left;

var className1=1;

el.className+="className1"

网页在加载的时候，会进行重绘和回流，我们需要减少网页的重绘和回流，加快网页的加载速度。提高用户的体验度。

浏览器都会优化这些操作，浏览器会把回流和重绘放在一个队列里面，进行一个批处理。

当设置以下代码时，会强制浏览器提前处理队列的重绘和回流：

1、offsetTop,offsetLeft,offsetWidth,offsetHeight

2、scrollTop/left/width/height

3、clientTop/left/width/height

4、width,height

5、请求了getComputedStyle(),IE的currentStyle

在网页加载的时候，要记住网页本身就会有一次重绘和回流。