1.頁面加載及渲染過程優(yōu)化
CRP（關(guān)鍵渲染路徑Critical Rendering Path）優(yōu)化
關(guān)鍵渲染路徑是瀏覽器將 HTML酬姆、CSS、JavaScript 轉(zhuǎn)換為在屏幕上呈現(xiàn)的像素內(nèi)容所經(jīng)歷的一系列步驟踩验。也就是我們剛剛提到的的的瀏覽器渲染流程。
為盡快完成首次渲染，我們需要最大限度減小以下三種可變因素:
* 關(guān)鍵資源的數(shù)量: 可能阻止網(wǎng)頁首次渲染的資源识啦。
* 關(guān)鍵路徑長度: 獲取所有關(guān)鍵資源所需的往返次數(shù)或總時間。
* 關(guān)鍵字節(jié): 實現(xiàn)網(wǎng)頁首次渲染所需的總字節(jié)數(shù)神妹，等同于所有關(guān)鍵資源傳送文件大小的總和颓哮。
優(yōu)化 JavaScript
當(dāng)瀏覽器遇到 script 標(biāo)記時，會阻止解析器繼續(xù)操作鸵荠，直到 CSSOM 構(gòu)建完畢冕茅，JavaScript 才會運行并繼續(xù)完成 DOM 構(gòu)建過程。
* async: 當(dāng)我們在 script 標(biāo)記添加 async 屬性以后蛹找，瀏覽器遇到這個 script 標(biāo)記時會繼續(xù)解析 DOM姨伤，同時腳本也不會被 CSSOM 阻止，即不會阻止 CRP庸疾。
* defer: 與 async 的區(qū)別在于乍楚，腳本需要等到文檔解析后（ DOMContentLoaded 事件前）執(zhí)行，而 async 允許腳本在文檔解析時位于后臺運行（兩者下載的過程不會阻塞 DOM届慈，但執(zhí)行會）徒溪。
* 當(dāng)我們的腳本不會修改 DOM 或 CSSOM 時凌箕，推薦使用 async 。
* 預(yù)加載 —— preload & prefetch 词渤。
* DNS 預(yù)解析 —— dns-prefetch 牵舱。
2.瀏覽器重繪（Repaint）和回流（Reflow）
回流必將引起重繪，重繪不一定會引起回流缺虐。
重繪（Repaint）
當(dāng)頁面中元素樣式的改變并不影響它在文檔流中的位置時（例如：color芜壁、background-color、visibility 等）高氮，瀏覽器會將新樣式賦予給元素并重新繪制它慧妄，這個過程稱為重繪。
回流（Reflow）
當(dāng) Render Tree 中部分或全部元素的尺寸剪芍、結(jié)構(gòu)塞淹、或某些屬性發(fā)生改變時，瀏覽器重新渲染部分或全部文檔的過程稱為回流罪裹。
如何避免
CSS
避免使用 table 布局饱普。
盡可能在 DOM 樹的最末端改變 class。
避免設(shè)置多層內(nèi)聯(lián)樣式状共。
將動畫效果應(yīng)用到 position 屬性為 absolute 或 fixed 的元素上套耕。
避免使用 CSS 表達式（例如：calc()）。
Javascript
避免頻繁操作樣式峡继，最好一次性重寫 style 屬性冯袍，或者將樣式列表定義為 class 并一次性更改 class 屬性。
避免頻繁操作 DOM碾牌，創(chuàng)建一個 documentFragment康愤，在它上面應(yīng)用所有 DOM 操作，最后再把它添加到文檔中舶吗。
也可以先為元素設(shè)置 display: none征冷，操作結(jié)束后再把它顯示出來。因為在 display 屬性為 none 的元素上進行的 DOM 操作不會引發(fā)回流和重繪裤翩。
避免頻繁讀取會引發(fā)回流/重繪的屬性资盅，如果確實需要多次使用，就用一個變量緩存起來踊赠。
對具有復(fù)雜動畫的元素使用絕對定位呵扛，使它脫離文檔流，否則會引起父元素及后續(xù)元素頻繁回流筐带。
圖片懶加載
圖片懶加載在一些圖片密集型的網(wǎng)站中運用比較多今穿，通過圖片懶加載可以讓一些不可視的圖片不去加載，避免一次性加載過多的圖片導(dǎo)致請求阻塞（瀏覽器一般對同一域名下的并發(fā)請求的連接數(shù)有限制）伦籍，這樣就可以提高網(wǎng)站的加載速度蓝晒，提高用戶體驗腮出。
原理
將頁面中的img標(biāo)簽src指向一張小圖片或者src為空，然后定義data-src（這個屬性可以自定義命名芝薇，我才用data-src）屬性指向真實的圖片胚嘲。src指向一張默認(rèn)的圖片，否則當(dāng)src為空時也會向服務(wù)器發(fā)送一次請求洛二〔雠可以指向loading的地址。注意晾嘶，圖片要指定寬高妓雾。
<imgsrc="default.jpg"data-src="666.jpg"/>
當(dāng)載入頁面時，先把可視區(qū)域內(nèi)的img標(biāo)簽的data-src屬性值負(fù)給src垒迂，然后監(jiān)聽滾動事件械姻，把用戶即將看到的圖片加載。這樣便實現(xiàn)了懶加載机断。
事件委托
事件委托其實就是利用JS事件冒泡機制把原本需要綁定在子元素的響應(yīng)事件（click楷拳、keydown……）委托給父元素，讓父元素?fù)?dān)當(dāng)事件監(jiān)聽的職務(wù)毫缆。事件代理的原理是DOM元素的事件冒泡唯竹。
3.渲染完成后的頁面交互優(yōu)化：
防抖（debounce）/節(jié)流（throttle）
防抖（debounce）
輸入搜索時乐导，可以用防抖debounce等優(yōu)化方式苦丁，減少http請求；
這里以滾動條事件舉例：防抖函數(shù) onscroll 結(jié)束時觸發(fā)一次物臂，延遲執(zhí)行
function debounce(func旺拉，wait){
????let timeout;
????return function(){
????????let context=this;// 指向全局
????????let args=arguments;
????????if(timeout){
????????????clearTimeout(timeout);
????????}
????????timeout=setTimeout(()=>{
????????????func.apply(context，args);// context.func(args)
????????}棵磷，wait);
????};
}
// 使用
window.onscroll= debounce(function(){console.log('debounce');}蛾狗，1000);
節(jié)流（throttle）
節(jié)流函數(shù)：只允許一個函數(shù)在N秒內(nèi)執(zhí)行一次。滾動條調(diào)用接口時仪媒，可以用節(jié)流throttle等優(yōu)化方式沉桌，減少http請求；
下面還是一個簡單的滾動條事件節(jié)流函數(shù)：節(jié)流函數(shù) onscroll 時算吩，每隔一段時間觸發(fā)一次留凭，像水滴一樣
function throttle(fn，delay){
????let prevTime=Date.now();
????return function(){
????????let curTime=Date.now();
????????if(curTime-prevTime>delay){
????????????fn.apply(this偎巢，arguments);
????????????prevTime=curTime;
????????}
????};
}// 使用
var throtteScroll = throttle(function(){console.log('throtte');}蔼夜，1000);
window.onscroll = throtteScroll;
