優化網路連線

【使用CDN】

　　CDN全稱是Content Delivery Network，即內容分發網路，它能夠實時地根據網路流量和各節點的連線、負載狀況以及到使用者的距離和響應時間等綜合資訊將使用者的請求重新導向離使用者最近的服務節點上。其目的是使使用者可就近取得所需內容，解決 Internet網路擁擠的狀況，提高使用者訪問網站的響應速度

【使用DNS預解析】

　　當瀏覽器訪問一個域名的時候，需要解析一次DNS，獲得對應域名的ip地址。在解析過程中，按照瀏覽器快取、系統快取、路由器快取、ISP(運營商)DNS快取、根域名伺服器、頂級域名伺服器、主域名伺服器的順序，逐步讀取快取，直到拿到IP地址

　　DNS Prefetch，即DNS預解析就是根據瀏覽器定義的規則，提前解析之後可能會用到的域名，使解析結果快取到系統快取中，縮短DNS解析時間，來提高網站的訪問速度

　　方法是在 head 標籤裡面寫上幾個 link 標籤

<link rel="dns-prefecth" href="https://www.google.com">
<link rel="dns-prefecth" href="https://www.google-analytics.com">

　　對以上幾個網站提前解析 DNS，由於它是並行的，不會堵塞頁面渲染，這樣可以縮短資源載入的時間

減少http請求數量

【使用快取】

使用cach-control或expires這類強快取時，快取不過期的情況下，不向伺服器傳送請求。

強快取過期時，會使用last-modified或etag這類協商快取，向伺服器傳送請求，如果資源沒有變化，則伺服器返回304響應，瀏覽器繼續從本地快取載入資源；如果資源更新了，則伺服器將更新後的資源傳送到瀏覽器，並返回200響應

【圖片處理】

Base64：將圖片的內容以Base64格式內嵌到HTML中，可以減少HTTP請求數量。但是，由於Base64編碼用8位字元表示資訊中的6個位，所以編碼後大小大約比原始值擴大了 33%

使用字型圖示來代替圖片

減小資源大小

【壓縮】

　　1、HTML壓縮

　　HTML程式碼壓縮就是壓縮在文字檔案中有意義，但是在HTML中不顯示的字元，包括空格，製表符，換行符等

　　2、CSS壓縮

　　CSS壓縮包括無效程式碼刪除與CSS語義合併

　　3、JS壓縮與混亂

　　JS壓縮與混亂包括無效字元及註釋的刪除、程式碼語義的縮減和優化、降低程式碼可讀性，實現程式碼保護

【開啟gzip】

HTTP協議上的GZIP編碼是一種用來改進WEB應用程式效能的技術。

大流量的WEB站點常常使用GZIP壓縮技術來讓使用者感受更快的速度。

這一般是指WWW伺服器中安裝的一個功能，當有人來訪問這個伺服器中的網站時，伺服器中的這個功能就將網頁內容壓縮後傳輸到來訪的電腦瀏覽器中顯示出來。

一般對純文字內容可壓縮到原大小的40%

優化資源載入

【圖片懶載入】

圖片懶載入在一些圖片密集型的網站中運用比較多，通過圖片懶載入可以讓一些不可視的圖片不去載入，避免一次性載入過多的圖片導致請求阻塞，（頁面滾動再去載入）

【資源載入位置】

　　通過優化資源載入位置，更改資源載入時機，使盡可能快地展示出頁面內容，儘可能快地使功能可用

　　1、CSS檔案放在head中，先外鏈，後本頁

　　2、JS檔案放在body底部，先外鏈，後本頁

　　3、處理頁面、處理頁面佈局的JS檔案放在head中，如babel-polyfill.js檔案、flexible.js檔案

　　4、body中間儘量不寫style標籤和script標籤

【資源載入時機】

　　1、非同步script標籤

　　defer:  非同步載入，在HTML解析完成後執行。defer的實際效果與將程式碼放在body底部類似

　　async: 非同步載入，載入完成後立即執行

　　2、模組按需載入

　　在SPA等業務邏輯比較複雜的系統中，需要根據路由來載入當前頁面需要的業務模組

　　按需載入，是一種很好的優化網頁或應用的方式。這種方式實際上是先把程式碼在一些邏輯斷點處分離開，然後在一些程式碼塊中完成某些操作後，立即引用或即將引用另外一些新的程式碼塊。這樣加快了應用的初始載入速度，減輕了它的總體體積，因為某些程式碼塊可能永遠不會被載入

減少重繪迴流

給圖片設定尺寸---如果圖片不設定尺寸，首次載入時，佔據空間會從0到完全出現，上下左右都可能位移，發生迴流

不要使用table佈局---因為一個小改動可能會造成整個table重新佈局。而且table渲染通常要3倍於同等元素時間

webpack優化

【打包公共程式碼】

　　使用CommonsChunkPlugin外掛，將公共模組拆出來，最終合成的檔案能夠在最開始的時候載入一次，便存到快取中供後續使用。這會帶來速度上的提升，因為瀏覽器會迅速將公共的程式碼從快取中取出來，而不是每次訪問一個新頁面時，再去載入一個更大的檔案

　　webpack 4 將移除 CommonsChunkPlugin, 取而代之的是兩個新的配置項 optimization.splitChunks 和 optimization.runtimeChunk

　　通過設定 optimization.splitChunks.chunks: "all" 來啟動預設的程式碼分割配置項

【動態匯入和按需載入】

　　webpack提供了兩種技術通過模組的行內函數呼叫來分離程式碼，優先選擇的方式是，使用符合 ECMAScript 提案 的 import() 語法。第二種，則是使用 webpack 特定的 require.ensure

渲染完成後的頁面互動優化

防抖（debounce）/節流（throttle）

輸入搜尋時，可以用防抖debounce等優化方式，減少http請求；