文章/答案/技术大牛

发布

社区首页 >问答首页 >当替换节点的所有子节点时，是否可以度量DOM呈现时间？

问当替换节点的所有子节点时，是否可以度量DOM呈现时间？
EN

Stack Overflow用户

提问于 2019-12-04 14:09:56

回答 1查看 217关注 0票数 4

是否有一种方法来衡量浏览器重新呈现一个页面的时间？

我正在从一个js库中移开，它以前是用来呈现表的，现在它已经成为我正在处理的页面上的一个瓶颈。所以我要转到甜VanillaJS。

我有一个包含10.000行(用于测试)和4-8列的表。每一列都是可排序的。我想确定的是，哪一种方法是对这个表进行排序最快的方法，我正在尝试三种方法。

从DOM中获取行数组，并根据单元格对它们进行排序。然后重新插入所有行。
对javascript数组进行排序，删除所有行并重新创建和插入所有行。
对javascript数组进行排序，生成带有所有行的

字符串，并替换父级innerHTML。

如果我用javascript对这三种方式进行计时，那么在更新排序时，它不会考虑DOM的呈现。第三种选择往往是最快的，但比第二种选择少得多。

问题是，当所有javascript都完成时，计时器就停止了(很明显)，但是DOM还没有完成呈现，所以我的测试并不是那么准确。

是否有一种方法来测量DOM部分的重呈现？如果没有，有谁知道哪一种选择排序一个巨大的表是最有效的方式？

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-12-05 08:33:35

正如@Estradiaz所建议的，您可以使用requestAnimationFrame()来度量呈现DOM所需的时间。要知道，这不是一个完美的解决方案，可能给不了足够的时间，但在我的情况下，它足够了。

startMeasure() {
    let start = null
    let previous = 0
    let threshold = 400
    const step = (timestamp) => {
        if (!start) start = timestamp;

        if (this.stopped && previous !== 0 && timestamp - previous > threshold) {
            console.log(`Total time: ${timestamp - start}ms`)
            return
        }

        previous = timestamp;
        window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
}

当浏览器试图以大约60 FPS (大约每帧16.6ms )的速度呈现页面时，我们可以假设比这花费更长时间的帧可能是DOM的呈现。下一个框架应该是DOM完成呈现的帧。我把上面的函数叫做：

function sortRows(th) {
    this.stopped = false;
    this.startTimer()

    // Calculations and DOM updates here. 

    this.stopped = true;
}

我添加了this.stopped变量，以避免计算触发度量的结束，以防呈现速度减慢。

在对10.000行进行排序和重新呈现的情况下，行的排序和重新绘制大约需要350 to，您可以明显地看到，呈现所用的时间稍微长了一点，所以我将threshold设置为400。当尝试1000行时，排序和创建大约需要35 to，我将threshold设置为40。

最后，如果有人好奇的话，整理和重绘一个巨大的桌子的结果。在MacBook Pro 2015 13“基础模型上进行测试。

                10.000rows
Knockout        2350 - 2900ms
Option 1        1800 - 2200ms
Option 2        1350 - 1600ms
Option 3         900 - 1250ms

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59177965

复制

相似问题

问当替换节点的所有子节点时，是否可以度量DOM呈现时间？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当替换节点的所有子节点时，是否可以度量DOM呈现时间？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当替换节点的所有子节点时，是否可以度量DOM呈现时间？
EN