網(wǎng)頁性能優(yōu)化方法有哪些？

·減少 HTTP 請求數(shù)量

在瀏覽器與服務(wù)器進(jìn)行通信時，主要是通過HTTP進(jìn)行通信。瀏覽器與服務(wù)器需要經(jīng)過三次握手，每次握手需要花費(fèi)大量時間。而且不同瀏覽器對資源文件并發(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)容。這種方案同時還可以減少圖片總字節(jié)數(shù)。

合并 CSS 和 JS 文件：現(xiàn)在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請求數(shù)量，可以通過這些工具再發(fā)布前將多個 CSS 或者 多個 JS 合并成一個文件。

采用 lazyLoad：俗稱懶加載，可以控制網(wǎng)頁上的內(nèi)容在一開始無需加載，不需要發(fā)請求，等到用戶操作真正需要的時候立即加載出內(nèi)容。這樣就控制了網(wǎng)頁資源一次性請求數(shù)量。

·控制資源文件加載優(yōu)先級

瀏覽器在加載HTML內(nèi)容時，是將HTML內(nèi)容從上至下依次解析，解析到link或者script標(biāo)簽就會加載href或者src對應(yīng)鏈接內(nèi)容，為了第一時間展示頁面給用戶，就需要將CSS提前加載，不要受JS加載影響。

一般情況下都是CSS在頭部，JS 在底部。

·利用瀏覽器緩存

瀏覽器緩存是將網(wǎng)絡(luò)資源存儲在本地，等待下次請求該資源時，如果資源已經(jīng)存在就不需要到服務(wù)器重新請求該資源，直接在本地讀取該資源。

·減少重排(Reflow)

基本原理：重排是 DOM 的變化影響到了元素的幾何屬性(寬和高)，瀏覽器會重新計(jì)算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗(yàn)證 DOM 樹上的所有其它結(jié)點(diǎn)的 visibility 屬性，這也是 Reflow 低效的原因。如果 Reflow 的過于頻繁，CPU 使用率就會急劇上升。

減少 Reflow，如果需要在 DOM 操作時添加樣式，盡量使用 增加 class 屬性，而不是通過 style 操作樣式。

·減少 DOM 操作

·圖標(biāo)使用 IconFont 替換

猜你喜歡：

事件委托是什么? JS事件代理的原理

前端BFC是什么?

js中修改this的指向方法匯總

BFC布局規(guī)則介紹，哪些元素會生成 BFC?

黑馬程序員前端開發(fā)培訓(xùn)課程