更新時間:2021-01-15 來源:黑馬程序員 瀏覽量:
·減少 HTTP 請求數(shù)量
在瀏覽器與服務器進行通信時,主要是通過HTTP進行通信。瀏覽器與服務器需要經(jīng)過三次握手,每次握手需要花費大量時間。而且不同瀏覽器對資源文件并發(fā)請求數(shù)量有限(不同瀏覽器允許并發(fā)數(shù)),一旦 HTTP 請求數(shù)量達到一定數(shù)量,資源請求就存在等待狀態(tài),這是很致命的,因此減少 HTTP 的請求數(shù)量可以很大程度上對網(wǎng)站性能進行優(yōu)化。
CSS Sprites:國內(nèi)俗稱 CSS 精靈,這是將多張圖片合并成一張圖片達到減少 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標簽就會加載href或者src對應鏈接內(nèi)容,為了第一時間展示頁面給用戶,就需要將CSS提前加載,不要受JS加載影響。
一般情況下都是CSS在頭部,JS 在底部。
·利用瀏覽器緩存
瀏覽器緩存是將網(wǎng)絡資源存儲在本地,等待下次請求該資源時,如果資源已經(jīng)存在就不需要到服務器重新請求該資源,直接在本地讀取該資源。
·減少重排(Reflow)
基本原理:重排是 DOM 的變化影響到了元素的幾何屬性(寬和高),瀏覽器會重新計算元素的幾何屬性,會使渲染樹中受到影響的部分失效,瀏覽器會驗證 DOM 樹上的所有其它結(jié)點的 visibility 屬性,這也是 Reflow 低效的原因。如果 Reflow 的過于頻繁,CPU 使用率就會急劇上升。
減少 Reflow,如果需要在 DOM 操作時添加樣式,盡量使用 增加 class 屬性,而不是通過 style 操作樣式。
·減少 DOM 操作
·圖標使用 IconFont 替換
猜你喜歡: