影片網站的效能問題真的讓人又愛又恨——內容明明很精彩，但頁面載入慢個幾秒，訪客二話不說就關掉走人了。Google 的研究數據顯示，行動端頁面載入一旦超過 3 秒，跳出率會飆升 53%，這對靠流量吃飯的影片平台來說簡直是致命傷。回頭看這個吃瓜影片聚合平台的架構，選擇原生 JavaScript、不掛任何前端框架，其實已經在效能起跑線上贏了一半，畢竟少掉幾百 KB 的框架體積，首屏渲染自然快。
影片懶加載：別讓所有影片同時搶頻寬
瀑布流頁面一次載入幾十支影片預覽？那頻寬肯定爆炸，手機用戶會哭。實務上的做法是給 video 標籤設定 preload="none" 或 preload="metadata"，再搭配 Intersection Observer API，只有當卡片真正滑進可視範圍時才開始載入影片資源。我自己測過類似的場景，光是這一個改動，首屏載入時間就縮短了 40% 以上，流量消耗更是大幅下降。
快取策略是隱形的效能武器
原文提到系統內建了 CSV 檔案快取機制，這點相當聰明。CSV 解析雖然不算重活，但每次請求都重新讀檔、轉碼、過濾無效 URL，累積起來也是實實在在的開銷。前端這頭還可以更進一步，用 localStorage 快取分類清單和統計數據，使用者切換分類時就不用重新計算，體感速度會明顯提升。
動畫效能在細節裡見真章
卡片入場的漸入動畫看起來賞心悅目，但如果用錯 CSS 屬性，低階手機上會卡成幻燈片。記住一個原則就好：動畫只用 transform 和 opacity，這兩個屬效能觸發 GPU 加速，不會引發瀏覽器重新排版。另外搜尋功能務必加上 debounce 防抖，使用者每打一個字就觸發一次即時搜尋和高亮渲染，主執行緒就是這樣被一點點吃光的。設定 300 毫秒左右的延遲，體驗和效能就能兼得。
說到底，前端效能優化從來沒有銀彈，都是這種一點一滴的細節堆出來的成果。
評論（9）
懶加載真的是影片網站必備的招數，之前自己試過 Intersection Observer，首屏載入差超多
preload=”metadata” 跟 preload=”none” 實際效果有什麼差別？我每次都直接設 none 怕浪費流量
localStorage 快取分類清單這招不錯，切換頁面不用一直等重新計算
動畫用 transform 和 opacity 真的是基本，但還是看到很多網站用 top left 在那邊硬撐
debounce 300 ms 實測下來打字體驗還不錯，沒延遲感又不會卡渲染
手機用戶最怕的就是影片還沒載入先噴一堆流量，這篇講的懶加載很實用
影片格式有沒有考慮用 AV1 或 WebP 預覽圖？體積可以再降不少
原生 JS 不用框架，首屏速度確實快，維護起來也少一堆依賴問題
這些細節一項一項疊下去，效能差異就會很明顯，學到不少實務做法