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);

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?