Javascript 替换节点的所有子节点时，是否可以测量DOM渲染时间？

有没有办法衡量浏览器重新呈现页面某一部分所需的时间

我正在远离一个js库，我过去用来呈现表，现在它已经成为我正在处理的页面上的一个瓶颈。所以我要换成甜美的VanillaJS

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

从DOM中获取行数组，并根据单元格对它们进行排序。然后重新插入所有行

对javascript数组排序，删除所有行，重新创建并插入所有行

对javascript数组进行排序，生成包含所有行的HTML字符串，并替换父HTML 如果我在javascript中使用这三种方式计时，那么在更新排序后，就不会考虑DOM的呈现。第三种选择往往是最快的，但与第二种选择相差不大

问题是，当所有javascript都完成时（显然），计时器停止，但是DOM还没有完成渲染，所以我的测试没有那么准确

---

有没有办法测量DOM部分的重新渲染？如果没有，是否有人知道排序一个大表的哪个选项是最有效的方法？

正如@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完成渲染的帧。我这样调用上面的函数：

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

    // Calculations and DOM updates here. 

    this.stopped = true;
}

我添加了

this.stopped

变量，以防止计算触发测量结束，以免减慢渲染速度

在对10.000行进行排序和重新渲染的情况下，对行进行排序和重新渲染大约需要350毫秒，您可以明显地看到渲染需要更长的时间，因此我将

阈值设置为400。当尝试1000行排序和创建时，大约需要35毫秒，我将
阈值设置为40

最后，如果有人好奇的话，那就是对一个巨大的表进行排序和重画的结果。在MacBook Pro 2015 13英寸基本机型上测试

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

我认为这取决于系统。因此，您需要指定一个系统，并且只进行相对比较。在我看来，任何东西中的10000个都太多了，无法在一个页面上显示。@我知道有点尖刻，但这是由测试来确定哪种方式性能更好。假设静态错误（最后一次完成和实际停止之间的dt），我想你可以使用
requestAnimationFrame
并轮询状态。你可能会幸运地使用f12并测量加载和脚本编写时间