有没有办法在Javascript中为浏览器重排时间？

Question

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

我在下面有一个测试记录了同时加载10个相当重的PNG图形所需的时间长度.在代码中,我需要能够计算负载完成所需的时间.我已经尝试在动态Image对象上设置onLoad函数以产生以ms为单位的时间.然而,正如下面的上限所示,它给出了一个不准确的读数,因为它给出的读数很小,因为它只记录了负载的数据传输部分,然后有相当大的(3000 + ms)延迟时间.图像是可见的 - 以蓝色循环,这是浏览器重排循环.

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

Answer 1

如果您使用 jQuery，您可以尝试记录文档准备好和窗口加载之间的时间，这会给您一个近似值。

(function(){
    var start, end;

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

}());

编辑：

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