1、減少 HTTP 請求數(shù)量
在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過 HTTP 進(jìn)行通信。瀏覽器與服務(wù)器需要經(jīng)過三次握手，每次握手需要花費(fèi)大量時(shí)間。而且不同瀏覽器對資源文件并發(fā)請求數(shù)量有限（不同瀏覽器允許并發(fā)數(shù)），一旦 HTTP 請求數(shù)量達(dá)到一定數(shù)量，資源請求就存在等待狀態(tài)，這是很致命的，因此減少 HTTP 的請求數(shù)量可以很大程度上對網(wǎng)站性能進(jìn)行優(yōu)化。
CSS Sprites
國內(nèi)俗稱CSS精靈，這是將多張圖片合并成一張圖片達(dá)到減少HTTP請求的一種解決方案，可以通過CSS的background屬性來訪問圖片內(nèi)容。這種方案同時(shí)還可以減少圖片總字節(jié)數(shù)。
合并 CSS 和 JS 文件
現(xiàn)在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請求數(shù)量，可以通過這些工具再發(fā)布前將多個(gè)CSS或者多個(gè)JS合并成一個(gè)文件。
采用 lazyLoad
俗稱懶加載，可以控制網(wǎng)頁上的內(nèi)容在一開始無需加載，不需要發(fā)請求，等到用戶操作真正需要的時(shí)候立即加載出內(nèi)容。這樣就控制了網(wǎng)頁資源一次性請求數(shù)量。
2、控制資源文件加載優(yōu)先級(jí)
瀏覽器在加載HTML內(nèi)容時(shí)，是將HTML內(nèi)容從上至下依次解析，解析到link或者script標(biāo)簽就會(huì)加載href或者src對應(yīng)鏈接內(nèi)容，為了第一時(shí)間展示頁面給用戶，就需要將CSS提前加載，不要受 JS 加載影響。
一般情況下都是CSS在頭部，JS在底部。
3、利用瀏覽器緩存
瀏覽器緩存是將網(wǎng)絡(luò)資源存儲(chǔ)在本地，等待下次請求該資源時(shí)，如果資源已經(jīng)存在就不需要到服務(wù)器重新請求該資源，直接在本地讀取該資源。
4、減少重排（Reflow）
基本原理：重排是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會(huì)重新計(jì)算元素的幾何屬性，會(huì)使渲染樹中受到影響的部分失效，瀏覽器會(huì)驗(yàn)證 DOM 樹上的所有其它結(jié)點(diǎn)的visibility屬性，這也是Reflow低效的原因。如果Reflow的過于頻繁，CPU使用率就會(huì)急劇上升。
減少Reflow，如果需要在DOM操作時(shí)添加樣式，盡量使用 增加class屬性，而不是通過style操作樣式。
