javascript - Javascript 中有没有一种方法可以为浏览器回流计时？

Question

我需要能够对基于 webkit 的浏览器的特定构建进行基准测试，并测量执行某些操作(如 DOM 操作、内存限制等)所需的时间长度。

下面我有一个测试记录了同时加载 10 个相当重的 PNG 图形所花费的时间。在代码中，我需要能够计算完成加载所需的时间。我试过设置 动态图像对象上的 onLoad 函数以产生以毫秒为单位的时间。然而，如下图所示，它给出的读数不准确，因为它给出的读数很小，因为它只记录负载的数据传输部分，然后当图片可见 - 以蓝色循环，这是浏览器重排周期。

我可以使用 webkit 中的某些事件来记录浏览器何时完成回流，以便我可以对其进行基准测试？我必须能够以毫秒为单位记录时间在代码中，因为我正在测试的 webkit 构建没有开发人员工具。我能够观察到 Chrome 的差异，但两个构建之间的性能差异很大，我需要能够准确地量化它以进行比较。

Answer 1

如果您使用的是 jQuery，您可以尝试记录 document ready 之间的时间和 window load ，这会给你一个近似值。

(function(){
    var start, end;

    $(document).ready(function(){
         start = new Date()    
    });
    $(window).load(function(){
         end = new Date();
         console.log(end.getTime() - start.getTime());
    });

}());

编辑:

你看过Browserscope reflow timer了吗？ ？基本上，它会检查浏览器在更改 dom 后需要多长时间才能将控制权返回给 JavaScript 引擎。根据该页面，它应该可以在任何浏览器中运行，尽管我还没有亲自测试过。或许您可以调整测试期间运行的代码，以便为页面中的回流计时。