13

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

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

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

图像基准

4

2 回答 2

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 回流计时器吗？基本上，它会检查浏览器在更改 dom 后将控制权返回给 JavaScript 引擎需要多长时间。根据页面，它应该可以在任何浏览器中使用，尽管我没有亲自测试过。也许您可以调整在测试期间运行的代码以计时页面中的重排。

于 2012-05-28T16:01:02.193 回答
1

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

如何将 PNG 设置为 divbackground-image并运行压力测试，它应该使用时间多次启用/禁用图像。

于 2012-08-29T19:57:27.323 回答