在前端開發當中，我們都知道有些互動事件，會頻繁觸發。這樣會導致我們的頁面渲染效能，如果頻繁觸發介面呼叫的話，會直接導致伺服器效能的浪費。話不多說，盤它！
我們先簡單列一下
onresize onmousemove onkeydown srcoll onkeyup我們先看一段測試用例
const ocount = document.getelementbyid('count');
const oipt = document.getelementbyid('ipt');
let init = 0
oipt.onkeyup = function()
我們不難發現，每次輸入都會觸發事件的執行。如果我們用這樣的方式去檢測：當前使用者輸入的使用者名稱是否可用？如此高頻率的觸發不僅是極大的浪費，而且使用者還沒有輸入完成就檢測，對使用者的提示也不好。應該等使用者輸入完了，我們再去觸發函式，下面我們優化一下：
// 設定乙個預設值 300ms
const ocount2 = document.getelementbyid('count2');
const oipt2 = document.getelementbyid('ipt2');
// 設定乙個預設值 300ms
const debounce = (fn, wait = 300) => , wait)
}}let init2 = 0
oipt2.onkeyup = debounce(function() , 500) //可以自己定義延遲時間間隔
可以看到，加了防抖函式之後，當我們在頻繁輸入的時候，函式並沒有執行， 只有在函式指定的間隔內（500ms）不再輸入了，才會執行函式。如果在時間間隔之內繼續輸入，會觸發函式重新計數。
函式防抖的概念：在事件觸發後的n秒之後，再去執行真正需要執行的函式，如果在這n秒之內事件又被觸發，則重新開始計時
也就是說，如果使用者在間隔時間內一直觸發函式，那麼這個防抖函式內部的真正需要執行的函式將永遠無法執行。
那有沒有什麼好點的辦法，讓使用者在輸入過程中，既能觸發真實需要的函式，又能達到優化的效果？答案是肯定的，那就是：
事例**如下
const ocount3 = document.getelementbyid('count3');
const oipt3 = document.getelementbyid('ipt3');
const otime = document.getelementbyid('time');
const throttle = (fn, threshhold = 1000) => , threshhold)
} else
}}let init3 = 0
const throttleipt = throttle(function() , 1000) // 初始化一下
oipt3.onkeyup = function()
可以看到，任由我們怎麼輸入，函式會按照我們設定的時間（1s），每秒執行一次。你可以設定更大。
他們之間的優缺點，等我下次總結吧！
下面 的你值得擁有：
沈志勇說
前端效能優化之函式防抖與截流
在前端開發當中，我們都知道有些互動事件，會頻繁觸發。這樣會導致我們的頁面渲染效能，如果頻繁觸發介面呼叫的話，會直接導致伺服器效能的浪費。話不多說，盤它！我們先簡單列一下 onresize onmousemove onkeydown srcoll onkeyup這裡我是用鍵盤事件 keyup作為測試 ...
js效能優化之函式節流 分流函式
比如我們在window.onresize事件中要列印當前瀏覽器視窗的大小，在我們通過拖拽來改變視窗大小時候，列印視窗大小這個工作1s就執行了10次。而實際上我們只需要2次或者3次。比如這行 window.onresize function 實現的思路就是將即將被執行的函式用settimeout延遲一...
Dom效能優化之 函式的防抖節流
我們為什麼要用防抖節流？首先我們要知道防抖節流是用來做什麼的。瀏覽器中的某些計算和處理要比其他的昂貴得多，當我們試圖用dom操作html頁面時，如果是進行很多頻繁的dom操作，這很可能導致瀏覽器掛起，甚至崩潰。在ie中使用 onresize事件時容易發生這種情況，我們有必要控制js的執行次數，這時候...