测量由Javascript启动的渲染变更时间

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

考虑这个示例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更快).

如何在渲染完成后测量从单击开始到结束的时间？