[javascript] requestAnimationFrame 與 css3 animation 比較

之前看到了 requestAnimationFrame 的實作改善了原本使用 setTimeout 與 setInterval 所繪製動畫可能造成的效能問題。(相關文章) 於是想說來試著比較看看目前 css3 animation 與 使用 requestAnimationFrame 的 FPS 差異。 我只打算測試看看 chrome 跟 firefox,因為懶惰XD 首先我們先試著打開瀏覽器 dev tool 中的 FPS 監視器。 chrome 的開啟選項如下圖 打開此選項後,我們可以看到目前的 FPS 及使用的記憶體等資訊。 接下來我們嘗試寫一段 requestAnimationFrame 與 css3 animation 的程式碼 我們可以切換上面這段動畫所實作的方式( requestAnimationFrame 或 css3 animation) 我自己實測 Chrome: requestAnimationFrame 的 FPS 大概在 20-25,GPU 記憶體使用量為 7.5 MB css3 animation FPS則維持 60FPS,GPU 記憶體使用量為7.5 MB […]

Continue reading


[javascript] requestAnimationFrame 優化動畫效率與資源

今天看到這篇才知道原來瀏覽器有實作這樣一個動畫優化的 API 接口。 實際的支援度: IE10 以上的瀏覽器幾乎都支援。 以下大概解釋一下 requestAnimationFrame 實作原因及解決的問題 過去我們若使用 javascript 製作動畫,原理通常是使用 setTimeout 或 setInterval 去定時(如: 10ms)更改我們的 css 樣式。 但這樣的一個方法可能會導致效能的低落。 因為瀏覽器本來會有自己的 FPS 更新頻率,若我們設置的時間過短(小於瀏覽器FPS),反而導致過度的繪製及消耗過多資源。(可能導致耗電或效能等) 假設上面一列瀏覽器畫面為 16.7 毫秒的顯示頻率,而下面一列代表 10 ms setTimeout。 其實每個第三個繪圖是無法繪製的 (以紅色箭頭表示),因為在達到顯示器重新整理間隔之前就發生了另一個繪圖要求。 這樣的過度繪製造成動畫產生波紋,因為每個第三個畫面格都遺失了。這個降低的計時器解析度不但會對電池使用時間產生負面影響,也會降低其他應用程式的效能。 因此 requestAnimationFrame 主要是提供一個接口,讓動畫同步於瀏覽器畫面更新頻率。 來看看用法吧~ 跟一般 setTimeout 及 setInterval 用法相當類似,同樣傳入一個 callback ,但不需要傳入計時器微秒數(瀏覽器畫面更新時會自動呼叫這個 callback requestAnimationFrame(callback) 會回傳一個唯一的requestID,可以透過呼叫 cancelAnimationFrame(requestID) 取消此動畫。 直接看簡單的例子吧~ 上面是一個相當簡單的動畫,根據瀏覽器更新頻率去定時更新元素的 style 值。 PS. 以前就是因為 setTimeout 與 setInterval 讓我盡量避免使用 javascript […]

Continue reading