Measure Rendering Time of Change initiated by Javascript

I’d like to measure the time it takes until a DOM change done by a javascript acually is displayed.

Consider this example svg file:

<?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>

This displays two rects which act as “buttons” that change the color of a circle. The additional rects and the blur and opacity are for making it more slow.

The script:

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();
}

Now when clicking, a time less than 1 millisecond will be displayed, however, it obviously takes nearly a second (on my computer) until the changed color actually is displayed (where, btw., Chrome seems to be faster than Firefox).

How can I measure the time starting with the click and ending when rendering is finished?