鐵人檔案
內容主體將會以 Chrome DevTools 為主，介紹各種常用功能，與其他瀏覽器的 DevTools 比較，另外會提及一些前端優化工具來應付網頁的問題（如 Web Vitals、SEO），盡可能詳盡的解釋各個功能的用法並搭配 Debug 情境來協助理解及應用。
利用 Performance 面板紀錄效能後，會發現其中以主線程 Main 圖表涵蓋了最多資訊，從開始解析 HTML 到最後繪製出頁面，瀏覽器都做了哪些事情呢？...
概覽 大部分的瀏覽器會以每秒 60 次的頻率刷新頁面，反過來說只要瀏覽器來不及在 16 毫秒（1000/60）內產出下一個畫面就會讓使用者感覺卡卡的，影響使用體...
本文將會講解如何利用 DevTools 找出瀏覽器繪製頁面的效能瓶頸，並利用 GPU 和瀏覽器繪製頁面的機制來優化動畫效能，閱讀本文前建議先理解瀏覽器繪製頁面的...
有時候網頁會越跑越慢，到底發生了甚麼事情呢？ 概覽 拖慢網頁效能的原因除了 JavaScript、Rendering 外，還有個可能就是用了過多的記憶體，尤...
在 Performance 面板中，為了讓開發者方便優化網頁效能，會盡可能把瀏覽器運作的過程分類為各種 Activities，開發者找出造成效能瓶頸的 Acti...
Chrome 從 84 版開始將 Cookie 的 SameSite 屬性預設為 Lax，使用到 Third-party cookies 的服務若沒有設定 S...
概覽 考量到安全問題，瀏覽器會以同源政策（Same-origin policy） 限制網頁對其他 Origin 的資源（Resource）存取，例如 AJAX、...
隨著網站的手機使用率越來越高，行動版網站漸漸變成標配，為了避免同時需要維護多個網站或是 SEO 被瓜分，通常會以 RWD（Responsive Web Des...
取自 Artifact Austin: Leaving Pixels Behind - Todd Parker，哪些圖片適合使用 SVG？ 在網頁中，圖片...
Lazy loading 是廣為人知的網頁優化技巧，尤其應用在圖片上時能夠大幅減少效能和流量的浪費，目前也有許多圖片 Lazy loading 的套件可以使用，...
