一、簡單介紹
防抖節流 是前端性能優化的重要方法之一，他們倆的目标非常明确，減少對伺服器的請求，繼而減輕對伺服器的負載，是一種性能優化的方式。
防抖
展現： 百度輸入框每輸入一個字都會向後端發起請求，為了減少不必要的請求，我們減少請求的次數。用 防抖 ，我們可以設定一個時間，如果在這個時間内頻繁觸發某個事件，我們就不執行這個事件，如果超出這個時間(前後兩次事件間隔時間超出這個時間)，就執行(後面)這個事件！
實作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
</head>
<body>
輸入:<input type="text" id="input" />
<div>觸發了 <span id="n">0</span>次</div>
<script>
var n = 0;
document.querySelector("#input").onkeydown = _.debounce(search, 1000);
function search() {
n++;
document.querySelector("#n").innerHTML = n;
}
</script>
</body>
</html>
節流
展現：當我們連續觸發某個事件的時候，我們可以設定一個時間(1000ms)，當監測到我們一直觸發事件的時候，就每隔設定的時間(1000ms)觸發一次事件！
未完…
![沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)