Web前端性能優化

    web性能優化，主要分爲前端和後臺兩個部分性能優化，後臺性能優化決定了web能不能用，前端優化決定了其好很差用，也就是牽涉到前端用戶體驗和web易用性等狀況，因此前端性能與用戶體驗是有着極大的關聯的。

首先，前端優化以前，咱們須要知道其總體性能狀況，而後對總體狀況進行細分與分析，瞭解其每一步所損耗的時間和消耗的起因，而後進行細節優化，才能達成一個總體性能質的飛越，並非其中一部分或者一個步驟的優化就可以解決問題的，只有優化的量才能達到性能質的飛越。

  對web的性能檢測通常使用瀏覽器或者性能檢測工具

  

  下面是咱們一般進行優化的方向點：

 

1、HTTP請求

   1.減小HTTP請求數量

     80%的響應的時間是消耗在網頁內容的下載上，例如：圖片，樣式、腳本、Flash等。因此減小請求次數以是縮短響應時間的關鍵之處。

     I. 合併文件：將相關代碼文件進行合併
    II. Css Sprites：將多張圖片合併成單張圖片，經過css來控制什麼地方顯示圖片的那個位置。
   III. 圖片映射：也是將多圖拼在一塊兒，而後經過座標來控制。一般在頁面中連續的時候纔有用，好比導航條。
    IV. 行內圖片(Base64編碼): 經過編碼的字符串將圖片內嵌到網頁文本中。

 

   2.避免重定向

     重定向是一個比較常使用的技術手段，好比服務器地址進行遷移，修改了請求的url地址，這時一般會使用重定向，把訪問原網址的用戶重定向到新的url。

     因爲瀏覽器訪問地址是一連串的過程，若是重定向的話，就須要在訪問過程當中重複發起一連串的動做，會消耗不少時間，所以避免出現屢次重定向地址或資源的訪問。

 

   3.DNS預解析

     當瀏覽器與web服務器創建鏈接時，它是須要進行DNA解析的，將域名解析爲IP地址。首先咱們來了解一下它的過程：

      a.先檢查本地 hosts 文件中是否有映射，有則使用；

      b.查找本地 DNS 緩存，有則返回；

      c.根據配置在 TCP/IP 參數中設置 DNS 查詢服務器，並向其進行查詢，這裏先稱爲本地 DNS；

      d.若是該服務器沒法解析域名（沒有緩存），且不須要轉發，則會向根服務器請求；

      e.根服務器根據域名類型判斷對應的頂級域名服務器（.com），返回給本地 DNS，而後重複該過程，直到找到該域名；

      f.固然，若是設置了轉發，本地 DNS 會將請求逐級轉發，直到轉發服務器返回或者也不能解析。

    因此減小DNS的查詢次數很是重要，頁面加載時就儘可能避免額外耗時。爲了減小DNS的詢次數，最好的解決方法就是在頁面中減小不一樣的域名請求的機會。  

 

   4.使用CDN

     使用內容分發網絡，把你的網站內容分散到多個、處於不一樣地域位置的服務器上能夠加快下載速度。

 

2、瀏覽器緩存

    對一個網站而言，CSS、javascript、logo、圖標這些靜態資源文件更新的頻率都比較低，而這些文件又幾乎是每次http請求都須要的，若是將這些文件緩存在瀏覽器中，能夠極好的改善性能。經過設置http頭中的cache-control和expires的屬性，可設定瀏覽器緩存，緩存時間能夠是數天，甚至是幾個月。

    在某些時候，靜態資源文件變化須要及時應用到客戶端瀏覽器，這種狀況，可經過改變文件名實現，即更新javascript文件並非更新javascript文件內容，而是生成一個新的JS文件並更新HTML文件中的引用。

    使用瀏覽器緩存策略的網站在更新靜態資源時，應採用逐量更新的方法，好比須要更新10個圖標文件，不宜把10個文件一次所有更新，而是應該一個文件一個文件逐步更新，並有必定的間隔時間，以避免用戶瀏覽器突然大量緩存失效，集中更新緩存，形成服務器負載驟增、網絡堵塞的狀況。

 

3、頁面靜態資源

    1. 將CSS樣式表放在頂部

       若是將css樣式定義放在頁面中或者頁面底部，會出現短暫白屏或者某一區域短暫白板的狀況，這和瀏覽器的運營機制有關的，無論頁面如何加載，頁面都是逐步呈現的。因此在每作一個頁面的時候，用Link標籤把每個樣式表定義放在head中。

    2.將javascript腳本放在底部

       瀏覽器在加載css文件時，頁面逐步呈現會被阻止，直到全部css文件加載完畢，因此要把css文件的引用放到head中去，這樣在加載css文件時不會組織頁面的呈現。可是對於js文件，在使用的時候，它下面全部也頁面內容的呈現都會被阻塞，將腳本放在頁面越靠下的地方，就意味着越多的內容可以逐步呈現。

    3.使用外部javascript和CSS

       內聯js和css其實比外部文件有更快的響應速度，那爲何還要使用外部呢？由於使用外部的js和css可讓瀏覽器緩存他們，這樣不只HTML文檔大小減小，並且不會增長HTTP請求數量。另外，使用外部js和css能夠提升組件的可複用性。

    4.組件壓縮

      經過壓縮工具將js、css、html文件進行壓縮，減小項目文件大小。

    5.圖片優化

      圖片的優化主要是針對圖片大小、格式、展示形式進行處理，對於圖片資源處理網上介紹的方式有不少，在這裏就不進行詳細的介紹。