title: Profiling rendering time of SVG, Canvas for D3
body: <p>I am rendering a line graph in D3 and I have implemented the rendering using both <strong>SVG</strong> and <strong>Canvas</strong> (because I heard that rendering on canvas gives better performance for static data).</p>
  
  <p>I have tried to profile the time taken via Chrome inspection tools, and via JavaScript <code>performance.now()</code> shenanigans. However, both ways show that the function I wrote to draw the graph took only around 2000ms.</p>
  
  <p>In reality, the graph takes around 1-2 minutes before it's rendered to the screen. How do I time how much time the rendering actually takes (short of using a stopwatch of course)? I am trying to improve the performance of the drawing function because 1-2 minutes is too long.</p>