Some unnecessary work is done before first paint, like:

* calculations that require layout information
* non-critical work we'd like to defer

We use setTimeout, requestAnimationFrame, and Polymer.dom.flush to try to defer this work. But if the page has not completely loaded, the content may not be fully rendered. Neither setTimeout nor requestAnimationFrame waits for the page to load before calling their callbacks.

Polymer.RenderStatus and the "attached" method also don't wait for the page to load: https://github.com/Polymer/polymer/issues/3629

So we want to find a better way to defer work until the stuff we want is rendered.


Page load goes something like this:

While Element = ParseNext()
  If Element is a normal <script src> or <link rel=import>:
    Synchronously fetch and parse that URL
  If element is a normal <script src> or <script>:
    Synchronously execute any un-executed scripts inside previously imported pages, in order
    Synchronously execute Element's script
Set document.readyState = "interactive"
Synchronously execute any un-executed scripts inside previously imported pages, in order
Wait for some other resources to finish loading
Set document.readyState = "complete" and fire "load" event

During this process, the page can partially render whenever it wants to.

We can run our deferred work asynchronously after the "load" event, but we *could* be able to run it sooner if the page renders sooner.