在工作中，我們可能碰到這樣的問題
（1）用戶在搜索的時候奕巍，在不停敲字，如果每敲一個字我們就要調(diào)一次接口儒士，接口調(diào)用太頻繁的止，給卡住了。
（2） 用戶在閱讀文章的時候着撩，我們需要監(jiān)聽用戶滾動到了哪個標(biāo)題诅福，但是每滾動一下就監(jiān)聽匾委，那樣會太過頻繁從而占內(nèi)存，如果再加上其他的業(yè)務(wù)代碼氓润，就卡住了赂乐。
解決的辦法
所以，這時候咖气，我們就要用到 防抖與節(jié)流 了挨措。
那么，講到（1） 防抖與2（）節(jié)流崩溪，我們可以順帶探秘下 重繪與回流浅役。
說起 重繪與回流，我們就順帶把 瀏覽器輸入 URL 后發(fā)生的事情 也關(guān)注一下伶唯，從而引出 DNS觉既、TCP 等知識點，最終串起來構(gòu)成本文的輪廓乳幸。
1.防抖
##1：任務(wù)頻繁觸發(fā)的情況下瞪讼，只有任務(wù)觸發(fā)的間隔超過指定間隔的時候，任務(wù)才會執(zhí)行反惕。
：通俗的講 結(jié)合上面的代碼尝艘，我們可以了解到，在觸發(fā)點擊事件后姿染，如果用戶再次點擊了背亥，我們會清空之前的定時器，
重新生成一個定時器悬赏。意思就是：這件事兒需要等待狡汉，如果你反復(fù)催促，我就重新計時闽颇！多用于1.表單的提交 2.模糊搜索 盾戴。。兵多。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>防抖</title>
</head>
<body>
<button id="debounce">點我防抖尖啡！</button>
<script>
window.onload = function() {
// 1、獲取這個按鈕剩膘，并綁定事件
var myDebounce = document.getElementById("debounce");
myDebounce.addEventListener("click", debounce(sayDebounce));
}
// 2衅斩、防抖功能函數(shù)，接受傳參
function debounce(fn) {
// 4怠褐、創(chuàng)建一個標(biāo)記用來存放定時器的返回值
let timeout = null;
return function() {
// 5畏梆、每次當(dāng)用戶點擊/輸入的時候，把前一個定時器清除
clearTimeout(timeout);
// 6、然后創(chuàng)建一個新的 setTimeout奠涌，
// 這樣就能保證點擊按鈕后的 interval 間隔內(nèi)
// 如果用戶還點擊了的話宪巨，就不會執(zhí)行 fn 函數(shù)
timeout = setTimeout(() => {
fn.call(this, arguments);
}, 1000);
};
}
// 3、需要進行防抖的事件處理
function sayDebounce() {
// ... 有些需要防抖的工作溜畅，在這里執(zhí)行
console.log("防抖成功捏卓！");
}
</script>
</body>
</html>
2.節(jié)流
##1節(jié)流：指定時間間隔內(nèi)只會執(zhí)行一次任務(wù)。
:通俗的講 結(jié)合下面的代碼 我們可以了解到慈格，在觸發(fā)事件之后天吓，如果用戶再次點擊了事件，我們會先判斷前面事件是否已經(jīng)完成峦椰，
如果沒有完成 就會讓其等待 直到在設(shè)置的指定時間之內(nèi) 再次觸發(fā)排隊的任務(wù) 直到完全執(zhí)行完任務(wù)中的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>節(jié)流</title>
</head>
<body>
<button id="throttle">點我節(jié)流！</button>
<script>
window.onload = function() {
// 1汰规、獲取按鈕汤功，綁定點擊事件
var myThrottle = document.getElementById("throttle");
myThrottle.addEventListener("click", throttle(sayThrottle));
}
// 2、節(jié)流函數(shù)體
function throttle(fn) {
// 4溜哮、通過閉包保存一個標(biāo)記
let canRun = true;
return function() {
// 5滔金、在函數(shù)開頭判斷標(biāo)志是否為 true，不為 true 則中斷函數(shù)
if(!canRun) {
return;
}
// 6茂嗓、將 canRun 設(shè)置為 false餐茵，防止執(zhí)行之前再被執(zhí)行
canRun = false;
// 7、定時器
setTimeout( () => {
fn.call(this, arguments);
// 8述吸、執(zhí)行完事件（比如調(diào)用完接口）之后忿族，重新將這個標(biāo)志設(shè)置為 true
canRun = true;
}, 1000);
};
}
// 3、需要節(jié)流的事件
function sayThrottle() {
console.log("節(jié)流成功蝌矛！");
}
</script>
</body>
</html>
防抖道批，節(jié)流最終引起的深層次考慮就是
1.這個操作什么益處那 ???
1.減少耗能 降低cpu
2.我們能這樣做成功的原因是什么???我們需要了解哪些需要用到的理論???
1.從輸入url到頁面展現(xiàn)的整個過程瀏覽器做了哪些事情？入撒？隆豹？
2.其中js css html 進行了哪些貢獻以及在頁面展現(xiàn)的整個過程中的其運行的原理是什么？茅逮？璃赡？
2.異步與同步
3.重繪與回流
在說瀏覽器渲染頁面之前，我們需要先了解兩個點献雅，一個叫 瀏覽器解析 URL碉考，另一個就是本章節(jié)將涉及的 重繪與回流：
（1）重繪(repaint)：當(dāng)元素樣式的改變不影響布局時，瀏覽器將使用重繪對元素進行更新惩琉，此時由于只需要 UI 層面的重新像素繪制豆励，因此損耗較少。
》常見的重繪操作有：
1.改變元素顏色
2.改變元素背景色
3.總結(jié)：當(dāng)頁面中元素樣式的改變并不影響它在文檔流中的位置時觸發(fā)的就是重繪的操作
（2）回流(reflow)：又叫重排（layout）。當(dāng)元素的尺寸良蒸、結(jié)構(gòu)或者觸發(fā)某些屬性時技扼，瀏覽器會重新渲染頁面，稱為回流嫩痰。此時剿吻，瀏覽器需要重新經(jīng)過計算，計算后還需要重新頁面布局串纺，因此是較重的操作丽旅。
》常見的重繪操作有：
1.頁面首次渲染
2.瀏覽器窗口大小發(fā)生改變
3.元素尺寸或位置發(fā)生改變
4.元素內(nèi)容變化（文字數(shù)量或圖片大小等等）
5.元素字體大小變化
6.添加或者刪除可見的DOM元素
7.激活CSS偽類（例如：:hover）
8.查詢某些屬性或調(diào)用某些方法
9.總結(jié)：當(dāng)頁面中的一些元素的尺寸 布局 以及影響到位置發(fā)生變化 觸發(fā)的就是回流操作
##1
**1通過重繪以及回流的引起原因我們可以了解到 重繪對耗能方面還不算太嚴重，而回流則是整個布局的變動類似于二次渲染
耗能可想而知 當(dāng)然 避免我們沒有辦法避免 但是減少還是可以的
CSS>>>>>
1.避免使用table布局纺棺。
2.盡可能在DOM樹的最末端改變class榄笙。
3.避免設(shè)置多層內(nèi)聯(lián)樣式。
4.將動畫效果應(yīng)用到position屬性為absolute或fixed的元素上祷蝌。
5.避免使用CSS表達式（例如：calc()）茅撞。
Javascript>>>>>
1.避免頻繁操作樣式，最好一次性重寫style屬性巨朦，或者將樣式列表定義為class并一次性更改class屬性米丘。
2.避免頻繁操作DOM，創(chuàng)建一個documentFragment糊啡，在它上面應(yīng)用所有DOM操作拄查，最后再把它添加到文檔中。
3.也可以先為元素設(shè)置display: none棚蓄，操作結(jié)束后再把它顯示出來堕扶。因為在display屬性為none的元素上進行的DOM操作不會引發(fā)回流和重繪。
4.避免頻繁讀取會引發(fā)回流/重繪的屬性癣疟，如果確實需要多次使用挣柬，就用一個變量緩存起來。
5.對具有復(fù)雜動畫的元素使用絕對定位睛挚，使它脫離文檔流邪蛔，否則會引起父元素及后續(xù)元素頻繁回流。
4.瀏覽器解析 URL
上面提到URL解析的問題 下面將會把URL的解析過程完整的展現(xiàn)在大家的面前
1.從瀏覽器輸入 URL 到渲染成功的過程中扎狱，究竟發(fā)生了什么侧到？
2.瀏覽器渲染過程中，發(fā)生了什么淤击，是不是也有重繪與回流匠抗？
接下來我們會進行講解URL輸入到頁面展示瀏覽器做了哪些？污抬？汞贸？
1.用戶輸入URL地址
2.瀏覽器首先進行DNS域名解析
3.通過HTTP協(xié)議進行三次握手操作
4.瀏覽器向服務(wù)器發(fā)起報文請求
5.服務(wù)器對瀏覽器發(fā)起的請求進行報文響應(yīng)
6.瀏覽器拿到服務(wù)器返回的文檔 進行頁面的渲染以及展示
7.完整的頁面展現(xiàn)在我們面前
5.DNS 域名解析
1.什么是 DNS 解析绳军，它是怎么個流程？
DNS（Domain Name System）是 域名系統(tǒng) 的英文縮寫矢腻，提供的服務(wù)是用于將主機名和域名轉(zhuǎn)換為 IP 地址的工作：
域名：http://www.baidu.com <---> DNS <---> IPV4：192.168.16.11
所以门驾，當(dāng)用戶在瀏覽器輸入 http://www.baidu.com 時，DNS 經(jīng)歷了以下步驟：
1.瀏覽器根據(jù)地址多柑，在自身緩存中查找 DNS（域名服務(wù)器） 中的解析記錄奶是。如果存在，則直接返回 IP 地址竣灌；如果不存在聂沙，則查找操作系統(tǒng)中的 hosts 文件是否有該域名的 DNS 解析記錄，如果有就返回初嘹。
2.在條件 1 中的瀏覽器緩存或者操作系統(tǒng)的 hosts 文件中都沒有這個域名的 DNS 解析記錄及汉，或者已經(jīng)過期，則向域名服務(wù)器發(fā)起請求解析這個域名屯烦。
2.先向本地域名服務(wù)器中請求豁生，讓它解析這個域名，如果解析不了漫贞，則向根域名服務(wù)器請求解析。
3.根服務(wù)器給本地域名服務(wù)器返回一個主域名服務(wù)器育叁。
4.本地域名服務(wù)器向主域名服務(wù)器發(fā)起解析請求迅脐。
5.主域名服務(wù)器接收到解析請求后，查找并返回域名對應(yīng)的域名服務(wù)器的地址豪嗽。
6.域名服務(wù)器會查詢存儲的域名和 IP 的映射關(guān)系表谴蔑，返回目標(biāo) IP 記錄以及一個 TTL（Time To Live）值。
7.本地域名服務(wù)器接收到 IP 和 TTL 值龟梦，進行緩存隐锭，緩存的時間由 TTL 值控制。
8.將解析的結(jié)果返回給用戶计贰，用戶根據(jù) TTL 值緩存在本地系統(tǒng)緩存中钦睡，域名解析過程結(jié)束。
6.瀏覽器渲染頁面
瀏覽器解析文檔資源并渲染頁面是個怎樣的流程躁倒？
(1)瀏覽器通過 HTMLParser 根據(jù)深度遍歷的原則把 HTML 解析成 DOM Tree荞怒。
(2)瀏覽器通過 CSSParser 將 CSS 解析成 CSS Rule Tree（CSSOM Tree）。
(3)瀏覽器將 JavaScript 通過 DOM API 或者 CSSOM API 將 JS 代碼解析并應(yīng)用到布局中秧秉，按要求呈現(xiàn)響應(yīng)的結(jié)果褐桌。
(4)根據(jù) DOM 樹和 CSSOM 樹來構(gòu)造 render Tree。
(5)layout：重排（也可以叫回流）象迎，當(dāng) render tree 中任一節(jié)點的幾何尺寸發(fā)生改變荧嵌，render tree 就會重新布局，重新來計算所有節(jié)點在屏幕的位置。
(6)repaint：重繪啦撮，當(dāng) render tree 中任一元素樣式屬性（幾何尺寸沒改變）發(fā)生改變時谭网，render tree 都會重新畫，比如字體顏色逻族，背景等變化蜻底。
(7)paint：遍歷 render tree，并調(diào)動硬件圖形 API 來繪制每個節(jié)點聘鳞。
