HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > JavaScript 性能优化技巧:函数节流

JavaScript 性能优化技巧:函数节流

函数节流技术的主要思路是,通过一个定时器,阻断连续重复的函数调用。对于我们自己内部使用的函数,这通常意义不大,也不推荐使用这个技术,它可能会丢失对某些数据的处理。但是对于在用户界面调用的函数,却非常有意义。例如一个 mousemove 或者 IE 中 resize 事件的监听函数。

JavaScript 函数节流

这类事件监听函数往往伴随着两个主要特征:1. 短时间内连续多次重复触发 ; 2. 大量的 DOM 操作。众所周知,DOM 操作对内存和 CPU 的开销是比较大的,特别是当同时满足特征1时,往往给浏览器造成不小的压力。函数节流技术的意义在于在用户察觉范围外,降低函数调用的频率,从而提升性能。

这个技巧的大概模式如下面这样:

JavaScript Code复制内容到剪贴板
  1. var processor = {  
  2.     timeoutId: null,  
  3.   
  4.     performProcessing: function(){  
  5.             // 要执行的代码  
  6.     },  
  7.   
  8.     process: function(){  
  9.         clearTimeout(this.timeoutId);  
  10.         this.timeoutId  = setTimeout(function(){  
  11.             processor.performProcessing();  
  12.         }, 100);  
  13.     }  
  14. };  
  15.   
  16. //调用  
  17. processor.process();  

performProcessing 是真正要调用的函数,而程序的入口在 process,每次进入 process,真正要调用的函数 performProcessing 都会被延迟 100 毫秒执行,如果在此期间,process 再次被调用,则会重置前一次的计时器,重新开始计时,这样保证了 performProcessing 中的代码至少要间隔 100 毫秒才会被执行一次,原理非常的简单,下面这个函数也是利用这个原理,通过闭包达到了同样的目的,它接受两个参数,第一个是要真正要执行的函数,第二个是间隔的时间。

JavaScript Code复制内容到剪贴板
  1. function throttle(fn, delay) {  
  2.     var timer = null;  
  3.     return function () {  
  4.         var context = this, args = arguments;  
  5.         clearTimeout(timer);  
  6.         timer = setTimeout(function () {  
  7.         fn.apply(context, args);  
  8.     }, delay);  
  9.   };  
  10. }  

另外,有人为 jQuery 写了相同功能的插件:点击这里传送到 jQuery plugins

Google Closure Library 也有类似的 API:点击这里传送到 Google Code

【JavaScript 性能优化技巧:函数节流】相关文章

1. JavaScript 性能优化技巧:函数节流

2. jQuery性能优化

3. 实用的jQuery代码性能优化

4. JavaScript的4种调用函数的方法

5. CSS优化及简写技巧注意事项

6. 优化移动体验的HTML5技巧

7. Myth – 支持变量和数学函数的 CSS 预处理器

8. 支持变量和数学函数的 CSS 预处理器

9. 15个提高编程技巧的JavaScript工具

10. 20个超实用的JavaScript技巧及最佳实践

本文来源:https://www.51html5.com/a1597.html

点击展开全部

﹝JavaScript 性能优化技巧:函数节流﹞相关内容

「JavaScript 性能优化技巧:函数节流」相关专题

其它栏目

也许您还喜欢