列舉6個常見且實用的Web前端效能最佳化方法

       在如今這個資訊爆炸的時代，人們的節奏總是快速的，對於一個網站的耐心畢竟是有限的可憐的，如果網站不進行最佳化必定會流失相當一部分的客戶，帶來不必要的損失。那麼從Web前端的效能最佳化上來說有哪些常見、實用的方法呢？下面小千就列舉6個常見且實用的Web前端效能最佳化方法。

       1、使用CDN

       CDN（內容分發網路）部署在各大運營商機房，當使用者透過瀏覽器請求資源時可以直接反饋給使用者，極大的減輕了伺服器資料中心的壓力。本質上CDN也是一種快取，如果你的所在地距離某個CDN節點很近，那麼網站響應的速度提升也是非常明顯的。另外CDN所快取的資源主要為靜態資源，如靜態頁面、圖片、css和js檔案等。CDN加速對於一些遍佈範圍較大的網站來說效果最為明顯，使用的話像阿里雲CDN產品，其節點多達280多個，覆蓋運營商也比較全面。

       2、減少外部http協議

       網頁載入的時間與http請求密不可分，而外部資源的載入的速度則與主機服務提供商伺服器架構和分佈地點有關。我們可以透過檢查自己的網站上多餘的圖片、css、JavaScript和一些元件，然後對應的去逐個完善，就可以減少一些http請求。

       3、使用預獲取

       顧名思義預獲取就是在真正有需要去請求之前就獲取一些必要的資料和資源，以提升使用者的瀏覽體驗。預獲取主要有三大方式：

       1.連結預先獲取

       2.DNS預先獲取

       3.預先渲染

       根據你想要使用的預先獲取形式，你只需在網站 HTML 中的連結屬性上增加 rel="prefetch",rel="dns-prefetch"，或者 rel="prerender" 標記。

       4、壓縮HTML、CSS和JavaScript

       在編寫程式碼時候會有一些多餘的空格，這會佔用位元組，使用一些壓縮工具可以有效解決這個問題。值得注意的是，壓縮後的檔案，其可讀性就會變差，後期想維護就會變得困難了。

       5、最佳化圖片

       一張高畫質的圖片大概幾兆左右，而很多時候我們並不需要這樣的畫質，一般我們都會選擇將其儲存為高畫質的就可以了，這樣會有效減小載入圖片帶來的壓力。像JPEG圖片那樣包含了時間、地點、相機型號的格式，更不是我們所需要的。

       6、Ajax請求方式

       POST的請求，是不可以在客戶端快取的，每次請求都需要傳送給伺服器進行處理，每次都會返回狀態碼200。（可以在伺服器端對資料進行快取，以便提高處理速度）

       GET的請求，是可以（而且預設）在客戶端進行快取的，除非指定了不同的地址，否則同一個地址的AJAX請求，不會重複在伺服器執行，而是返回304。所以在進行Ajax請求的時候，可以選擇儘量使用get方法，這樣可以使用客戶端的快取，提高請求速度。

       以上就是小千整理的6個常見且實用的Web前端效能最佳化方法。進行Web前端最佳化似乎需要花費很大的精力，相信這篇應用指南中的一些小技巧能幫你極大改善網站載入速度。網站載入地越快，則使用者體驗越佳。因此，對Web前端進行最佳化能使給你和你的使用者都帶來益處。

       本文來自千鋒教育，轉載請註明出處。