title: How to handle back button when browser is not firing popstate event immediately
body: <p>This question may sound weird, because most of the time popstate is fired synchronously as users press the back button.</p>
  
  <p>However, W3C spec states that a UA (browser) is allowed to queue popstate when <a href="http://www.w3.org/TR/html5/browsers.html#traverse-the-history" rel="noreferrer">traversing history</a> (see item 14), ie. <code>popstate</code> is fired asynchronously (even though URL has changed at this point).</p>
  
  <p>Browser vendors interpret and implement this spec differently. <a href="https://hacks.mozilla.org/2011/03/history-api-changes-in-firefox-4/" rel="noreferrer">Mozilla decides</a> Firefox should be able to fire <code>popstate</code> before <code>load</code>, and for good reasons, so that slow images will not block <code>popstate</code>.</p>
  
  <p>Chrome/Safari decides otherwise, and it leads our problem:</p>
  
  <p>When managing history for a web app, it's often desirable to kick off history management as soon as possible, eg. at <code>DOMContentLoaded</code> instead of <code>load</code>. <strong>But in return, users are not able to back out of any <code>pushState</code>, because all <code>popstate</code> are queued until <code>load</code>.</strong></p>
  
  <p>We are seeking advices for ways to handle such scenario. I come up with a few myself:</p>
  
  <ul>
  <li>Lazyload images, so <code>load</code> can fire ASAP.</li>
  <li>Block UI until <code>load</code> is fired.</li>
  <li>Init framework on <code>load</code> instead of <code>DOMContentLoaded</code>.</li>
  </ul>
  
  <p>Are there better solutions?</p>
  
  <p><strong>Update</strong>: Things get ugly when there are ajax that fire before <code>load</code>, if those request result in DOM change, and DOM change happens to have some images, <code>load</code> is delayed until those images are loaded/timeout, meaning <code>popstate</code> is queued for even longer.</p>
  
  <p><strong>Update 2</strong>: To add a simple demo for it, visit this <a href="http://jsbin.com/huxokosu/5/edit?html,js,console,output" rel="noreferrer">jsbin page</a> with chrome and see <code>popstate</code> will be blocked until <code>load</code> is fired. You can compare result between cached image and uncached image.</p>