Chrome開發(fā)工具 時間軸示例

時間軸示例：強制同步布局的診斷

該示例展示了怎么使用時間軸找出一種被稱為“強制同步布局”的性能瓶頸。示例應(yīng)用程序循環(huán)演示了幾張圖片并且強制使用了在執(zhí)行基于幀的動畫時所推薦的 requestAnimationFrame() 方法。但是在動畫運行的時候仍然會出現(xiàn)不大理想的狀況，我們將使用時間軸來診斷發(fā)生了什么問題。

如果想要了解更多關(guān)于幀模式以及強制同步布局的內(nèi)容，請參考 使用時間軸 章節(jié)中的 Locating forced synchronous layouts。

制作記錄

首先，你需要制作關(guān)于動畫的記錄：

1. 點擊 Start 來啟動動畫。
2. 打開時間軸面板，然后找到幀視圖。
3. 點擊時間軸上的 Record 按鈕。
4. 在一到兩秒后（記錄了大概十到十二幀）停止記錄并且點擊 Stop 來停止動畫。

分析記錄

查看記錄中的前幾幀，每一幀的完整時間都在 300毫秒左右。如果你將你的鼠標停在其中一幀的上面，瀏覽器會顯示出該幀的詳細信息。

選中記錄中的某個動畫幀，在它的旁邊有個黃色的警告標志，此標志說明它是一個強制同步布局。顏色較暗的圖標表明其子記錄中存在有問題的代碼，而不是記錄本身有問題，此時可以展開 Animation Frame 字段來查看其子記錄。

子記錄顯示了 Recalculate Style 和 Layout 記錄的長度以及重復(fù)模式。每個布局記錄都是重新計算布局得到的結(jié)果，相應(yīng)地，也就是 requestAnimatinoFrame() 處理器請求頁面上的每張圖片的 offsetTop 值時所獲得的結(jié)果。將你的鼠標停留在其中一條記錄上，然后點擊 Layout Forced 屬性旁邊的 source.js 連接。

Sources 面板會打開源文件第43行的 update() 方法，也就是 requestAnimationCallback() 方法的回調(diào)處理器。該處理器會計算圖片 offsetTop 上的 left CSS 樣式屬性。這就使得修改布局后 Chrome 會立即將其展示出來，以確保它提供的值是正確的。

// 動畫循環(huán)
function update(timestamp) {
    for(var m = 0; m < movers.length; m++) {
        movers[m].style.left = ((Math.sin(movers[m].offsetTop + timestamp/1000)+1) * 500) + 'px';
    }
    raf = window.requestAnimationFrame(update);
};

在每個動畫幀中都強制載入頁面布局會使得運行速度變慢，現(xiàn)在我們可以嘗試直接使用 DevTools 來修復(fù)這個問題。

DevTools 內(nèi)的應(yīng)用修復(fù)

既然我們已經(jīng)知道了造成性能問題的原因，我們就可以直接在 Sources 面板中修改 JavaScript 文件然后立即測試更改的效果。

1. 在之前打開的 Sources 面板中，用以下代碼替換43行代碼。

通過其他記錄來驗證

該動畫顯然比以前更快、更流暢，但是衡量一下調(diào)整后的記錄和其他記錄的差異將會是一種很好的做法。具體的情況應(yīng)該像下面的記錄這樣：