iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

你所不知道的各種前端 Debug 技巧 系列

內容主體將會以 Chrome DevTools 為主,介紹各種常用功能,與其他瀏覽器的 DevTools 比較,另外會提及一些前端優化工具來應付網頁的問題(如 Web Vitals、SEO),盡可能詳盡的解釋各個功能的用法並搭配 Debug 情境來協助理解及應用。

鐵人鍊成 | 共 30 篇文章 | 219 人訂閱 訂閱系列文 RSS系列文 團隊Outcome First
DAY 21

[Day 21] Performance - How Rendering Works

利用 Performance 面板紀錄效能後,會發現其中以主線程 Main 圖表涵蓋了最多資訊,從開始解析 HTML 到最後繪製出頁面,瀏覽器都做了哪些事情呢?...

2020-10-04 ‧ 由 shizuku 分享
DAY 22

[Day 22] Performance - Rendering Optimization

概覽 大部分的瀏覽器會以每秒 60 次的頻率刷新頁面,反過來說只要瀏覽器來不及在 16 毫秒(1000/60)內產出下一個畫面就會讓使用者感覺卡卡的,影響使用體...

2020-10-05 ‧ 由 shizuku 分享
DAY 23

[Day 23] Performance - Analyze Paint & Layers

本文將會講解如何利用 DevTools 找出瀏覽器繪製頁面的效能瓶頸,並利用 GPU 和瀏覽器繪製頁面的機制來優化動畫效能,閱讀本文前建議先理解瀏覽器繪製頁面的...

2020-10-06 ‧ 由 shizuku 分享
DAY 24

[Day 24] Performance - Analyze Memory

有時候網頁會越跑越慢,到底發生了甚麼事情呢? 概覽 拖慢網頁效能的原因除了 JavaScript、Rendering 外,還有個可能就是用了過多的記憶體,尤...

2020-10-07 ‧ 由 shizuku 分享
DAY 25

[Day 25] Performance - Analyze Runtime Activities

在 Performance 面板中,為了讓開發者方便優化網頁效能,會盡可能把瀏覽器運作的過程分類為各種 Activities,開發者找出造成效能瓶頸的 Acti...

2020-10-08 ‧ 由 shizuku 分享
DAY 26

[Day 26] Cookies - SameSite Attribute

Chrome 從 84 版開始將 Cookie 的 SameSite 屬性預設為 Lax,使用到 Third-party cookies 的服務若沒有設定 S...

2020-10-09 ‧ 由 shizuku 分享
DAY 27

[Day 27] Cross-Origin Resource Sharing (CORS)

概覽 考量到安全問題,瀏覽器會以同源政策(Same-origin policy) 限制網頁對其他 Origin 的資源(Resource)存取,例如 AJAX、...

2020-10-10 ‧ 由 shizuku 分享
DAY 28

[Day 28] Device Simulation & Remote Debugging

隨著網站的手機使用率越來越高,行動版網站漸漸變成標配,為了避免同時需要維護多個網站或是 SEO 被瓜分,通常會以 RWD(Responsive Web Des...

2020-10-11 ‧ 由 shizuku 分享
DAY 29

[Day 29] Optimize Images

取自 Artifact Austin: Leaving Pixels Behind - Todd Parker,哪些圖片適合使用 SVG? 在網頁中,圖片...

2020-10-12 ‧ 由 shizuku 分享
DAY 30

[Day 30] Tips for Lazy Loading Images

Lazy loading 是廣為人知的網頁優化技巧,尤其應用在圖片上時能夠大幅減少效能和流量的浪費,目前也有許多圖片 Lazy loading 的套件可以使用,...

2020-10-13 ‧ 由 shizuku 分享