我想为 JavaScript 函数编写一个单元测试,并测量一个函数在浏览器中触发重排的频率。给定以下示例:
// Bad example
function foo(elements) {
for (var i = 0; i < elements.length; i++) {
elements[i].className = 'w' + elements[i].offsetWidth;
}
}
// Good example
function foo(elements) {
var widths = [];
for (var i = 0; i < elements.length; i++) {
widths[i] = elements[i].offsetWidth;
}
for (i = 0; i < elements.length; i++) {
elements[i].className = 'w' + widths[i];
}
}
第一个示例的单元测试应该失败,因为它会触发每个元素的重排,但应该通过第二个示例,因为它不会触发重排。
唯一接近我想要的东西是mozPaintCount
,但它只会在每次油漆时增加,而不是在每次回流时增加。我需要类似mozReflowCount
or的东西mozRecalculateStyleCount
,但我在任何浏览器中都找不到任何可能的东西。如果存在这样的属性,则单元测试可能如下所示:
// mozReflowCount doesn’t exist, such a property is what I’m looking for
var reflowCountBefore = window.mozReflowCount;
foo(document.querySelectorAll('*'));
if (reflowCountBefore === window.mozReflowCount) {
// passed
}
else {
// failed
}
我知道我可以查看浏览器的开发人员工具来手动检查触发了多少回流或“强制同步布局”,但我不知道如何从 JavaScript 单元测试中访问这些数据。
问:如何通过 JavaScript 计算浏览器中的重排?