前端工程師,喜歡蒐集明信片、設計簡單的小物、旅遊和看電影。
這裡紀錄了我的學習和開發筆記,歡迎交流 (*´∀`)~♥
© 2021. All rights reserved.
利用 Styled System 建立一個更好的 UI 元件庫!
November 30, 2019 styled-system styled-components OOCSS BEM SMACSS CSS Modules CSS in JS css Bootstrap Critical Rendering Path End-to-End Testing Loading Performance Media Query Modern Web Rendering Performance Responsive Web Design react.js webpack 加載效能 效能調校 自動化測試 轉譯效能 關鍵轉譯路徑 響應式網頁 sharing · 留言
這道題目涵蓋前端技術範圍很廣,很適合在各階段拿來梳理並檢視自己的技能和狀態。那麼,就讓我來檢視一下自己的狀態吧 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 效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path requestAnimationFrame · 留言
瀏覽器渲染效能(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 效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path Layout Thrashing Forced Synchronous Layout 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 · 留言
現今裝置更新畫面的頻率是每秒 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 效能調校 轉譯效能 關鍵轉譯路徑 css3 animations Rendering Performance Critical Rendering Path requestAnimationFrame will-change javascript css · 留言
使用 CSS3 Transition 和 Animation 製作動畫、效能優化。
August 27, 2017 css3 animations css 效能調校 will-change 關鍵轉譯路徑 Critical Rendering Path Chrome DevTools 轉譯效能 Rendering Performance · 留言