测量由 Javascript 发起的更改的渲染时间答案

【问题标题】：Measure Rendering Time of Change initiated by Javascript测量由 Javascript 发起的更改的渲染时间
【发布时间】：2013-12-18 10:20:01
【问题描述】：

我想测量实际显示 javascript 完成的 DOM 更改所需的时间。

考虑这个示例 svg 文件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="1600"
   height="1000"
   version="1.1">
  <script xlink:href="clicktest.js" />
  <defs>
    <filter id="filterBlur" x="-0.6" width="2.2" y="-0.6" height="2.2">
      <feGaussianBlur stdDeviation="120" />
    </filter>
  </defs>
  <rect y="50" x="50" height="100" width="200" style="fill:#ff0000" onmousedown="red()" />
  <rect y="50" x="300" height="100" width="200" style="fill:#0000ff" onmousedown="blue()" />
  <circle cx="800" cy="600" r="300"  id="circle"
          style="fill:#888888;filter:url(#filterBlur)" />
  <text id="time" x="1250" y="50" style="font-size:40px">time...</text>
  <rect x="900" y="300" width="600" height="600"
        style="fill:#650088;fill-opacity:0.5;filter:url(#filterBlur)" />
  <rect x="100" y="400" width="300" height="400"
        style="fill:#999900;fill-opacity:0.5;filter:url(#filterBlur)" />
</svg>

这会显示两个rects，它们充当改变圆圈颜色的“按钮”。额外的rects 以及模糊和不透明度是为了让它更慢。

脚本：

function blue()
{
  var startTime = performance.now();
  document.getElementById('circle').style.fill = '#0000ff';
  var endTime = performance.now();
  document.getElementById('time').textContent = (endTime - startTime).toString();
}

function red()
{
  var startTime = performance.now();
  document.getElementById('circle').style.fill = '#ff0000';
  var endTime = performance.now();
  document.getElementById('time').textContent = (endTime - startTime).toString();
}

现在单击时，将显示不到 1 毫秒的时间，但是，显然需要将近一秒钟（在我的计算机上）直到实际显示更改的颜色（顺便说一句，Chrome 似乎比 Firefox 快)。

如何测量从点击开始到渲染结束的时间？

【问题讨论】：

requestanimationframe 可能会成为你的朋友。 developer.mozilla.org/en-US/docs/Web/API/…
@Ben：谢谢！这似乎适用于 Chrome 和 Opera，但根本不适用于 FF 或 IE。有什么提示吗？
无法在网页中使用 javascript 来衡量这一点。这需要使用某种插件或浏览器提供的工具集来完成。

标签： javascript browser svg performance-testing

【解决方案1】：

1.打开 Chrome（空白）
2.打开开发者工具 (F12)
3.移动到“时间线”选项卡
4.点击记录。
5.将您的 URL 粘贴到 chrome 中，然后单击 Enter。
6. 等待页面完全加载。
7. 停止录制。
我想你会在那里找到答案。

以下是 chrome 时间轴上的源结果示例：

编辑：有关 JavaScript 执行和结果呈现时间的更多详细信息，您可以使用“DynaTrace”或“SpeedTracer”（使用其中一种工具的效果是HERE）

【讨论】：

适用于 Chrome 和 Opera。但是，这当然不能用于使用 JavaScript 测量渲染时间。