JavaScript性能優化技巧之函數節流
作者:古木天琪
函數節流技術的主要思路是,通過一個定時器,阻斷連續重復的函數調用。對于我們自己內部使用的函數,這通常意義不大,也不推薦使用這個技術,它可能會丟失對某些數據的處理。但是對于在用戶界面調用的函數,卻非常有意義。
函數節流技術的主要思路是,通過一個定時器,阻斷連續重復的函數調用。對于我們自己內部使用的函數,這通常意義不大,也不推薦使用這個技術,它可能會丟失對某些數據的處理。但是對于在用戶界面調用的函數,卻非常有意義。例如一個 mousemove 或者 IE 中 resize 事件的監聽函數。
這類事件監聽函數往往伴隨著兩個主要特征:1. 短時間內連續多次重復觸發 ; 2. 大量的 DOM 操作。眾所周知,DOM 操作對內存和 CPU 的開銷是比較大的,特別是當同時滿足特征1時,往往給瀏覽器造成不小的壓力。函數節流技術的意義在于在用戶察覺范圍外,降低函數調用的頻率,從而提升性能。
這個技巧的大概模式如下面這樣:
- var processor = {
- timeoutId: null,
- performProcessing: function(){
- // 要執行的代碼
- },
- process: function(){
- clearTimeout(this.timeoutId);
- this.timeoutId = setTimeout(function(){
- processor.performProcessing();
- }, 100);
- }
- };
- //調用
- processor.process();
- performProcessing 是真正要調用的函數,而程序的入口在 process,每次進入 process,真正要調用的函數
- performProcessing 都會被延遲 100 毫秒執行,如果在此期間,process 再次被調用,則會重置前一次的計時器,
- 重新開始計時,這樣保證了 performProcessing 中的代碼至少要間隔 100 毫秒才會被執行一次,原理非常的簡單,
- 下面這個函數也是利用這個原理,通過閉包達到了同樣的目的,它接受兩個參數,***個是要真正要執行的函數,第二個是間隔的時間。
- function throttle(fn, delay) {
- var timer = null;
- return function () {
- var context = this, args = arguments;
- clearTimeout(timer);
- timer = setTimeout(function () {
- fn.apply(context, args);
- }, delay);
- };
- }
【編輯推薦】
責任編輯:陳貽新
來源:
HTML5研究小組
























