cssdomrenderingbenchmarkingreflow

Is there a way to determine when CSS parsing/rendering has completed?

I am wondering for benchmarking purposes if there is a DOM event or other way to determine when the browser has finished parsing/rendering the CSS. I'm trying to optimize CSS selectors and need a way to measure the drawing/rendering/reflowing times.

Solution

  • If you are using Chrome/Chromium there is a built in profiler which includes rendering. This is what it looks like when run on this page: https://i.sstatic.net/J1PQi.png

    Press Ctrl-Shift-J to access the developer tools in Chrome.

    I'm sure that Firebug has something similar for Firefox.