码迷,mamicode.com
首页 > Web开发 > 详细

网页的重绘和回流

时间:2015-07-26 18:50:57      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:

闭包

 
   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
    

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

网页的重绘和回流

标签:

原文地址:http://www.cnblogs.com/liner730/p/4678209.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!