前端效能優化 Day19-20

tags: 前端效能優化

D-19 Application Shell Architecture

什麼是 Application Shell Architecture (App Shell)？

App Shell

• GOAL

  在網路環境較差 or 離線的情境下，仍能提供較為流暢的載入（用戶）體驗。 (like APP)

• IMPLEMENT
  

  

1. 在首次加載時，快速渲染靜態的「骨架」頁面 (app shell)
   1. 存在 service worker 的 cache
   2. service worker 會攔截網絡請求，優先從 cache 中獲取靜態資源，加快頁面載入速度
2. 非同步加載並更新動態內容

切分出 App Shell 架構？

1. App Shell 越簡單越好
2. 要包含足夠有意義的頁面內容
3. 為了使用者體驗，可以包括一些 placeholder 之類的元件

D-20 CDN

什麼是 CDN？

Content Delivery Network 內容傳遞網路

是一個分散式網路系統，由位於不同地理位置的伺服器組成，用於更有效地將數位內容(如網頁、圖片、影片、JavaScript 檔案等)傳遞給使用者。

• CONS

  • 加快網站的訪問速度✨
    將內容儲存在離使用者較近的伺服器上,減少傳輸距離,提高載入速度。
  • 分散流量負荷
    將流量分散到多個伺服器，可以承受更大的流量負荷，避免單一伺服器過載。
  • 提高可靠性
    即使某個伺服器出現故障，其他伺服器仍能提供服務。
  • 節省頻寬、人力成本
    CDN 供應商通常擁有更大更便宜的頻寬，可以提供更高的傳輸效率。
    
    

• PORS

  • 初期投資成本高
  • 動態內容處理能力有限
    
    
  • 對於技術人員的要求較高

CDN 的運作流程

*對於註冊過 CDN 的域名

1. 輸入網址 -> DNS 解析
   當使用者在瀏覽器輸入網址時,會先透過 DNS (Domain Name System) 將網域名稱解析成 IP 位址。
2. 連接 CDN 伺服器
   在 DNS 解析完成後，瀏覽器會連接離使用者最近的 CDN 邊緣伺服器（CDN Edge Server），而不是直接連接原始網站的伺服器。
3. 檢查快取資源
   CDN 邊緣伺服器會先檢查是否有使用者所需的內容資源(如圖片、CSS、JavaScript 等)已經快取在本地。
   1. yes → 直接從 CDN 邊緣伺服器傳送給使用者。
   2. no → 向原始網站的伺服器請求資源，並將其快取在本地。