Latency 延遲
執行一個操作要花費的「時間長度」。
Throughput 吞吐量
以一個時間區間作為單位，單位時間內可以執行「幾次」操作，或運算的「次數」。
系統設計目標
可接受的延遲數量下的最大化吞吐量為設計目標。
例子
有個專門製造汽車的工廠，它製造 1 輛汽車所需要的時間是 8 個小時，而它的生產線在 1 天當中可以製造 120 輛汽車。
- Latency 延遲：8 小時。
- Throughput 吞吐量：1 天 120 輛汽車，或者是 1 個小時 5 輛汽車。
Latency in web
Latency 是效能的一環，它讓我們得以量化，有所依規的來訂定優化的標準。那以 Web 來說的話，Latency 指的就是使用者自發出請求後，等待伺服器回應並回傳給使用者的總花費時間，也等同代表網站「被訪問的速度」。對於第一個請求，對於前面的 14Kb 位元，延遲時間會比較長，因為它包括 DNS 查詢、 TCP 三次握手和安全 TLS 協定。
關於延遲的 Web 相關技術
圖片的 Lazy Loading
- 這個部分我有實作過，原理是將圖片的路徑放在 data-set 中，再設定設計好的「載入中 placeholder」，透過 Intersection Observer API 來監聽元素是否進入畫面，當圖片元素進入畫面時，透過 JS 將 src 替換掉。需考量瀏覽器支援度。
延遲載入 3rd party,script 的屬性 defer 和 async。
- 以下兩者載入過程相同：渲染 DOM 與載入 JS 以非同步方式進行。
- defer：執行時間要等到 DOM 解析完成後，才會執行。
- async：執行時間是在於 JS 本身載入完成後馬上執行，會中斷 HTML 解析。
Preload 和 Prefetch
Preload：預先載入，但不執行，只在需要時才執行，以 as 屬性分辨檔案類型。
1
<link rel="preload" src="style.css" as="style">
- Prefetch：告訴瀏覽器未來可能用到這個資源，有空再去載就好。
1
<link rel="prefetch" src="style.css" type="style">
參考連結
系統設計入門：延遲與吞吐量