系列文章
[Day 21] Performance - How Rendering Works
利用 Performance 面板紀錄效能後，會發現其中以主線程 Main 圖表涵蓋了最多資訊，從開始解析 HTML 到最後繪製出頁面，瀏覽器都做了哪些事情呢？...
[Day 22] Performance - Rendering Optimization
概覽 大部分的瀏覽器會以每秒 60 次的頻率刷新頁面，反過來說只要瀏覽器來不及在 16 毫秒（1000/60）內產出下一個畫面就會讓使用者感覺卡卡的，影響使用體...
[Day 23] Performance - Analyze Paint & Layers
本文將會講解如何利用 DevTools 找出瀏覽器繪製頁面的效能瓶頸，並利用 GPU 和瀏覽器繪製頁面的機制來優化動畫效能，閱讀本文前建議先理解瀏覽器繪製頁面的...
[Day 24] Performance - Analyze Memory
有時候網頁會越跑越慢，到底發生了甚麼事情呢？ 概覽 拖慢網頁效能的原因除了 JavaScript、Rendering 外，還有個可能就是用了過多的記憶體，尤...
[Day 25] Performance - Analyze Runtime Activities
在 Performance 面板中，為了讓開發者方便優化網頁效能，會盡可能把瀏覽器運作的過程分類為各種 Activities，開發者找出造成效能瓶頸的 Acti...
[Day 26] Cookies - SameSite Attribute
Chrome 從 84 版開始將 Cookie 的 SameSite 屬性預設為 Lax，使用到 Third-party cookies 的服務若沒有設定 S...
[Day 27] Cross-Origin Resource Sharing (CORS)
概覽 考量到安全問題，瀏覽器會以同源政策（Same-origin policy） 限制網頁對其他 Origin 的資源（Resource）存取，例如 AJAX、...
[Day 28] Device Simulation & Remote Debugging
隨著網站的手機使用率越來越高，行動版網站漸漸變成標配，為了避免同時需要維護多個網站或是 SEO 被瓜分，通常會以 RWD（Responsive Web Des...
[Day 29] Optimize Images
取自 Artifact Austin: Leaving Pixels Behind - Todd Parker，哪些圖片適合使用 SVG？ 在網頁中，圖片...
[Day 30] Tips for Lazy Loading Images
Lazy loading 是廣為人知的網頁優化技巧，尤其應用在圖片上時能夠大幅減少效能和流量的浪費，目前也有許多圖片 Lazy loading 的套件可以使用，...