async/defer support for Opera

async_defer_script.js

// ==UserScript==
// @name           defer/async for Opera
// @namespace      http://d.hatena.ne.jp/edvakf/
// @license        Public Domain
// ==/UserScript==

(function(window, document, opera) {
  function load_script(script, attr) {
    return function() {
      var script2 = script.cloneNode(true);
      script2.removeAttribute(attr); 
      script.parentNode.insertBefore(script2, script);
      script.parentNode.removeChild(script);
    };
  }
  
  var asyncSupport = 'async' in document.createElement('script');
  
  // support async and defer
  opera.addEventListener('BeforeExternalScript', function(e) {
    var script = e.element;
    
    if (!asyncSupport && script.hasAttribute('async')) {
      setTimeout(load_script(script, 'async'), 10);
      return e.preventDefault();
    }
    
    if (script.hasAttribute('defer') && document.readyState != 'complete') {
      window.addEventListener('load', load_script(script, 'defer'), false);
      return e.preventDefault();
    }
  }, false);
})(this, this.document, this.opera);

if (script.hasAttribute('defer')) {
  fn = load_script(script, 'defer');
  if (loaded) {
    fn();
  }
  else {
    window.addEventListener('load', fn, false);
  }
  return e.preventDefault();
}

can probably written as

if (script.hasAttribute('defer') && !loaded) {
  window.addEventListener('load', load_script(script, 'defer'), false);
  return e.preventDefault();
}

Also, async has more priority than defer, so bring it above defer.

You have any tests for these? Would be useful.

Also there should be a check of support before we override them as well.

Async test http://tokkono.cute.coocan.jp/blog/slow/wp-content/uploads/DeferTest/test-html5-async.html

Defer test http://tokkono.cute.coocan.jp/blog/slow/wp-content/uploads/DeferTest/test-html5-defer.html

Should look like http://f.hatena.ne.jp/edvakf/20110322172456 instead of http://f.hatena.ne.jp/edvakf/20110322172354

Apparently setTimeout of 1ms is not as good as 10ms according to the async test above, because there's still a blockage. (not sure if 10ms is the best though, maybe wait for DOMContentLoaded?)

You can check 'async' support by
'async' in document.createElement('script')
but no easy way for 'defer' because Opera reports
'defer' in document.createElement('script')
as true, which is not totally wrong according to HTML4.01...

I think defer is fine. Async isn't 100%.

http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution/ (precedence is wrong... whatever that means... didn't investigate)

Another old defer test: http://dl.dropbox.com/u/2400/tc/deferred/test.htm

precedence is to do with the order of execution.

The source of that page looks like this.

<script async src=1.js?delay=1200>
<script defer src=2.js?delay=600>
<script defer src=3.js?delay=300>
<script>4</script>

Normal Opera: 1->2->3->4

Opera with my hack: 4->1->2->3

Firefox/Chrome: 4->2->3->1

It's failing because Opera always respects order of scripts (even for dynamically inserted ones). Shouldn't cause any compatibility problem though.

either of you guys interested in making a proper repo for this?

well i suppose the more important question is... does using this userscript have a measurable impact on page perf?

it's pretty cool. :)

Are your suggesting us to make it into an extension, Paul?

This script works fine by itself, but if someone installed another script that listens to BeforeExternalScript event (Opera's privileged event) and do something as hacky as this one, then it may possibly fail.

According to the test cases, it does have measurable impact. However, I haven't bothered checking in real sites. Are there example of sites that use async/defer?

Hello, this code need to penetrate the parameters? Or can be directly used?