为什么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秒内执行。在chrome中，我没有计算但是超过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中的open bug相关：