title: How to measure how long an element took to load?
body: <p>For analytics, I'm interested in logging the details of time taken to load various components of a webpage. I'm not interested in any of the 3rd-party analytics available already.</p>
  
  <p>More about the page:</p>
  
  <ul>
  <li>There are no iFrames. </li>
  <li>Each component is in a <code>&lt;div&gt;&lt;/div&gt;</code> of its own.</li>
  <li>Most components don't have images in them.</li>
  </ul>
  
  <p>What I've tried so far:</p>
  
  <ol>
  <li>onload event. This seems to work only for the <code>&lt;body&gt;</code></li>
  <li>addEventListener - for 'load' event, it doesn't work. :(</li>
  <li>A new tag to do this, via web components, but that isn't supported on IE8. Again, :(</li>
  <li><code>&lt;script&gt;logDivLoadedDetails();&lt;/script&gt;</code> - when strategically placed, works. But this makes the code ugly! And I do not want to add this to every div.</li>
  </ol>
  
  <p>Is there a way for me to gather the time it took to load a particular div?</p>
  
  <p>Also, some pointers on how to trigger a script on an element load will help me move along the right direction.</p>
  
  <p>Thanks in advance!</p>