從 App 的生命週期來看瀏覽器渲染效能優化

以更高階的角度來看如何優化效能-App 的生命週期,讓開發者在 App 生命週期的各階段對於優化工作能做更好的選擇。

RAIL

RAIL 是 Google 提出以使用者為中心的效能建議,各階段要做的事和最多可花費的時間,若符合原則可讓使用者在操作時感到順暢。

RAIL

圖片來源:Measure Performance with the RAIL Model

這四個英文字母代表的意義分別是

範例 1

從使用者與 UI 互動的角度來看,會是這樣的狀況…

RAIL

圖片來源:App Lifecycles: RAIL - Animations Part 2

說明

範例 2

在 Idle 階段,處理什麼事情是適合的?

答案是 B、C、E,這階段適合載入使用者稍後會用到的 assets。基本上,當畫面載入完畢 (A) 文字顯示 和 (D) 基本或重要功能 必定已完成。

Threshold

Browser Rendering Pipeline 要符合 RAIL,所必須達到的門檻值。

Threshold

圖片來源:Making a Silky Smooth Web

例如,若動畫必須控制在 10ms,那麼

FLIP

FLIP 是一個方法(非框架),它可將位置和尺寸這些高成本的動畫,例如使用 width、height、position 等,轉換為使用 transform 的方式來實作,進而讓動畫能達到 60fps。原理是透過紀錄元素的初始(F)和結束(L)的兩個快照,然後對這個元素使用 transform 來做反轉(I),讓元素看起來還在初始狀態,最後移除元素上的 transform 來讓元素從初始狀態開啟播放動畫(P)到結束。

這四個英文字母代表的意義分別是

以上聽起來很抽象,但也就是經由一些數學運算,將原本使用花成本的指令來實作的動畫改用 transform 來完成。

範例

展示如何使用 FLIP 轉換高成本動畫,改以 transform 實作。

轉換前

這裡有一個藍色小方塊,它會從上方移動到下方,若用 position 的 top 來看,就是從 0 移動到 200px 處,注意外圍有 padding 15px。

點此看 Demo。

若使用 position 來實作動畫,使用 Chrome DevTools 檢視,畫面更新頻率為 3 fps。

步驟說明,也就是程式碼解析

轉換後

經由 FLIP 方法的計算後,invert 的值為 -185,也就是說,可使用 transform 往下移動 185px。

點此看 Demo。

使用 Chrome DevTools 檢視,畫面更新頻率為 60 fps。

參考資料


comments powered by Disqus