淺談網站性能以前端性能優化

最近項目慢慢走上正軌，需求趨於平穩，這纔想起須要對整站進行性能優化。通過一段時間的學習，結合如今項目的實際性能狀況，發現確實有許多地方能夠進行優化。因而就開始了個人前端性能優化之旅。如下內容僅爲我的理解，若是本內容你們以爲哪裏寫的不對，望你們指出，供一塊兒討論。

淺談網站性能以前端性能優化

性能優化的目的無非是減小用戶流量消耗，提高用戶首屏體驗，提高用戶訪問速度，讓用戶專一內容自己。

前端性能優化

1. 減小 HTTP 請求數量

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

     1. CSS Sprites：國內俗稱 CSS 精靈，這是將多張圖片合併成一張圖片達到減小 HTTP 請求的一種解決方案，能夠經過 CSS background 屬性來訪問圖片內容。這種方案同時還能夠減小圖片總字節數，節省命名詞彙量（由命名多張圖片文件變成一張，哈哈哈）。

     2. 合併 CSS 和 JS 文件：如今前端有不少工程化打包工具，如：grunt、gulp、webpack等。爲了減小 HTTP 請求數量，能夠經過這些工具再發布前將多個 CSS 或者 多個 JS 合併成一個文件。

     3. 採用 lazyLoad：俗稱懶加載，能夠控制網頁上的內容在一開始無需加載，不須要發請求，等到用戶操做真正須要的時候當即加載出內容。這樣就控制了網頁資源一次性請求數量。

2. 控制資源文件加載優先級

   • 基本原理：說到這裏就須要知道瀏覽器加載 HTML 內容的原理，瀏覽器在加載 HTML 內容時，是將 HTML 內容從上至下依次解析，解析到 link 或者 script 標籤就會加載 href 或者 src 對應連接內容，爲了第一時間展現頁面給用戶，就須要將 CSS 提早加載，不要受 JS 加載影響。

     1. 遵循原則：主要文件放在 head 內部，次要文件放在 body 底部。通常狀況下都是 CSS 在頭部，JS 在底部。

3. 利用瀏覽器緩存

   • 基本原理：瀏覽器緩存分強緩存和協商緩存，他們是將網絡資源存儲在本地，等待下次請求該資源時，若是命中就不須要到服務器從新請求該資源，直接在本地讀取該資源。

     1. 強緩存：在 web 服務器返回的響應中添加 Expires 和 Cache-Control Header。

     2. 協商緩存：經過【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】這兩對 Header 分別管理。

4. 使用 CDN

   • 基本原理：CDN的全稱是Content Delivery Network，即內容分發網絡。

5. 減小重排（Reflow）

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

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

6. 減小 DOM 操做

7. 圖標使用 IconFont 替換

花絮

在開始提筆寫這篇博客前就遇到了一個很棘手的問題，這篇博客標題叫什麼，思考了一會，我內心冒出了三個答案：

1. 淺談網站性能優化

   • 第一個標題網站性能優化，一看標題能夠理解爲是講網站性能，並且是對網站進行優化，描述的是一種解決方案，然而網站性能包括的太多了，超出了個人知識範疇，因此放棄。

2. 淺談網站性能以前端性能優化

   • 第二個標題正適我懷，答題歸納了我本期博客內容，既有性能介紹，又有前端性能優化解決方案。

3. 淺談前端性能優化

   • 第三個標題前端性能優化，心想這不就是我要寫的內容嘛，等我寫完內容發現，不對，我寫的內容不只僅是解決方案，好包括的其餘內容，因此放棄。

以上內容僅爲我的理解，若是本內容你們以爲哪裏寫的不對，望你們指出，供一塊兒討論，點擊此處更多文章。

來源：http://www.javashuo.com/article/p-vxzpzzaf-dt.html