WEB前端性能優化常見方法


web前端是應用服務器處理之前的部分,前端主要包括:HTML,CSS,javascript,image等各種資源,針對不同的資源有不同的優化方式。

1. 內容優化

(1)減少HTTP請求數:這條策略是最重要最有效的,因為一個完整的請求要經過DNS尋址,與服務器建立連接,發送數據,等待服務器響應,接收數據這樣一個消耗時間成本和資源成本的復雜的過程。
    常見方法:合並多個CSS文件和js文件,利用CSS Sprites整合圖像,Inline Images(使用 data:URL scheme在實際的頁面嵌入圖像數據 ),合理設置HTTP緩存等。
(2)減少DNS查找
(3)避免重定向
(4)使用Ajax緩存
(5)延遲加載組件,預加載組件
(6)減少DOM元素數量:頁面中存在大量DOM元素,會導致javascript遍歷DOM的效率變慢。
(7)最小化iframe的數量:iframes 提供了一個簡單的方式把一個網站的內容嵌入到另一個網站中。但其創建速度比其他包括JavaScript和CSS的DOM元素的創建慢了1-2個數量級。
(8)避免404:HTTP請求時間消耗是很大的,因此使用HTTP請求來獲得一個沒有用處的響應(例如404沒有找到頁面)是完全沒有必要的,它只會降低用戶體驗而不會有一點好處。

2. 服務器優化

(1)使用內容分發網絡(CDN):把網站內容分散到多個、處於不同地域位置的服務器上可以加快下載速度。
(2)GZIP壓縮
(3)設置ETag:ETags(Entity tags,實體標簽)是web服務器和瀏覽器用於判斷瀏覽器緩存中的內容和服務器中的原始內容是否匹配的一種機制。
(4)提前刷新緩沖區
(5)對Ajax請求使用GET方法
(6)避免空的圖像src

3. Cookie優化

(1)減小Cookie大小
(2)針對Web組件使用域名無關的Cookie

4. CSS優化

(1)將CSS代碼放在HTML頁面的頂部
(2)避免使用CSS表達式
(3)使用<link>來代替@import
(4)避免使用Filters

5. javascript優化

(1)將JavaScript腳本放在頁面的底部。
(2)將JavaScript和CSS作為外部文件來引用:在實際應用中使用外部文件可以提高頁面速度,因為JavaScript和CSS文件都能在瀏覽器中產生緩存。
(3)縮小JavaScript和CSS
(4)刪除重復的腳本
(5)最小化DOM的訪問:使用JavaScript訪問DOM元素比較慢。
(6)開發智能的事件處理程序
(7)javascript代碼注意:謹慎使用with,避免使用eval Function函數,減少作用域鏈查找。

6. 圖像優化

(1)優化圖片大小
(2)通過CSS Sprites優化圖片
(3)不要在HTML中使用縮放圖片
(4)favicon.ico要小而且可緩存

 

參考:WEB前端性能優化常見方法


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM