14. 如何透過 Speculation Rules 預先準備下一個頁面？
使用 Speculation Rules 設定 document prefetch、prerender、URL list、document rules 與 eagerness，並理解預測錯誤的成本與限制。
文章列表
共 16 篇文章
12. 響應式圖片怎麼做？srcset、sizes 與 picture
說明如何使用 srcset、sizes 與 picture，讓瀏覽器依照圖片尺寸、viewport、DPR 與格式支援度選擇合適的圖片資源。
13. 延遲圖片載入需要注意什麼
介紹 loading="lazy"、Intersection Observer、圖片尺寸與 placeholder 的使用情境，幫助延遲載入非首屏圖片並降低版面位移。
11. 圖片格式怎麼選？PNG、JPEG、SVG、WebP 與 AVIF
認識 PNG、JPEG、SVG、WebP 與 AVIF 的特性與適用情境，依照圖片內容、透明背景、畫質、檔案大小與瀏覽器支援度選擇合適的格式。
09. 瀏覽器渲染流程：從 DOM、CSSOM 到 Layout 與 Paint
從 DOM、CSSOM、Layout、Paint 到 Compositing，理解瀏覽器如何產生畫面，以及 CSS 變動為什麼會觸發 Reflow 或 Repaint。
10. Chromium Compositing 的運作機制：Tile、Rasterization 與 Viz
深入 Chromium 如何將 Layer 拆成 Tile，經過 Rasterization、CompositorFrame 與 Viz 顯示到螢幕，並理解 transform 與 will-change 如何影響動畫效能。
07. 優化資源的載入時機：Resource Hints
了解 dns-prefetch、preconnect、prefetch、preload 與 modulepreload 的差異，並依照資源發現時機與使用成本選擇適合的提示。
08. script 中 async、defer 與 module 的差異
比較一般 script、async、defer 與 module 的下載、執行和 HTML 解析時機，並理解它們與 DOMContentLoaded 的關係。
05. HTTP 內容壓縮：透過 Accept-Encoding 減少傳輸量
認識 Accept-Encoding、Content-Encoding 與 Vary 如何協商並區分 HTTP 壓縮版本，以及如何使用 NGINX 啟用 gzip。
06. 瀏覽器快取機制
說明瀏覽器如何依照快取新鮮度重用資源，並透過 Cache-Control、ETag、Last-Modified 與 Cache Busting 減少重複下載。
02. 瀏覽器 Multi-process 架構
從 Single-process 架構的限制出發，認識 Chromium Multi-process 架構如何改善穩定性、流暢性與安全性，以及拆分 process 帶來的記憶體與 IPC 成本。
04. HTTP/1.0、HTTP/1.1 跟 HTTP/2 之間到底差在哪？
從連線重用、HTTP/1.1 pipelining 到 HTTP/2 multiplexing，理解三個 HTTP 版本如何改善請求等待與傳輸效率。
03. 瀏覽器如何把網域名稱轉換成 IP？
從瀏覽器與作業系統快取一路追到 recursive resolver，理解網域名稱如何被解析成可連線的 IP 位址。
01. 在瀏覽器輸入網址並送出後，到底發生了什麼事？
從網址解析、DNS、連線、HTTP request 一路走到 HTML 解析與畫面渲染，先建立一次完整 Navigation 的流程地圖。
常用 VS Code plugin 介紹
整理平常使用的 VS Code plugin，依照通用與前端開發情境分類介紹。
如何讓 VS Code 在開新視窗時使用 Tab 分頁的方式來開啟
透過 macOS 與 VS Code 的原生 Tab 分頁設定，將不同專案集中在同一個視窗中快速切換。