javascript - 阻止浏览器在 javascript 中呈现 CSS 更改？

Question

我有以下代码块需要尽快完成:

//someSpans is an array of spans, with each span containing two child spans inside of it
$.each( someSpans, function (i, span) {
    //Get the span widths, then add them to the style to make them permanent
    var aSpan = span.children[0];
    var bSpan = span.children[1];
    span.style.width = (aSpan.offsetWidth + bSpan.offsetWidth) + 'px';
    aSpan.style.width = aSpan.offsetWidth + 'px';
    bSpan.style.width = bSpan.offsetWidth + 'px';
});

如果 someSpans 是一个包含 1000 个对象的数组，上述循环将导致 3000 次浏览器重绘，即使屏幕上实际上没有任何变化，因为样式中新的“宽度”属性与现有的“自动”宽度相匹配。有没有办法阻止浏览器在循环完成之前重绘 CSS？我觉得这会大大减少完成循环所需的时间。

我觉得 requestAnimationFrame可能是完成我正在寻找的事情的关键，但也许我偏离了基地。

Answer 1

虽然为什么的评论很重要，但这里有一个更好的答案。

这里的部分问题是样式的交替读/写。也就是说，设置 span.style.width 现在已经使 aSpan.offsetWidth 变“脏”并且必须呈现 CSS。但是，考虑一下:

var aWidth = aSpan.offsetWidth;
var bWidth = bSpan.offsetWidth;
span.style.width = (aWidth + bWidth) + 'px';
aSpan.style.width = aWidth + 'px';
bSpan.style.width = bWidth + 'px';

渲染现在减少到每个循环一次。更具体地说，它是在导致渲染的 next 迭代中读取 offsetWidth。

练习:虽然它可以使代码变得更钝一些，有时是不必要的，但我有时会编写这样的代码来循环两次。第一次将操作收集到一个数组中，第二次循环能够在不访问任何布局值的情况下组合所有“设置”操作。

MSDN 有一些很棒的 documents on JavaScript performance这里最适用的是"Managing layout efficiently"