如何進行網站性能優化？

一.背景介紹 

     

     前端優化的目的:

     

      1. 用戶：體驗好 

      2. 服務商：節省資源 

      簡而言之，就是在不影響系統運行正確性的前提下，使之運行地更快，完成特定功能所需的時間更短。 

 

二.知識剖析 

 

    2.1 優化途徑 

    

    1、頁面級 

      HTTP請求數、腳本加載、內聯腳本位置等 

      

    2、代碼級 

      DOM操作優化、CSS選擇符優化、圖片及HTML結構優化等 

      

     一、頁面級優化 

 

        1、減少HTTP 請求數————最重要最有效的方法

     

 

         減少時間成本和資源成本

     

         途徑 

         

          （1）從設計實現層面簡化頁面 

     

          （2）合理設置 HTTP緩存  原則:能緩存越多越好，能緩存越久越好

                     

          （3）資源合并與壓縮

          

          （4）CSS Sprites

           

          （5）Inline Images——轉化為編碼

       

            let fr = new FileReader();

            $scope.max = $scope.file.size;//文件大小

            fr.readAsDataURL($scope.file);

            fr.onprogress = function($event){

                $scope.value = $event.loaded;

            }

            fr.onload = function ($event){//預覽圖片

                preview.src = $event.target.result;

            }

        

           缺點：增大了頁面的體積，而且無法利用瀏覽器緩存 

     

          （6）圖片懶加載 

 

               圖片地址緩存在 Textarea標簽中，待用戶往下滾屏的時候才 “惰性” 加載

     

    

        

        2、外部腳本置底 

        

        3、異步執行inline腳本 

        

        4、Lazy Load Javascript 

        

        5、將 CSS放在head中 

 

        6、減少不必要的 HTTP跳轉 

         

        7、避免重復的資源請求 

        

    二、代碼級優化 

    

        1、JavaScript 

        

        (1)DOM 

        

           a. HTML Collection 

           在遍歷的時候可以將 length屬性、成員保存到局部變量后再使用局部變量。 

           

           b. Reflow & Repaint 

 

              減少Repaint 和 Reflow

           

              Reflow(回流/重排):元素

              Repaint(重繪): 屬性

                   

                  var el = document.getElementById('demo');

                  el.style.broderLeft = '1px';

                  el.style.broderRight = '2px';

                  el.style.padding = '5px';

           

           

           優化：減少此類操作 

           

        (2)減少作用域鏈查找 

            

           低效率的寫法：

           // 全局變量

           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次全局變量在函數中只需要將 globalVar中內容的值賦給localVar

           }

                         

           要減少作用域鏈查找還應該減少閉包的使用 

           

        (3)避免使用with（obj）｛｝、evel（）Function 

        

        (4)數據訪問 

        

           Javascript中的數據訪問包括直接量 (字符串、正則表達式 )、變量、對象屬性以及數組，

           其中對直接量和局部變量的訪問是最快的，對對象屬性以及數組的訪問需要更大的開銷.當出現以下情況時，建議將數據放入局部變量：

        

              a. 對任何對象屬性的訪問超過 1次 

              b. 對任何數組成員的訪問次數超過 1次 

       

        (5)字符串拼接 

        

           "+" :

           效率低：因為每次運行都會開辟新的內存并生成新的字符串變量，然后將拼接結果賦值給新變量；

           

           優化方法：join()

        

        2. CSS選擇符 

        

           ul li a { color: #444; } 

        

        

三.常見問題 

 

     3.1HTTP緩存怎樣設置？

     

     3.2鏈接后面是否帶“/”有什么區別？ 

 

     3.3如何正確理解 Repaint 和 Reflow？

 

 

四.解決方案 

     3.1

     HTTP緩存怎樣設置？ 

  

            meta http-equiv="Cache-Control" content="max-age=7200"

            meta http-equiv="expires" content="someGMT"

           

    3.2

    鏈接后面是否帶“/”有什么區別？ 

    

        有/會認為是目錄，沒/會認為是文件。  

        

        加了/瀏覽器會指向一個目錄，目錄的話會讀取默認文件index等等。

        

        沒有/會先嘗試讀取文件，如果沒有文件再找與該文件同名的目錄，最后才讀目錄下的默認文件。

        

        網址沒有加上/會給服務器增加一個查找是否有同名文件的過程。      

 

     3.3 如何正確理解 Repaint 和 Reflow ？

 

          Repaint(重繪)就是在一個元素的外觀被改變，但沒有改變布局(寬高)的情況下發生，如改變visibility、outline、背景色等等。

 

Reflow(重排)就是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會重新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證DOM樹上的所有其它結點的visibility屬性，這也是Reflow低效的原因。如：改變窗囗大小、改變文字大小、內容的改變、瀏覽器窗口變化，style屬性的改變等等。如果Reflow的過于頻繁，CPU使用率就會噌噌的往上漲，所以前端也就有必要知道 Repaint 和 Reflow的知識。

 

減少性能影響的辦法：

總之，因為 Reflow 有時確實不可避免，所以只能盡可能限制Reflow的影響范圍。