為什么Chrome渲染JavaScript的速度如此之慢？

Question

我有一個包含隨機行數的頁面，每行有2個列。 挑戰在於為每一行制作相同高度的兩列。 我用JS做到了。

var len = document.getElementById("translateContainer").children.length;

for(var i = 0; i<len; i++)
{
    var height = document.getElementById("origin_"+i).offsetHeight + 'px',
        col1 = document.getElementById("column_"+i),
        col2 = document.getElementById("column_sec_"+i);

    console.log(i);

    col1.style.height = height;
    col2.style.height = height;
}

當頁面上少於30-40行時，它們都很好。 但是，當有超過200行時，鉻開始滯后幾秒鍾。

我在http://jsfiddle.net/YSp76/創建了一個演示頁面。

在FF和IE中，它在大約2秒內執行。 在鉻我沒有數，但超過10。

問題出在我的代碼中或者是webkit錯誤？

Answer 1

這不是一個錯誤，它只是webkit / blink的非最佳布局策略的結果。 這是幕后發生的事情：

• 更改列高度“使布局無效”。
• 查詢offsetHeight需要有效的布局。 如果布局無效，則chrome需要重新布局無效元素。

這意味着Chrome會將頁面重新布局300次。 如果您可以訪問Mac，Safari 7.0具有用於調試此類事物（“布局時間線”）的出色工具。 Chrome在“時間軸”視圖中也有一些調試工具（過濾它以便只顯示“渲染”事件）。 有關避免布局的更多信息，請參閱http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html ，盡管其中提供的信息不完整。 不幸的是，關於WebKit渲染過程細節的唯一最新來源是WebKit源代碼本身。

要解決您的問題，您可以簡單地將查詢高度步驟與更改高度步驟分開。 這樣可以避免不必要的布局。 我在這里分享你的小提琴： http ： //jsfiddle.net/4fb2A/

var len = document.getElementById("translateContainer").children.length;

var origin_height = [];

for(var i = 0; i<len; i++)
{
    origin_height[i] = document.getElementById("origin_"+i).offsetHeight + 'px';
}

for(var i = 0; i<len; i++)
{
    var height = origin_height[i],
        col1 = document.getElementById("column_"+i),
        col2 = document.getElementById("column_sec_"+i);

    console.log(i);

    col1.style.height = height;
    col2.style.height = height;
}

但是，對於像這樣的布局任務，您應該非常努力地創建僅限CSS的解決方案。 使用腳本對於這項工作來說是不合適的工具，並且會疏遠關閉腳本的訪問者。

Answer 2

chrome profiler（可通過右鍵單擊，檢查元素，Profiles）顯示它是offsetHeight消耗最大的部分，它似乎與chrome中的這個開放bug有關：