網(wǎng)站性能優(yōu)化有哪些方法?常見方法介紹

·減少 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 替換

猜你喜歡：

JavaScript的同步加載和異步加載

css清除浮動的方法有哪些?

服務器與服務器空間有什么區(qū)別?

傳智教育前端開發(fā)培訓課程