高性能網站建設之前端優化
日期:2016-08-18點擊:3284
改進前端通常只要較少的時間和資源,例如修改Web服務器配置文件、將腳本和樣式表放在特定位置、合并圖片、合并腳本等,這些修改只需要幾個小時或幾天;而改進后端通常很麻煩,例如重新設計應用程序架構和代碼、查找和優化臨界代碼路徑、添加或改動硬件、對數據庫進行分布化等,這些需要花費數周或數月。
只有10%~20%的最終用戶響應時間花在了下載HTML文檔上,其余的80%~90%時間花在了下載頁面中的所有組件上。
高性能網站建設前端優化的舉措:
減少http請求次數(http請求次數對性能的影響很大):
在圖片方面,有三個具體方案:圖片地圖、CSS Sprites、內聯圖片三種,最值得關注的是CSS Sprites。
腳本和樣式表也要合并,雖然合并有悖于模塊化開發的原則,但非常有利于性能。
緩存可以使一些http請求轉為調用客戶端的已有資源。所以,必須關注Expires頭的設置。另外,HTTP1.1引入了“Cache-Control”頭,可以用“max-age”來設置緩存的時間長度。
移除ETag或者對ETag進行專門配置,以免影響緩存調取。因為默認配置的ETag,和原始服務器的屬性相關,當多臺服務器時,會導致緩存調取失敗。(N臺服務器,緩存調取成功的概率是1/N)
對于用戶的著陸頁(Landing Page),腳本和樣式表究竟應該內聯(寫到html里)還是應該外置?內聯有利于減少http請求數,外置有利于緩存。對這個問題的探討,產生了所謂“加載后下載(Post-Onload Download)”的方案:內聯,但在頁面加載完成后通過onload事件,動態下載外部腳本和樣式表。
充分利用并行下載:
使用兩個主機名。HTTP1.1建議瀏覽器從每個主機名并行下載兩個元素,使用多個主機名能進行更多的并行下載,但由于帶寬和CPU速度,過多的并行下載也會降低性能。Yahoo!的研究表明,使用兩個主機名性能最優。
將腳本放在底部,以避免對并行下載的影響。因為下載腳本時,并行下載是禁止的。
減小元素的大小:
精簡腳本。用JSMin精簡外置腳本,這能移除所有的注釋以及不必要的空白字符,使腳本減小20%。(內聯的腳本也應該盡量精簡)
優化CSS。CSS中的注釋和空白字符比較少,優化空間在于合并相同的類、移除不使用的類。同時,應避免使用CSS表達式,改用一次性表達式和使用事件處理器。因為CSS表達式會頻繁求值,當頁面滾動、甚至用戶鼠標移動時都會求值。
務必使用Gzip對腳本、樣式表、html文檔進行壓縮,這通常能減小60%的數據量。刪除注釋、縮短URL等雖然也有用,但費事得多且效果微弱。
其他:
避免沒必要的重定向(例如在URL的結尾必須出現“/”但沒有出現時),因為在重定向完畢并且html文檔下載完畢之前,沒有任何東西展示給用戶;對于為了跟蹤流量而使用的重定向,建議改用“referer”(僅可監測流向內部的流量),或“beacon+XMLHttpRequest”(可檢測所有流量,但方法較復雜)
使用CDN(Content Delivery Network),縮小內容和用戶的距離。
將樣式表放在頂部,這樣能使內容在瀏覽器中逐步呈現。盡管整個頁面的加載總耗時可能并無變化,但逐步呈現內容,能使用戶感覺更快。
適當減少主機名,以減少DNS查找。