zoukankan      html  css  js  c++  java
  • 前端性能优化:高频执行事件/方法的防抖

    日期:2013-6-25  来源:GBin1.com

    上一篇我们说了用InnerHTML和DocumentFragment来减少DOM注入的次数,这次我们说一说如何处理高频事件触发时的优化。

    前端性能优化:高频执行事件/方法的防抖

    高频执行事件/方法的防抖

    通常,开发人员会在有用户交互参与的地方添加事件,而往往这种事件会被频繁触发。想象一下窗口的resize事件或者是一个元素的onmouseover事件 - 他们触发时,执行的非常迅速,并且触发很多次。如果你的回调过重,你可能使浏览器死掉。

    这就是为什么我们要引入防抖。

    防抖可以限制一个方法在一定时间内执行的次数。以下代码是个防抖示例:

    // 取自 UnderscoreJS 实用框架
    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);
        };
      }
    
    // 添加resize的回调函数,但是只允许它每300毫秒执行一次
    window.addEventListener('resize', debounce(function(event) {
    
        // 这里写resize过程
    
    }, 300));
    

    debounce方法返回一个方法,用来包住你的回调函数,限制他的执行频率。使用这个防抖方法,就可以让你写的频繁回调的方法不会妨碍用户的浏览器!

    下一篇,我们将介绍网络存储中静态缓存和非必要内容的优化方法

    via Nelly@极客标签

    来源:前端性能优化:高频执行事件/方法的防抖

  • 相关阅读:
    来自1068
    耻辱的时间戳(笑哭)
    依然排序
    呵呵
    好吧,第二篇
    来自机房的第一篇博客
    Shader-水流效果
    unity中虚拟摇杆的实现
    (转载)Unity3d中的属性(Attributes)整理
    C#冒泡排序法及优化
  • 原文地址:https://www.cnblogs.com/java20130725/p/3215521.html
Copyright © 2011-2022 走看看