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

Question

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

我正在远离用于渲染表格的 js 库，该库现在已成为我正在处理的页面上的瓶颈。所以我要改用甜蜜的 VanillaJS。

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

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

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

对 javascript 数组进行排序，生成包含所有行的 HTML 字符串并替换父级 innerHTML。

如果我在 javascript 中对这三种方式计时，一旦我更新排序，它就不会考虑 DOM 的呈现。第三个选项往往是最快的，但与第二个选项相差不大。

问题是计时器在所有 javascript 完成后停止(显然)，但 DOM 还没有完成渲染，所以我的测试不是那么准确。

有没有办法测量 DOM 部分的重新渲染？如果没有，有谁知道对大表进行排序的哪个选项是最高效的方式？

Answer 1

正如@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.6 毫秒，我们可以假设帧花费的时间比 DOM 的渲染时间更长。因此，下一帧应该是 DOM 完成渲染的那一帧。我这样调用上面的函数:

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

    // Calculations and DOM updates here. 

    this.stopped = true;
}

我添加了 this.stopped变量，以免计算触发测量的结束，以防渲染速度变慢。

在对 10.000 行进行排序和重新渲染的情况下，行的排序和重新创建花费了大约 350 毫秒，您可以明显看到渲染花费了更长的时间，所以我把 threshold到 400。当尝试 1000 行排序和创建大约需要 35 毫秒，我把 threshold到 40。

最后，如果有人好奇的话，对一个巨大的表格进行排序和重绘的结果。在 MacBook Pro 2015 13"Base 型号上测试。

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