上一篇我们说了用InnerHTML和DocumentFragment来减少DOM注入的次数，这次我们说一说如何处理高频事件触发时的优化。
高频执行事件/方法的防抖
通常，开发人员会在有用户交互参与的地方添加事件，而往往这种事件会被频繁触发。想象一下窗口的resize事件或者是一个元素的onmouseover事件 – 他们触发时，执行的非常迅速，并且触发很多次。如果你的回调过重，你可能使浏览器死掉。
这就是为什么我们要引入防抖。
防抖可以限制一个方法在一定时间内执行的次数。以下代码是个防抖示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | // 取自 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方法返回一个方法，用来包住你的回调函数，限制他的执行频率。使用这个防抖方法，就可以让你写的频繁回调的方法不会妨碍用户的浏览器！
下一篇，我们将介绍网络存储中静态缓存和非必要内容的优化方法。