❤️ 🍰 🌹 🎬 🚴♀️ 🏋️♀️ 💻 🚀 💜
這裡記錄了我的學習和開發筆記,歡迎交流 (*´∀`)~♥
© 2025. All rights reserved.
現今裝置更新畫面的頻率是每秒 60 幀(60Hz 或稱 60fps),意即每幀運行的時間最多是 16.67ms。但瀏覽器不僅要渲染畫面,還有很多事情要忙,因此每幀運行的時間只能約 10 ~ 12ms。若瀏覽器拖太久才更新畫面,就會產生顫動(Juddering)。想提高更新畫面的頻率、避免顫動,就要了解瀏覽器如何渲染畫面。
關鍵轉譯路徑 轉譯效能 效能調校 Critical Rendering Path Rendering Performance
動畫效能優化筆記。這裡提供三個方向:使用 requestAnimationFrame、從瀏覽器渲染機制著手和使用 will-change。
requestAnimationFrame will-change 關鍵轉譯路徑 效能調校 轉譯效能
「Why did you update」是一個用來檢測 React 元件是否需要重新渲染的工具。若被判定不需要重新渲染,會 console 出這個元件先前與目前的 props 和 state 資訊和建議,作為開發者調整的依據。
react.js Rendering Performance 效能調校 轉譯效能 前端效能 系列文
四種將分支與主線同步的方法。
git rebase git cherry-pick git merge git
使用 Array.map、Object.values 和 Object.keys 處理「物件中有物件」和「陣列中有物件」的情況。
javascript array functional programming javascript
OOCSS、SMACSS、BEM、CSS Modules、CSS in JS … 這些規範(或稱心法、解法)存在的目的都是為了讓程式碼易懂、可重用,進而有效率地開發和維護。
CSS Modules CSS in JS BEM styled-components css
打指令 git rebase -i 後可進入互動介面,為提交紀錄換順序、編輯訊息或做合併。其中 Squash 和 Fixup 的差異是什麼呢?
git rebase git