優化上有很多面向，包括像針對後端，讓後端伺服器壓力變小、針對使用者，讓畫面更新流暢不會卡…

因此我將拆分幾篇，分別初探前端優化的不同面向

今天先來談談怎麼幫後端伺服器減輕壓力，來達到網頁的優化

為什麼需要優化？為什麼後端壓力那麼大？

當使用者變多，網站流量變大，API請求暴增，因為有些靜態的資源（如圖片、JS、CSS）放在資料庫，因此重複、頻繁的請求就會造成延遲、伺服器過載等問題

如果前端能減少請求數量與大小，就能替後端分擔壓力，讓整體效能提升

前端可以做什麼？

目的：減少網路的請求，降低伺服器負擔，來縮短資源載入時間

（這部份就只有大概提到而已，想要深入看可以去參考資料那邊的連結看那些文章）

1. 減少請求數量、大小

   • 資源壓縮（Minify JS / CSS / HTML）
   • 圖片優化（壓縮、WebP 格式）
   • 合併資源（把多個小檔合併成大檔，減少連線開銷）

2. 善用快取（Cache）

   把資料存到Cache，就不用每次都要和server溝通，減少server壓力

   下面是幾個cache稍稍介紹一下(之後可能再詳細寫一篇cache的內容）

   • HTTP Cache-Control：

     • 讓瀏覽器重複利用已下載的資源
     • 例如： 設定 cache有效期是 60 秒

     cache-control: max-age=60
     

   • Service Worker Cache：

     • 可以做到離線使用
     • 可以對Cach更細部的控制

   • LocalStorage / SessionStorage：

     （這邊之前有提過，就不再提了，可以去看Day9的文章）

3. 使用 CDN（Content Delivery Network，內容傳遞網路）

   CDN在各地建立edge server讓取資源的時候不用一直都去跟距離很遠的server溝通。使用的時候一開始還是要比較久和server溝通，但之後就會將內容存到CDN cache，請求的時候也會自動導向比較近且現在流量比較寬裕的edge server溝通

   CDN可以：

   • 讓使用者就近下載資源，減少跨區延遲，加速資源載入的速度
   • 使用者不會都和server溝通，可以分散server的壓力

4. 避免高頻率 API 請求

   • Debounce：限制耗時的請求不要頻繁的被觸發，例如：當搜尋框讓使用者輸入完後再送出請求
   • Throttle：限制一段時間內某操作只能被呼叫幾次，減少事件觸發頻率，例如scroll的時候限制一段時間呼叫一次事件，避免使用者如果一直scroll頁面，就會呼叫太多次就會造成效能瓶頸

參考資料

https://ithelp.ithome.com.tw/articles/10281389

https://ithelp.ithome.com.tw/articles/10277764

https://ithelp.ithome.com.tw/articles/10276666

https://ithelp.ithome.com.tw/articles/10276125

https://medium.com/@b09112332/認識service-worker-f2d2e74bd3c0

https://www.explainthis.io/zh-hant/swe/http-caching