❤️ 🍰 🌹 🎬 🚴♀️ 🏋️♀️ 💻 🚀 💜
這裡記錄了我的學習和開發筆記，歡迎交流 (*´∀`)~♥
© 2024. All rights reserved.
從零打造前端效能監控系統 | WebConf Taiwan 2023 逐字稿
August 12, 2023 Sentry Cypress Web Vitals Memori Loading Performance Rendering Performance Core Web Vitals 效能監控 Real User Monitoring GitHub Actions CI/CD Chrome DevTools End-to-End Testing Google Analytics Lighthouse Synthetic Monitoring active monitoring cypress.io passive monitoring 加載效能 效能調校 端對端測試 自動化測試 轉譯效能 sharing WebConf Taiwan 前端效能 系列文 · 留言
在自動化測試前端效能時，可能會考慮的解法有：(1) Lighthouse CI Action 或 web-vitals library + 丟到某個地方做資料儲存和 dashboard；另一個解法是 (2) 利用 Cypress + Sentry 來取得相關資訊並做呈現。這篇文章會針對 Cypress + Sentry 這個解法做說明，並比較兩種解法。
July 11, 2023 Sentry Cypress End-to-End Testing GitHub Actions Lighthouse Loading Performance Rendering Performance Synthetic Monitoring active monitoring Web Vitals Memori 轉譯效能 加載效能 效能監控 效能調校 CI/CD Core Web Vitals cypress.io lighthouse-cli 端對端測試 自動化測試 前端效能 系列文 · 留言
利用 Styled System 建立一個更好的 UI 元件庫！
November 30, 2019 styled-system styled-components CSS Modules CSS in JS OOCSS BEM SMACSS css Bootstrap Critical Rendering Path End-to-End Testing 端對端測試 Loading Performance Media Query Modern Web Rendering Performance Responsive Web Design react.js webpack 加載效能 效能調校 自動化測試 轉譯效能 關鍵轉譯路徑 響應式網頁 sharing 趨勢科技 Trend Micro · 留言
這道題目涵蓋前端技術範圍很廣，很適合在各階段拿來梳理並檢視自己的技能和狀態。那麼，就讓我來檢視一下自己的狀態吧 d(`･∀･)b
November 26, 2018 效能調校 關鍵轉譯路徑 圖片最佳化 轉譯效能 你懂JavaScript嗎？ 你所不知道的JS 加載效能 快取 Rendering Performance Critical Rendering Path Resource Hints Web Workers Worker requestAnimationFrame Gzip HTTP Caching Loading Performance You-Dont-Know-JS cache javascript javascript prototype undefined 編碼 解碼 encode decode base-64 前端效能 系列文 · 留言
從內部來看瀏覽器到底在做什麼？
November 10, 2018 效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path Lighthouse Resource Hints Web Workers Worker requestAnimationFrame 前端效能 系列文 · 留言
處理輸入的函式可能會造成效能問題，例如：阻礙幀（Frame）的繪製，導致畫面無法順利繪製；還有可能造成額外的版面配置（Recaculate Layout / Reflow）工作。
September 3, 2018 效能調校 關鍵轉譯路徑 requestAnimationFrame 轉譯效能 Rendering Performance Critical Rendering Path 前端效能 系列文 · 留言
瀏覽器渲染效能（Browser Rendering Performance）總整理 (ゝ∀･)
July 23, 2018 關鍵轉譯路徑 效能調校 轉譯效能 Critical Rendering Path Rendering Performance Chrome DevTools Web Workers RAIL css3 animations 前端效能 系列文 · 留言
使用 Newsticker 作為改進渲染效能的範例，以下列出需要改進之處與解法，並附上測試結果。
July 22, 2018 關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Critical Rendering Path Chrome DevTools will-change requestAnimationFrame css css3 animations 前端效能 系列文 · 留言
使用 News Aggregator 作為改進渲染效能的範例，以下列出需要改進之處與解法，並附上測試結果。
July 21, 2018 效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path Forced Synchronous Layout Layout Thrashing Chrome DevTools will-change requestAnimationFrame css css3 animations 前端效能 系列文 · 留言
更詳細探討如何優化像素管道（Browser Rendering Pipeline）的繪製（Paint）和合成（Composite）這兩個階段。
July 20, 2018 效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path Chrome DevTools will-change css css3 animations 前端效能 系列文 · 留言
更詳細探討如何優化像素管道（Browser Rendering Pipeline）的樣式計算（Recalculate Styles）和版面配置（Recaculate Layout / Reflow）這兩個階段。
July 19, 2018 Layout Thrashing Forced Synchronous Layout 關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Critical Rendering Path BEM Chrome DevTools css css3 animations 前端效能 系列文 · 留言
避免 Micro-optimization、requestAnimationFrame、JavaScript Profiler、Web Workers、JS Memory Management。
July 19, 2018 requestAnimationFrame 關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Critical Rendering Path Chrome DevTools javascript css3 animations css 前端效能 系列文 · 留言
JavaScript 通常在作業系統的 Main Thread 執行，但若把程式碼放在 Web Workers 就可另闢戰場-Worker Thread，兩條線互不影響，讓 JavaScript 在背景執行，並且兩線可由訊息溝通-使用 postMessage 發送訊息、onmessage 接收訊息。通常我們會將需要長時間運算且不含 Window 或 DOM Element 操作的程式碼放在 Web Workers，好處是不阻塞 Main Thread 而讓速度變快。
July 18, 2018 Web Workers 效能調校 轉譯效能 Rendering Performance Chrome DevTools javascript Worker 前端效能 系列文 · 留言
以更高階的角度來看如何優化效能-App 的生命週期，讓開發者在 App 生命週期的各階段對於優化工作能做更好的選擇。
July 16, 2018 RAIL 效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance css3 animations css 前端效能 系列文 · 留言
現今裝置更新畫面的頻率是每秒 60 幀（60Hz 或稱 60fps），意即每幀運行的時間最多是 16.67ms。但瀏覽器不僅要渲染畫面，還有很多事情要忙，因此每幀運行的時間只能約 10 ~ 12ms。若瀏覽器拖太久才更新畫面，就會產生顫動（Juddering）。想提高更新畫面的頻率、避免顫動，就要了解瀏覽器如何渲染畫面。
July 13, 2018 關鍵轉譯路徑 轉譯效能 效能調校 Critical Rendering Path Rendering Performance Chrome DevTools Layout Thrashing Forced Synchronous Layout css3 animations css will-change flexbox BEM 前端效能 系列文 · 留言
動畫效能優化筆記。這裡提供三個方向：使用 requestAnimationFrame、從瀏覽器渲染機制著手和使用 will-change。
June 26, 2018 requestAnimationFrame will-change 關鍵轉譯路徑 效能調校 轉譯效能 css3 animations Rendering Performance Critical Rendering Path javascript css 前端效能 系列文 · 留言
「Why did you update」是一個用來檢測 React 元件是否需要重新渲染的工具。若被判定不需要重新渲染，會 console 出這個元件先前與目前的 props 和 state 資訊和建議，作為開發者調整的依據。
June 21, 2018 react.js Rendering Performance 效能調校 轉譯效能 前端效能 系列文 · 留言
使用 CSS3 Transition 和 Animation 製作動畫、效能優化。
August 27, 2017 css3 animations will-change Critical Rendering Path 關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Chrome DevTools css · 留言