frontend

FCP : First Contentful Paint (首次內容繪製)，下載後的瀏覽器第一次渲染任何文字、圖片（包含背景圖片），以及非空白的 canvas… 的時間， 也就是頁面上呈現第一個 DOM 元素的時間，可能不是從伺服器載入的第一個元素，但它是 User 看到的第一個元素。 TTI : Time to interactive (可互動時間) 從 FCP 開始 User 多久以後可以跟這個畫面互動的所需時間 TBT :Total Blocking Time(總阻塞時間) 在 FCP 到 TTI 之前，實際上 測量 main thread 被 long task (超過 50ms) block 的加總時間 Hydration : WEB 技術從SSR (後端渲染) 演進到 CSR (前端渲染)，但是 Hydration 這一塊重複的 Overhead 是不必要的，目前有一個 Qwik 框架(angular 之父 Miško Hevery也是核心成員)，克服了這一個問題。這一塊問題的重視主要是在 B2C的網站，有 UX 實驗當網站下載時間每慢 1 秒 則損失 10% 的User，對 2B 影響較小 (企業系統很多寫得很爛反應時間超過 50秒甚至動不動就掛掉很扯都可以接受了!...

從 A 14kb page can load much faster than a 15kb page(endtimes.dev)的對於網頁大小 14KB vs 15KB 的速度差異比 15KB vs 16KB 大很多的討論，其核心原因在於 TCP Slow Start 演算法 所造成。 再查了 Mozilla 的 TCP Slow Start / 14KB rule，原來在 TCP Slow Start 演算法中的第一個 response packet 是 14 KB，Server ACK是 28KB。 大部分 Server 實作 TCP slow start 的 initial window 仍是 10 個 TCP packets (少數 Server 已修改增加至 30 個 packets) (Ethernet standard 中一個 TCP packet 的 Max Size 是 1500 bytes)...