web-性能優化

序言：

因爲我的網站的博客沒有閱讀量，哈哈哈，就將全部博客移步到思否上面，同時也有人指出個人錯誤，讓我可以發現個人問題，及時改正，很少bb...

正文：

對於每一個前端程序猿來講，前端優化是一個大問題。那麼針對前端進行的優化，會形成什麼結果？

• 對於用戶，直觀地提高用戶的瀏覽體驗。
• 對於服務商，減小帶寬，減小請求量，下降成本。

那麼前端優化到底有哪些渠道？總的來講能夠分爲兩類，第一類是頁面級優化，主要包括減小http請求數目、瀏覽器緩存、腳本無阻塞加載、腳本位置優化；第二類是代碼級優化，包括Dom操做的優化、圖片加載的優化、HTML結構優化等。

1. 頁面級優化

   1. 減小Http請求
      這種方式是最基本的，也是最重要的。咱們首先看看一次請求會經歷哪些過程：

      一個完整的Http請求包括DNS尋址、創建鏈接、發送數據、等待服務器響應、接收數據這樣漫長而複雜的過程。每次請求都包含數據的傳遞，而附帶的數據都會佔用相應的帶寬。同時，瀏覽器可處理的併發請求的數目是有限的，剩下的則須要等待瀏覽器的分批處理，加長了用戶的等待時間。

      那麼如何減小Http請求的數量？

   2. Http緩存機制
      對於那些不多變化的文件，如圖片、樣式文件等，能夠利用瀏覽器的緩存機制，將其緩存在客戶端，而不用每次都去服務器端獲取這些文件。Http緩存分爲 Expires策略 和 Cache-control 策略

      • Expires策略
        經過Http請求響應頭中的Data和Expires判斷是否可使用緩存文件，Data爲當前時間，Expires爲過時時間。貌似這個策略已通過時了。
      • Cache-control策略
        Cache-control策略與Expires策略做用相同，都是經過當前資源的有效時間，來控制瀏覽器是否從瀏覽器緩存中獲取數據仍是請求服務器。可是Cache-control可配置項更多，且優先級高於Expires。

        Http協議頭Cache-control包括：max-age、public、private、no-cache、no-store等
        1.public指可被任何緩存區緩存
        2.priivate指此緩存不共享，不對其餘用戶公開
        3.no-cache指請求或響應的消息不進行緩存
        4.no-store指請求和響應的消息不進行緩存
        5.max-age指緩存的生成時間（max-age = 300 即五分鐘）

那麼對於Cache-control策略，更靈活的則是配合Last-Modified/If-Modified-Since使用，Last-Modified指的是文件最後被修改的時間，當資源過時時，若發現具備Last-Modified聲明，則向服務器請求時帶上If-Modified-Since，即請求時間。服務器處理請求時，將文件最後修改的時間與請求時間作對比，判斷文件是否有修改，若已被修改，則返回資源全部數據，Http200；若未被修改，則響應Http304，通知瀏覽器繼續使用該緩存。

1. 資源合併壓縮
   資源合併與壓縮的優勢是減小請求資源的大小、減小請求。具體的方法則是合併CSS文件、JavaScript文件、圖片。圖片轉化爲base64格式，一樣減小請求。
2. 懶加載
   須要的時候再請求，不須要的時候無論。適用於圖片，分頁數據等。

3. 避免資源的重複請求
   假如頁面由多個模塊構成，每一個模塊請求了相同的資源時，則會獲得重複的資源。

   • 腳本位置優化
     假如將CSS文件放在Body中，界面則會由於CSS文件未加載出來，而出現的頁面混亂，影響用戶體驗，那麼最好將CSS文件放在Head中。外部腳本置於最底部，防止加載暫時不須要的外部腳本而阻塞圖片、CSS文件，避免頁面長時間處於空白狀態。

2.代碼級優化

1. JavaScript

   • Html收集器

     在js文件中，document.getElementsByTagName()、document.forms、document.images返回的都是HtmlCollection類型的集合，儘管咱們一直把它當作數組在使用，可是事實上它並非一個靜態的結果，每次訪問這個集合時，都會從新查詢一次更新一次集合。所以在使用這樣的集合時，咱們應先將它保存在一個數組裏面，再經過數組進行訪問，可提升性能。

   • 避免使用eval和Function

     每次經過字符串式的源代碼使用eval和new function構造函數時，腳本引擎須要將字符串轉化爲可執行的代碼，這個操做很是消耗資源，比簡單的定義函數慢了100倍以上。

   • 減小做用域鏈的查找
     在此舉兩例

     //低效率：
     // 全局變量 
     var globalVar = 1; 
       function myCallback(info){    
        for( var i = 100000; i--;){       
         //每次訪問 globalVar 
         //都須要查找到做用域鏈最頂端
         //本例中須要訪問 100000 次
         globalVar += i;    
        }
     }
     
     
     //高效率：
     // 全局變量 
     var globalVar = 1; 
       function myCallback(info){    
        //局部變量緩存全局變量     
        var localVar = globalVar;    
        for( var i = 100000; i--;){       
            //訪問局部變量是最快的        
            localVar += i;    
        }
     }

2. 數據訪問
   JS中的數據訪問包括直接量（字符串、正則表達式）、變量、對象、數組，JS對直接量和局部變量的訪問是最快的，那麼對於如下狀況：

   * 對對象屬性的訪問超過一次
     * 對數組成員的訪問超過一次  
       建議將其放入局部變量中。

3. 字符串拼接

   在JS中使用「+」來拼接字符串是很浪費內存的，在須要拼接較長字符串的時候，能夠考慮採用數組的join方法進行拼接。

4. Html優化

   1. 標籤有開頭有結尾。
   2. 減小使用iframe，一個iframe便是一個Http請求，會阻止當前頁面的加載，形成白屏。
   3. 減小沒必要要的嵌套，瀏覽器須要查找到開始標籤和結束標籤事後，纔開始渲染其中的內容。

   4. Script標籤寫在末尾，不然阻塞頁面顯示。

參考連接：

1. 緩存技術原理 http://blog.csdn.net/moshengl...
2. Web前端應該從哪些方面來優化網站? https://www.zhihu.com/questio...
3. 資源合併與壓縮減小HTTP請求 http://www.bubuko.com/infodet...
4. HTML性能優化 http://www.cnblogs.com/zzhui/...