前端效能優化 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 → 向原始網站的伺服器請求資源，並將其快取在本地。