一、載入資源優化

1、合併css、壓縮JS和CSS程式碼

減少http請求次數、減少請求的JS和CSS檔案大小

2、程式碼分割

減少http請求
把業務程式碼和第三方庫程式碼分離出來，因為業務程式碼更新頻率大，而第三方庫程式碼更新迭代相對較慢且可以鎖版本，所以可以利用瀏覽器的快取來載入這些第三方庫

3、圖片懶載入

減少頁面第一次載入的請求次數；防止併發載入資源過多造成頁面阻塞
步驟：1.頁面開始載入時不去傳送http請求，而是放置一張佔位圖；2.當頁面載入完(window.onload)時，並且圖片在可視區域再去請求載入圖片資訊

4、避免引入大量第三方庫

能用css做的效果，不要用js做；能用原生js做的，不要用第三方外掛。

5、使用雪碧圖

6、使用CDN

讓靜態資源載入更快，CDN請求最近/最快的伺服器

7、tree shaking

移除JavaScript中的未引用程式碼(dead-code)

二、提高渲染效率

1、儘量使用字型圖示或SVG代替傳統png圖

字型圖示和SVG是向量圖，方法不會變形，渲染速度快

2、事件的節流、防抖

提高js執行效率
防抖：僅執行多次觸發事件的最後一次
節流：僅執行多次觸發事件的第一次

//防抖
var timer;
function action(){
  if(timer){
    clearTimeout(timer);
  }
  timer=setTimeout(()=>{
    alert("要執行的事件")
  },1000)
}
//節流
var timer;
function action(){
  if(timer){
    return;
  }
  timer=setTimeout(()=>{
    clearTimeout(timer)
    alert("要執行的事件")
  },1000)
}
 

3、基於script標籤下載js檔案時，使用defer或者async來非同步載入

4、減少重流、重繪

(1)減少dom操作，多個操作合併到一起執行
(2)可將元素絕對定位脫離文件流，減少對其他元素的影響
(3)使用預先定義的css class一次性改變樣式
(4)使用window.requestAnimationFrame(),把程式碼推遲到下一次重繪

5、首屏內容使用SSR(Server Side Render)服務端渲染

在伺服器端載入執行js，將資料直接輸出到html，返回給客戶端的是渲染好的html

6、預渲染

通過webpack預渲染外掛(prerender-spa-plugin)將一些特定靜態頁面元件build時就編譯為html檔案，直接以靜態資源的形式輸出給搜尋引擎
預渲染不執行js，只適用於純靜態頁面

三、儲存

1、AJAX請求使用快取

GET請求，預設在客戶端進行快取，除非指定了不同的地址，否則同一個地址的AJAX請求，不會重複在伺服器執行，而是返回304告訴瀏覽器去本地拉取資料

2、利用localStorage、Application Cache做一些簡單資料的儲存，避免向後臺請求資料或者說在離線狀態下做一些資料展示