网页的重绘和回流

闭包

    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
    

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