Measure Rendering Time of Change initiated by Javascript

Question

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?

Answer 1

1.Open Chrome (Blank)
2.Open DevTools (F12)
3.Move to 'Timeline' tab
4.Click record.
5.Paste in chrome your URL and click enter.
6. wait for the page to fully load.
7. Stop the recording.
I think you will find the answer there.

here is an example of your source results on chrome's timeline:

EDIT: For more details on JavaScript execution and results rendering times you can use 'DynaTrace' or 'SpeedTracer' (How it look like using one of these tools is HERE)