前面的話
javascript中的函數大多數情況下都是由用戶主動調用觸發的,除非是函數本身的實現不合理,否則一般不會遇到跟性能相關的問題。但在一些少數情況下,函數的觸發不是由用戶直接控制的。在這些場景下,函數有可能被非常頻繁地調用,而造成大的性能問題。解決性能問題的處理辦法就是函數節流和函數防抖。本文將詳細介紹函數節流和函數防抖
常見場景
下面是函數被頻繁調用的常見的幾個場景
1、mousemove事件。如果要實現一個拖拽功能,需要一路監聽 mousemove 事件,在回調中獲取元素當前位置,然后重置 dom 的位置來進行樣式改變。如果不加以控制,每移動一定像素而觸發的回調數量非常驚人,回調中又伴隨着 DOM 操作,繼而引發瀏覽器的重排與重繪,性能差的瀏覽器可能就會直接假死。
2、window.onresize事件。為window對象綁定了resize事件,當瀏覽器窗口大小被拖動而改變的時候,這個事件觸發的頻率非常之高。如果在window.onresize事件函數里有一些跟DOM節點相關的操作,而跟DOM節點相關的操作往往是非常消耗性能的,這時候瀏覽器可能就會吃不消而造成卡頓現象
3、射擊游戲的 mousedown/keydown 事件(單位時間只能發射一顆子彈)
4、搜索聯想(keyup事件)
5、監聽滾動事件判斷是否到頁面底部自動加載更多(scroll事件)
對於這些情況的解決方案就是函數節流(throttle)或函數去抖(debounce),核心其實就是限制某一個方法的頻繁觸發
定時器管理
在介紹函數防抖和函數節流之前,首先要介紹一下定時器管理
定時器管理有兩種機制:
第一種是只要當前函數沒有執行完成,任何新觸發的函數都會被忽略,可以實現在持續觸發事件的情況下,一段時間內只執行一次事件的效果,即函數節流
簡易代碼如下
function fn(method, context) { //忽略新函數 if(method.tId){ return false; } method.tId = setTimeout(function() { method.call(context); }, 1000); }
第二種是只要有新觸發的函數,就立即停止執行當前函數,轉而執行新函數,可以實現在持續觸發事件的情況下,一定在事件觸發n秒后執行,如果n秒內又觸發了這個事件,則以新的事件的時間為准,還是n秒后執行,即函數防抖,簡易代碼如下
function fn(method, context) { //停止當前函數 clearTimeout(method.tId); method.tId = setTimeout(function() { method.call(context); }, 1000); }
函數防抖
函數防抖,字面上來說,是利用函數來防止抖動。在執行觸發事件的情況下,元素的位置或尺寸屬性快速地發生變化,造成頁面回流,出現元素抖動的現象。通過函數防抖,使得元素的位置或尺寸屬性延遲變化,從而減少頁面回流
簡單的防抖函數代碼如下,該函數接受2個參數,第一個參數為需要被延遲執行的函數,第二個參數為延遲執行的時間
<style> body { margin: 0; } .show{ width: 260px; height: 100px; font-size: 20px; text-align: center; line-height: 100px; background: lightgreen; } </style> <div class="show" id="show">0</div> <script> let count = 0 const oShow = document.getElementById('show') const changeValue = () => { oShow.innerHTML = count ++ } const debounce = (fn, wait=30) => { return () => { clearTimeout(fn.timer) fn.timer = setTimeout(fn, wait) } } oShow.addEventListener('mousemove', debounce(changeValue)) </script>
效果如下:
但是,changeValue()方法中的this指向window,下面來修正this指向
const debounce = (fn, wait=30) =>{ return function() { clearTimeout(fn.timer) fn.timer = setTimeout(fn.bind(this), wait) } }
還有一個問題,changeValue()方法中的e為undefined,下面來修正e的值
const debounce = (fn, wait=30) =>{ return function() { clearTimeout(fn.timer) fn.timer = setTimeout(fn.bind(this, ...arguments), wait) } }
或者,使用apply方法
const debounce = (fn, wait=30) =>{ return function() { clearTimeout(fn.timer) fn.timer = setTimeout(() => { fn.apply(this, arguments) }, wait) } }
函數節流
函數節流,即限制函數的執行頻率,在持續觸發事件的情況下,間斷地執行函數;實現方法對應定時器管理的第一種策略,只要當前函數沒有執行完成,任何新觸發的函數都會被忽略
const throttle = (fn, wait=100) =>{ return function() { if(fn.timer) return fn.timer = setTimeout(() => { fn.apply(this, arguments) fn.timer = null }, wait) } }
數組分塊
在前面關於函數節流和函數防抖的討論中,提供了限制函數被頻繁調用的解決方案。下面將遇到另外一個問題,某些函數確實是用戶主動調用的,但因為一些客觀的原因,這些函數會嚴重地影響頁面性能
一個例子是創建WebQQ的QQ好友列表。列表中通常會有成百上千個好友,如果一個好友用一個節點來表示,在頁面中渲染這個列表的時候,可能要一次性往頁面中創建成百上千個節點
在短時間內往頁面中大量添加DOM節點顯然也會讓瀏覽器吃不消,看到的結果往往就是瀏覽器的卡頓甚至假死。代碼如下:
var ary = []; for ( var i = 1; i <= 1000; i++ ){ ary.push( i ); // 假設 ary 裝載了 1000 個好友的數據 }; var renderFriendList = function( data ){ for ( var i = 0, l = data.length; i < l; i++ ){ var div = document.createElement( 'div' ); div.innerHTML = i; document.body.appendChild( div ); } }; renderFriendList( ary );
這個問題的解決方案之一是數組分塊技術,下面的timeChunk函數讓創建節點的工作分批進行,比如把1秒鍾創建1000個節點,改為每隔200毫秒創建8個節點
數組分塊是一種使用定時器分割循環的技術,為要處理的項目創建一個隊列,然后使用定時器取出下一個要處理的項目進行處理,接着再設置另一個定時器
在數組分塊模式中,array變量本質上就是一個“待辦事宜”列表,它包含了要處理的項目。使用shift()方法可以獲取隊列中下一個要處理的項目,然后將其傳遞給某個函數。如果在隊列中還有其他項目,則設置另一個定時器,並通過arguments.callee調用同一個匿名函數
數組分塊的重要性在於它可以將多個項目的處理在執行隊列上分開,在每個項目處理之后,給予其他的瀏覽器處理機會運行,這樣就可能避免長時間運行腳本的錯誤。一旦某個函數需要花50ms以上的時間完成,那么最好看看能否將任務分割為一系列可以使用定時器的小任務
下面是數組分塊模式的簡易代碼
function chunk(array,process,context){ setTimeout(function(){ //取出下一個條目並處理 var item = array.shift(); process.call(context,item); //若還有條目,再設置另一個定時器 if(array.length > 0){ setTimeout(arguments.callee,100); } },100); }
var data = [1,2,3,4,5,6,7,8,9,0]; function printValue(item){ var div = document.getElementById('myDiv'); div.innerHTML += item + '<br>'; } chunk(data.concat(),printValue);
下面是數組分塊的詳細代碼,timeChunk函數接受3個參數,第1個參數是創建節點時需要用到的數據,第2個參數是封裝了創建節點邏輯的函數,第3個參數表示每一批創建的節點數量
var timeChunk = function( ary, fn, count ){ var obj,t; var len = ary.length; var start = function(){ for ( var i = 0; i < Math.min( count || 1, ary.length ); i++ ){ var obj = ary.shift(); fn( obj ); } }; return function(){ t = setInterval(function(){ if ( ary.length === 0 ){ // 如果全部節點都已經被創建好 return clearInterval( t ); } start(); }, 200 ); // 分批執行的時間間隔,也可以用參數的形式傳入 }; };
最后進行一些小測試,假設有1000個好友的數據,利用timeChunk函數,每一批只往頁面中創建8個節點
var ary = []; for ( var i = 1; i <= 1000; i++ ){ ary.push( i ); }; var renderFriendList = timeChunk( ary, function( n ){ var div = document.createElement( 'div' ); div.innerHTML = n; document.body.appendChild( div ); }, 8 ); renderFriendList();