Question

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

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

我是否可以使用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引擎所需的时间。根据页面，它应该在任何浏览器中工作，虽然我没有亲自测试它。也许您可以调整测试期间运行的代码，以便在页面中重新定时。

Answer 2

另外，您可能想看一下CSS压力测试。小书签非常适合页面性能测试。 http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

如何将PNG设置为div background-image并运行压力测试，它应该通过计时多次启用/禁用图像。

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

2 个答案: