前端如何優化網站性能

減小 HTTP 請求數量

在瀏覽器與服務器進行通訊時,主要是經過 HTTP 進行通訊。瀏覽器與服務器須要通過三次握手,每次握手須要花費大量時間。並且不一樣瀏覽器對資源文件併發請求數量有限(不一樣瀏覽器容許併發數),一旦 HTTP 請求數量達到必定數量,資源請求就存在等待狀態,這是很致命的,所以減小 HTTP 的請求數量能夠很大程度上對網站性能進行優化。前端

  • CSS Sprites:國內俗稱 CSS 精靈,這是將多張圖片合併成一張圖片達到減小 HTTP 請求的一種解決方案,能夠經過 CSS background 屬性來訪問圖片內容。這種方案同時還能夠減小圖片總字節數。
  • 合併 CSS 和 JS 文件:如今前端有不少工程化打包工具,如:grunt、gulp、webpack等。爲了減小 HTTP 請求數量,能夠經過這些工具再發布前將多個 CSS 或者 多個 JS 合併成一個文件。
  • 採用 lazyLoad:俗稱懶加載,能夠控制網頁上的內容在一開始無需加載,不須要發請求,等到用戶操做真正須要的時候當即加載出內容。這樣就控制了網頁資源一次性請求數量。

控制資源文件加載優先級

瀏覽器在加載 HTML 內容時,是將 HTML 內容從上至下依次解析,解析到 link 或者 script 標籤就會加載 href 或者 src 對應連接內容,爲了第一時間展現頁面給用戶,就須要將 CSS 提早加載,不要受 JS 加載影響。webpack

通常狀況下都是 CSS 在頭部,JS 在底部。web

利用瀏覽器緩存

瀏覽器緩存是將網絡資源存儲在本地,等待下次請求該資源時,若是資源已經存在就不須要到服務器從新請求該資源,直接在本地讀取該資源。gulp

減小重排(Reflow)

基本原理:重排是 DOM 的變化影響到了元素的幾何屬性(寬和高),瀏覽器會從新計算元素的幾何屬性,會使渲染樹中受到影響的部分失效,瀏覽器會驗證 DOM 樹上的全部其它結點的 visibility 屬性,這也是 Reflow 低效的緣由。若是 Reflow 的過於頻繁,CPU 使用率就會急劇上升。瀏覽器

減小 Reflow,若是須要在 DOM 操做時添加樣式,儘可能使用 增長 class 屬性,而不是經過 style 操做樣式。緩存

減小 DOM 操做

圖標使用 IconFont 替換(阿里巴巴矢量圖標庫)

相關文章
相關標籤/搜索