您的位置:68399皇家赌场 > 服务器租用 > 滚动优化

滚动优化

发布时间:2019-05-09 19:28编辑:服务器租用浏览(188)

    IntersectionObserver

      必要贯彻图片懒加载可能最棒滚动时,供给规定因素是不是现身在视窗中。那能够在事变监听器中管理,最广大的消除方案是运用 element.getBoundingClientRect() :

    window.addEventListener('scroll', () => {
      const rect = elem.getBoundingClientRect();
      const inViewport = rect.bottom > 0 && rect.right > 0 &&
                         rect.left < window.innerWidth &&
                         rect.top < window.innerHeight;
    });
    

      上述代码的难题在于每回调用 getBoundingClientRect 时都会触发回流,严重地震慑了品质。在事件管理函数中调用getBoundingClientRect更加倒霉,尽管使用了函数节流的本领也或许对质量没多大帮扶

      今后能够透过动用 Intersection Observer 这1 API 来化解难题。它同意追踪对象成分与其祖先成分或视窗的交叉情状。其它,纵然只有壹对因素出现在视窗中,哪怕唯有1像素,也得以选取触发回调函数:

    const observer = new IntersectionObserver(callback, options);
    observer.observe(element)
    

      移动端及IE浏览器不扶助同,可是能够选择polyfill

     

    【前端品质】高质量滚动 scroll 及页面渲染优化,前端scroll

    近些年在商讨页面渲染及web动画的习性难点,以及拜读《CSS SECRET》(CSS揭秘)那本大作。

    正文首要想谈谈页面优化之滚动优化。

    首要内容包涵了为什么要求优化滚动事件,滚动与页面渲染的涉嫌,节流与防抖,pointer-events:none 优化滚动。因为本文涉及了多数浩大基础,能够对照上面包车型大巴知识点,接纳性跳到相应地点读书。

     

       滚动优化的原由

    滚动优化其实也不止指滚动(scroll 事件),还包蕴了诸如 resize 那类会反复触发的轩然大波。轻易的探视:

    var i = 0;
    window.addEventListener('scroll',function(){
     console.log(i  );
    },false);
    

    输出如下:

    www.68399.com 1

    在绑定 scroll 、resize 那类事件时,当它发出时,它被触发的频次非常高,间隔很近。如若事件中提到到大方的职位计算、DOM 操作、成分重绘等专门的学问且那一个干活儿力不从心在下四个 scroll 事件触发前完结,就能够促成浏览器掉帧。加之用户鼠标滚动往往是接二连三的,就能够不停触发 scroll 事件形成掉帧扩张、浏览器 CPU 使用率扩张、用户体验受到震慑。

    在滚动事件中绑定回调应用场景也不行多,在图纸的懒加载、下滑自动加载数据、侧边浮动导航栏等中有所广阔的应用。

    当用户浏览网页时,具备平滑滚动日常是被忽视但却是用户体验中着重的一些。当滚动表现平常时,用户就能够感觉应用非常流畅,令人愉悦,反之,笨重不自然卡顿的轮转,则会给用户带来巨大不舒爽的痛感。

     

       滚动与页面渲染的关系

    何以滚动事件供给去优化?因为它影响了质量。那它影响了哪些性质呢?额......这些就要从页面性能难点由什么决定谈到。

    自己感觉搞能力一定要追本溯源,不要看到人家壹篇文章说滚动事件会促成卡顿并说了一批化解方案优化手艺如同获宝贝三跪九叩,大家需求的不是拿来主义而是批判主义,多去源头看看。

    从问题出发,一步一步寻找到最后,就很轻巧找到题指标症结所在,唯有如此得出的消除格局才便于记住。

    说教了一群废话,厌恶的直接忽略哈,回到正题,要找到优化的输入就要掌握问题出在哪儿,对于页面优化来说,那么我们将要知道页面包车型地铁渲染原理:

    浏览器渲染原理笔者在自作者上1篇小说里也要详细的讲到,可是更加多的是从动画渲染的角度去讲的:【Web动画】CSS3 3D 行星运营 && 浏览器渲染原理 。

    想了想,依然再轻便的描述下,作者发觉每一次 review 这几个知识点都有新的取得,本次换一张图,以 chrome 为例子,3个 Web 页面包车型地铁来得,简单的话能够以为经历了以下下多少个步骤:

    www.68399.com 2

    • JavaScript:一般的话,大家会利用 JavaScript 来贯彻部分视觉变化的效力。例如做三个动画片只怕往页面里加多一些 DOM 成分等。

    • Style:计量样式,那么些历程是基于 CSS 接纳器,对各类 DOM 成分相称对应的 CSS 样式。这一步结束之后,就规定了种种 DOM 成分上该使用什么 CSS 样式规则。

    • Layout:布局,上一步明确了各种 DOM 元素的体裁规则,这一步就是现实性估测计算种种 DOM 成分最终在荧屏上海展览中心示的深浅和岗位。web 页面桐月素的布局是周旋的,因而二个因素的布局产生变化,会联合浮动地吸引其余因素的布局发生变化。比如,<body> 成分的肥瘦的扭转会影响其子成分的小幅度,其子成分宽度的转移也会持续对其孙子成分发生潜移默化。由此对此浏览器来讲,布局进度是平常发出的。

    • Paint:绘制,本质上正是填充像素的历程。包罗绘制文字、颜色、图像、边框和影子等,也正是3个 DOM 元素全数的可视效果。一般的话,这几个绘制进程是在几个层上完成的。

    • Composite:渲染层合并,由上一步可见,对页面中 DOM 成分的绘图是在多个层上实行的。在各样层上到位绘制进程之后,浏览器会将全数层根据合理的相继合并成1个图层,然后显示在显示屏上。对于有地方重叠的要素的页面,那一个历程更为关键,因为只要图层的相会顺序出错,将会导致成分展现十分。

    此处又提到了层(GraphicsLayer)的定义,GraphicsLayer 层是用作纹理(texture)上传给 GPU 的,现在平常能收看说 GPU 硬件加速,就和所谓的层的定义密切相关。不过和本文的轮转优化相关性相当小,有意思味深远摸底的可以自行 google 越来越多。

    简轻易单的话,网页生成的时候,至少会渲染(Layout Paint)2次。用户访问的历程中,还会四处重复的重排(reflow)和重绘(repaint)。

    内部,用户 scroll 和 resize 行为(便是滑动页面和退换窗口大小)会变成页面不断的重复渲染。

    当你滚动页面时,浏览器只怕会必要绘制那些层(一时也被誉为合成层)里的部分像素。通过成分分组,当有个别层的源委改造时,我们只需求更新该层的协会,并唯有重绘和栅格化渲染层结构里调换的那有个别,而不须求完全重绘。显著,假如当你滚动时,像视差网址(戳小编看看)那样有东西在运动时,有望在多层导致大面积的源委调解,那会形成大气的绘图职业。

     

       防抖(Debouncing)和节流(Throttling)

    scroll 事件作者会触发页面包车型大巴再次渲染,同时 scroll 事件的 handler 又会被高频度的触及, 因而事件的 handler 内部不应有有复杂操作,比方 DOM 操作就不应有放在事件管理中。

    本着此类高频度触发事件难题(比如页面 scroll ,显示器resize,监听用户输入等),上边介绍两种常用的化解情势,防抖和节流。

    防抖(Debouncing)

    防抖才干便是能够把多少个顺序地调用合并成壹回,也正是在肯定期期内,规定事件被触发的次数。

    浅显一点的话,看看上边那个简化的例子:

    // 简单的防抖动函数
    function debounce(func, wait, immediate) {
     // 定时器变量
     var timeout;
     return function() {
      // 每次触发 scroll handler 时先清除定时器
      clearTimeout(timeout);
      // 指定 xx ms 后触发真正想进行的操作 handler
      timeout = setTimeout(func, wait);
     };
    };
    
    // 实际想绑定在 scroll 事件上的 handler
    function realFunc(){
     console.log("Success");
    }
    
    // 采用了防抖动
    window.addEventListener('scroll',debounce(realFunc,500));
    // 没采用防抖动
    window.addEventListener('scroll',realFunc);
    

    地点轻便的防抖的例证能够得到浏览器下试一下,大概效率就是一旦 500ms 内未有连接触发三次 scroll 事件,那么才会触发我们确实想在 scroll 事件中触发的函数。

    地方的演示能够更加好的包裹一下:

    // 防抖动函数
    function debounce(func, wait, immediate) {
     var timeout;
     return function() {
      var context = this, args = arguments;
      var later = function() {
       timeout = null;
       if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
     };
    };
    
    var myEfficientFn = debounce(function() {
     // 滚动中的真正的操作
    }, 250);
    
    // 绑定监听
    window.addEventListener('resize', myEfficientFn);
    

    节流(Throttling)

    防抖函数确实准确,不过也存在难点,举个例子图片的懒加载,作者愿目的在于跌落过程中图纸不断的被加载出来,而不是唯有当小编截止下滑时候,图片才被加载出来。又大概下落时候的多寡的 ajax 请求加载也是同理。

    其不经常候,大家期望就算页面在频频被滚动,不过滚动 handler 也可以以一定的作用被触发(例如 250ms 触发一回),那类场景,将要用到另一种手艺,称为节流函数(throttling)。

    节流函数,只允许3个函数在 X 纳秒内实施3回,唯有当上贰遍函数实践后过了你规定的日子距离,工夫开始展览下一回该函数的调用。

    与防抖相比较,节流函数最要紧的例外在于它保障在 X 纳秒内至少实行三遍大家盼望触发的风云 handler。

    与防抖相比较,节流函数多了3个 mustRun 属性,代表 mustRun 阿秒内,必然会接触贰遍 handler ,同样是运用电火花计时器,看看简单的以身作则:

    // 简单的节流函数
    function throttle(func, wait, mustRun) {
     var timeout,
      startTime = new Date();
    
     return function() {
      var context = this,
       args = arguments,
       curTime = new Date();
    
      clearTimeout(timeout);
      // 如果达到了规定的触发时间间隔,触发 handler
      if(curTime - startTime >= mustRun){
       func.apply(context,args);
       startTime = curTime;
      // 没达到触发间隔,重新设定定时器
      }else{
       timeout = setTimeout(func, wait);
      }
     };
    };
    // 实际想绑定在 scroll 事件上的 handler
    function realFunc(){
     console.log("Success");
    }
    // 采用了节流函数
    window.addEventListener('scroll',throttle(realFunc,500,1000));
    

    地点轻松的节流函数的例证能够得到浏览器下试一下,大致成效正是只要在一段时间内 scroll 触发的区间一向短于 500ms ,那么能担保事件大家期望调用的 handler 至少在 1000ms 内会触发3回。

     

       使用 rAF(requestAnimationFrame)触发滚动事件

    上边介绍的振动与节流达成的形式都是注重了电火花计时器 setTimeout ,不过只要页面只要求匹配高版本浏览器或应用在移动端,又或然页面要求追求高精度的职能,那么能够运用浏览器的原生方法 rAF(requestAnimationFrame)。

    requestAnimationFrame

    window.requestAnimationFrame() 这么些法子是用来在页面重绘在此之前,文告浏览器调用三个点名的函数。这几个点子接受三个函数为参,该函数会在重绘前调用。

    rAF 常用于 web 动画的营造,用于标准调整页面包车型客车帧刷新渲染,让动画效果更是通畅,当然它的成效不止局限于动画制作,大家得以选择它的风味将它正是3个反应计时器。(当然它不是电磁关照计时器)

    平时来讲,rAF 被调用的频率是每秒 60 次,也正是 壹仟/60 ,触发频率大约是 16.七ms 。(当实行复杂操作时,当它开采不能够保险 60fps 的功效时,它会把频率降低到 30fps 来维系帧数的安定团结。)

    大致来讲,使用 requestAnimationFrame 来触发滚动事件,也正是地点的:

    throttle(func, xx, 1000/60) //xx 代表 xx ms内不会重复触发事件 handler
    

    简单来讲的示范如下:

    var ticking = false; // rAF 触发锁
    
    function onScroll(){
      if(!ticking) {
        requestAnimationFrame(realFunc);
        ticking = true;
      }
    }
    
    function realFunc(){
     // do something...
     console.log("Success");
     ticking = false;
    }
    // 滚动事件监听
    window.addEventListener('scroll', onScroll, false);
    

    地点轻便的使用 rAF 的例证能够得到浏览器下试一下,大约功用正是在滚动的历程中,保持以 1陆.七ms 的频率触发事件 handler。

    采纳 requestAnimationFrame 优缺点并存,首先大家只好思虑它的包容难题,其次因为它只好促成以 1陆.7ms 的功用来触发,代表它的可调解性10分差。然而相比 throttle(func, xx, 16.7) ,用于更眼花缭乱的现象时,rAF 或许效率更佳,品质更好。

    小结一下 

    • 防抖动:防抖能力就是能够把多少个顺序地调用合并成3次,也正是在一定期间内,规定事件被触发的次数。

    • 节流函数:只允许二个函数在 X 阿秒内施行2次,唯有当上3回函数施行后过了你规定的岁月距离,手艺拓展下三回该函数的调用。

    • rAF:16.7ms 触发二次 handler,下落了可控性,可是升高了质量和正确度。

     

       简化 scroll 内的操作

    上边介绍的不2秘籍都是如何去优化 scroll 事件的接触,制止 scroll 事件过度消耗电源的。

    可是从本质上来说,我们应有尽大概去精简 scroll 事件的 handler ,将一些变量的早先化、不依赖于滚动地点变动的测算等都应有在 scroll 事件外提前就绪。

    建议如下:

    避免在scroll 事件中期维修改样式属性 / 将样式操作从 scroll 事件中脱离**

    www.68399.com 3

     

    输入事件处理函数,举例 scroll / touch 事件的管理,都会在 requestAnimationFrame 以前被调用实行。

    就此,倘令你在 scroll 事件的管理函数中做了改造样式属性的操作,那么那一个操作会被浏览器暂存起来。然后在调用 requestAnimationFrame 的时候,如若您在一发端做了读取样式属性的操作,那么那将会导致触发浏览器的威胁同步布局。

     

       滑动进程中品尝使用 pointer-events: none 禁止鼠标事件

    绝大多数人想必都不认知那天本性,嗯,那么它是为何用的呢?

    pointer-events 是2个 CSS 属性,能够有七个分歧的值,属性的壹部分值仅仅与 SVG 有关系,这里我们只关切 pointer-events: none 的意况,差不离的意思便是明令禁止鼠标行为,应用了该属性后,举例鼠标点击,hover 等功用都将失效,便是成分不会变成鼠标事件的 target。

    能够就近 F12 展开开垦者工具面板,给 <body> 标签增添上 pointer-events: none 样式,然后在页面上感受下效果,开掘持有鼠标事件都被禁止了。

    那么它有怎么着用吧?

    pointer-events: none 可用来做实滚动时的帧频。的确,当滚动时,鼠标悬停在少数因素上,则触发其上的 hover 效果,然则这个潜移默化平日不被用户注意,并多半导致滚动出现难题。对 body 成分应用 pointer-events: none ,禁用了包罗hover 在内的鼠标事件,从而增强滚动质量。

    .disable-hover {
        pointer-events: none;
    }
    

    大概的做法正是在页面滚动的时候, 给 <body> 增加上 .disable-hover 样式,那么在滚动结束此前, 全数鼠标事件都将被明确命令禁止。当滚动停止以往,再移除该属性。

    可以查阅这些 demo 页面。

    地点说 pointer-events: none 可用来加强滚动时的帧频 的这段话摘自 pointer-events-MDN ,还特意有成文疏解过那些技巧:

    使用pointer-events:none实现60fps滚动 。

    那就完了啊?未有,张鑫旭有一篇极其的文章,用来搜求 pointer-events: none 是不是真正能够加快滚动质量,并提议了和谐的质询:

    pointer-events:none升高页面滚动时候的绘图质量?

    结论见仁见智,使用 pointer-events: none 的场合要依照职业自个儿来决定,拒绝拿来主义,多去源头看看,入手执行一番再做决策。

     

    任何仿照效法文献(都以好文章,值得一读):

    • 实例深入分析防抖动(Debouncing)和节流阀(Throttling)
    • 有线质量优化:Composite
    • Javascript高质量动画与页面渲染
    • Google Developers--渲染品质
    • Web高质量动画

     

    到此本文甘休,若是还有何疑难照旧建议,可以多多调换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

    万1本文对您有扶助,请点下推荐,写作品不轻松。

    scroll 及页面渲染优化,前端scroll 这段时间在切磋页面渲染及web动画的性申斥题,以及拜读《CSS SECRET》(CSS揭秘)那本...

    节流(Throttling)

    防抖函数确实不易,不过也存在难题,举个例子图片的懒加载,笔者期待在下降进程中图纸不断的被加载出来,而不是只有当我甘休下滑时候,图片才被加载出来。又也许下落时候的数码的 ajax 请求加载也是同理。

    其有的时候候,我们希望即使页面在不断被滚动,不过滚动 handler 也得以以一定的功能被触发(比方 250ms 触发二次),那类场景,将在用到另一种技巧,称为节流函数(throttling)。

    节流函数,只同意1个函数在 X 微秒内实行2回。

    与防抖相比较,节流函数最根本的两样在于它保障在 X 皮秒内至少施行2遍大家盼望触发的风浪 handler。

    与防抖相比较,节流函数多了3个mustRun 属性,代表 mustRun 纳秒内,必然会接触1遍 handler ,同样是行使计时器,看看简单的亲自去做:

    // 简单的节流函数
    function throttle(func, wait, mustRun) {
        var timeout,
            startTime = new Date();
    
        return function() {
            var context = this,
                args = arguments,
                curTime = new Date();
    
            clearTimeout(timeout);
            // 如果达到了规定的触发时间间隔,触发 handler
            if(curTime - startTime >= mustRun){
                func.apply(context,args);
                startTime = curTime;
            // 没达到触发间隔,重新设定定时器
            }else{
                timeout = setTimeout(func, wait);
            }
        };
    };
    // 实际想绑定在 scroll 事件上的 handler
    function realFunc(){
        console.log("Success");
    }
    // 采用了节流函数
    window.addEventListener('scroll',throttle(realFunc,500,1000));
    

    地方简单的节流函数的事例能够得到浏览器下试一下,差不离功效便是只要在一段时间内 scroll 触发的区间一向短于 500ms ,那么能担保事件大家期望调用的 handler 至少在 一千ms 内会触发一遍。

     

    本文首要想谈谈页面优化之滚动优化。

    scroll-behavior

      scroll-behavior是一个新的CSS属性,用简短的1行代码改动总体页面滚动的一言一动

    html {
      scroll-behavior: smooth;
    }
    

      同样地,该属性的包容性不太好,移动端和IE都不帮助

    <style>
    body {
      margin: 0;
    }
    ul{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    .con{
      width: 260px;
      display: flex;
      justify-content:space-around;
      line-height: 30px;
      background: #333;
      color: #fff;
    }
    .con li {
      cursor: pointer;
    }
    .showBox{
      width: 260px;
      height: 100px;
      overflow: hidden;
      scroll-behavior: smooth;
    }
    .show li {
      height: 100px;
      text-align: center;
      line-height: 100px;
    
    }
    </style>
    <ul class="con" id="con">
      <li><a href="#html">HTML</a></li>
      <li><a href="#css">CSS</a></li>
      <li><a href="#js">JS</a></li>
    </ul> 
    <div class="showBox">
      <ul class="show" id="show">
        <li style="background: lightgreen;" id="html">HTML</li>
        <li style="background: lightblue;" id="css">CSS</li>
        <li style="background: pink;" id="js">JS</li>
      </ul> 
    </div>
    

      效果如下所示

     

    requestAnimationFrame

    window.requestAnimationFrame() 这么些艺术是用来在页面重绘以前,公告浏览器调用三个钦赐的函数。那个情势接受贰个函数为参,该函数会在重绘前调用。

    rAF 常用于 web 动画的制作,用于标准调整页面包车型客车帧刷新渲染,让动画片效果更是流畅,当然它的机能不仅仅局限于动画制作,大家能够使用它的表征将它视为二个停车计时器。(当然它不是沙漏)

    普通来讲,rAF 被调用的效能是每秒 60 次,也正是 一千/60 ,触发频率大约是 16.七ms 。(当实践复杂操作时,当它开采不能够维持 60fps 的频率时,它会把频率降低到 30fps 来保证帧数的协调。)

    简单的说来讲,使用 requestAnimationFrame 来触发滚动事件,也就是地点的:

    throttle(func, xx, 1000/60) //xx 代表 xx ms内不会重复触发事件 handler
    

    简短的言传身教如下:

    var ticking = false; // rAF 触发锁
    
    function onScroll(){
      if(!ticking) {
        requestAnimationFrame(realFunc);
        ticking = true;
      }
    }
    
    function realFunc(){
        // do something...
        console.log("Success");
        ticking = false;
    }
    // 滚动事件监听
    window.addEventListener('scroll', onScroll, false);
    

    地方轻易的运用 rAF 的事例能够得到浏览器下试一下,大致成效正是在滚动的进程中,保持以 1陆.七ms 的效能触发事件 handler。

    运用 requestAnimationFrame 优缺点并存,首先大家不得不思量它的包容难点,其次因为它只好兑现以 1陆.7ms 的频率来触发,代表它的可调治性13分差。但是比较 throttle(func, xx, 1陆.七) ,用于更复杂的意况时,rAF 可能效果更佳,品质越来越好。

    总计一下 

    • 防抖动:防抖技艺便是可以把四个顺序地调用合并成三回,也正是在顺其自然时间内,规定事件被触发的次数。

    • 节流函数:只允许八个函数在 X 阿秒内推行叁遍,只有当上3遍函数施行后过了你规定的小时距离,技术开始展览下二回该函数的调用。

    • rAF:1陆.7ms 触发三次 handler,降低了可控性,不过进步了品质和正确度。

     

       简化 scroll 内的操作

    www.68399.com,地点介绍的格局都以怎样去优化 scroll 事件的接触,幸免 scroll 事件过度消功耗源的。

    而是从精神上来讲,大家应有尽恐怕去精简 scroll 事件的 handler ,将有个别变量的起先化、不借助于滚动地方变动的估算等都应当在 scroll 事件外提前就绪。

    提议如下:

    概述

      在滚动事件中绑定回调的利用场景十一分多,如图片的懒加载、下滑自动加载数据、侧边浮动导航栏等,用户浏览网页时,具备平滑滚动平日是被忽视但却是用户体验中珍视的壹部分

      网页生成的时候,至少会渲染(Layout Paint)一次。用户访问的经过中,还会不断重复的重排(reflow)和重绘(repaint)。当中,用户 scroll 和 resize 行为(正是滑动页面和转移窗口大小)会促成页面不断的再次渲染

      滚动页面时,浏览器恐怕会须要绘制那么些层里的一些像素。通过成分分组,当有些层的内容更换时,只必要立异该层的构造,并独自重绘和栅格化渲染层结构里调换的那有个别,而没有供给完全重绘。显明,假使一骨碌时,像视差网站那样有东西在运动时,有希望在多层导致大面积的开始和结果调解,那会促成大批量的绘图职业

     

       简化 scroll 内的操作

    上面介绍的诀要都以哪些去优化 scroll 事件的触发,制止 scroll 事件过度消耗财富的。

    不过从实质上来说,大家应有尽或许去精简 scroll 事件的 handler ,将部分变量的起初化、不依赖于滚动地方变动的计量等都应该在 scroll 事件外提前就绪。

    建议如下:

    驷不如舌内容包罗了为何要求优化滚动事件,滚动与页面渲染的关联,节流与防抖,pointer-events:none 优化滚动。因为本文涉及了大多广大基础,可以对照下面的知识点,选拔性跳到对应地点读书。

    惯性滚动

      苹果公司开创了“惯性”滚动并有着它的专利 。它非常的慢地改成了用户交互的正规化还要大家对此已习贯

      这里有1个 CSS 的解决方案,但看起来更像是个 hack

    .element {
      -webkit-overflow-scrolling: touch;
    }
    

      首先,它不得不在支撑webkit前缀的浏览器上才具专门的工作。其次,它只适用于触屏设备。最终,如果浏览器不帮助的话,你就像此马耳东风吗?但不管怎么着,那总归是3个消除方案

     

    本文首要想谈谈页面优化之滚动优化。

    防抖(Debouncing)

    防抖技巧便是可以把四个顺序地调用合并成叁次,也等于在不知所可时间内,规定事件被触发的次数。

    深切浅出一点的话,看看下边这么些简化的例子:

    // 简单的防抖动函数
    function debounce(func, wait, immediate) {
        // 定时器变量
        var timeout;
        return function() {
            // 每次触发 scroll handler 时先清除定时器
            clearTimeout(timeout);
            // 指定 xx ms 后触发真正想进行的操作 handler
            timeout = setTimeout(func, wait);
        };
    };
    
    // 实际想绑定在 scroll 事件上的 handler
    function realFunc(){
        console.log("Success");
    }
    
    // 采用了防抖动
    window.addEventListener('scroll',debounce(realFunc,500));
    // 没采用防抖动
    window.addEventListener('scroll',realFunc);
    

    地点轻便的防抖的例子能够获得浏览器下试一下,大约功能就是就算500ms 内未有连接触发几回 scroll 事件,那么才会接触大家实在想在 scroll 事件中触发的函数。

    地点的言传身教能够更加好的卷入一下:

    // 防抖动函数
    function debounce(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };
    
    var myEfficientFn = debounce(function() {
        // 滚动中的真正的操作
    }, 250);
    
    // 绑定监听
    window.addEventListener('resize', myEfficientFn);
    

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:滚动优化

    关键词: 68399皇家赌场 性能优化 滚动优化 scroll优化 防抖

上一篇:Q昂CoraCode.js:使用 JavaScript 生成2维码

下一篇:没有了