【问题标题】:How to measure complete all-in performance of DOM changes?如何衡量 DOM 更改的完整性能?
【发布时间】:2013-06-14 05:22:54
【问题描述】:

我找到了很多关于测量页面加载时间的信息,还有很多关于分析交互式应用程序的 FPS 性能的信息,但这与此稍有不同。

假设我有一个以 SVG 呈现的图表,每次点击都会导致图表呈现略有不同。我想了解从点击到屏幕上的像素实际发生变化的时间点之间经过的完整时间。有没有办法做到这一点?

测量 Javascript 时间是直截了当的,但这并没有考虑浏览器花在任何布局、流程、绘制等方面的时间。

我知道 Chrome 时间线视图显示了大量关于此的有用信息,这对于挖掘问题非常有用,但对于进行测量却不是那么好,因为该工具本身会影响性能,更重要的是,它仅适用于 Chrome。我希望有一种独立于浏览器的技术可能会起作用。类似于 Navigation Performance API 如何处理页面加载时间。

【问题讨论】:

  • 出于隐私原因不会实施,例如您也许可以通过计算渲染时间之间的差异来计算访问过的链接状态。
  • 不确定,但无论如何它不会用于生产。我想知道是否可以通过计时 2 个 requestAnimationFrame 调用之间的间隔来实现这一点?在一个动画帧中更改 DOM 的代码以及调用第二个动画帧需要多长时间的时间。问题是浏览器是否会在调用第二个调用之前完成它的所有工作,包括绘画……

标签: html performance dom svg


【解决方案1】:

您可以考虑使用捕获 hdmi 捕获硬件(仅 google 为它)或高速摄像机来创建可以离线分析的视频。
http://www.webpagetest.org/ 仅支持使用软件进行捕获,但我想它会对于你想要测量的东西来说太慢了。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2022-11-11
    • 2011-01-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多