为什么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 的解决方案。使用脚本对于这项工作来说是不合适的工具，并且会疏远关闭脚本的访问者。