[英]Why does Chrome render JavaScript so slowly?
我有一个包含随机行数的页面,每行有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错误?
这不是一个错误,它只是webkit / blink的非最佳布局策略的结果。 这是幕后发生的事情:
这意味着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的解决方案。 使用脚本对于这项工作来说是不合适的工具,并且会疏远关闭脚本的访问者。
chrome profiler(可通过右键单击,检查元素,Profiles)显示它是offsetHeight消耗最大的部分,它似乎与chrome中的这个开放bug有关:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.