常見的網站效能最佳化手段

標籤：image   瞭解   iframe   css   改善   速度   檔案下載   表達   通過   

一、瞭解web？

HTML創造結構，CSS表現樣式，JS控制行為，三者一起形成了使用者可見可操作的web頁面。

但是不同網站頁面的載入速度、使用者請求的執行速度卻大相徑庭。

頁面初始載入的HTML資源、CSS資源、JS資源、多媒體資源、資料資源等，都會影響頁面的載入速度和執行速度。

但是好的web頁面不僅要簡潔易懂，還要讓人賞心悅目，還得有內容。

所以前端程式員不僅得會寫代碼，還得注重網站最佳化和網站安全，更得保證使用者體驗。

二、最佳化的目的是什嗎？

    1. 從使用者角度而言，最佳化能夠讓頁面載入得更快、對使用者的操作響應得更及時，能夠給使用者提供更為友好的體驗。
　 2. 從服務商角度而言，最佳化能夠減少頁面請求數、或者減小請求所佔頻寬，能夠節省可觀的資源。
　     總之，恰當的最佳化不僅能夠改善網站的使用者體驗而且能夠節省相當的資源。

三、效能最佳化的手段

     1、HTML最佳化方法

         1）使iframe的數量最小 

         2）盡量不要在HTML中縮放映像（大圖片縮成小圖片會浪費頻寬，盡量直接用小的圖片） 
     2、CSS最佳化方法

         1）把style樣式表置於頂部head中

         2）避免使用CSS運算式（Expression） 

         3）用<link>代替@import 

         4）最佳化CSS Spirite

         5）削減JavaScript和CSS (使用grunt、gulp壓縮CSS)

    3、JS最佳化方法

        1）減少DOM元素數量 

        2）把指令碼置於頁面底部 

        3）減少DOM訪問 

        4）非同步請求 Callback

     4、網站最佳化

        1）盡量減少HTTP請求次數 ----（檔案合并、如CSS Sprites、image Map）

              CSS Sprites是減少映像請求的有效方法。把所有的背景映像都放到一個圖片檔案中，然後通過CSS的ackground-position屬性來顯示圖片的不同部分；

        2）檔案壓縮打包----目的是減少檔案下載的體積

        3）使用緩衝----設定Http Header裡面緩衝相關的欄位，做進一步的最佳化（原則很簡單，能緩衝越多越好，能緩衝越久越好。）

        4）使用CND（內容分布網路）來託管資源

常見的網站效能最佳化手段