Skip to content

Instantly share code, notes, and snippets.

@fearphage
Forked from edvakf/defer_async_script.js
Created March 22, 2011 14:18
Show Gist options
  • Save fearphage/881274 to your computer and use it in GitHub Desktop.
Save fearphage/881274 to your computer and use it in GitHub Desktop.
async/defer support for Opera
// ==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);
@edvakf
Copy link

edvakf commented Mar 22, 2011

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

@edvakf
Copy link

edvakf commented Mar 22, 2011

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

@fearphage
Copy link
Author

You have any tests for these? Would be useful.

@fearphage
Copy link
Author

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

@edvakf
Copy link

edvakf commented Mar 22, 2011

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...

@fearphage
Copy link
Author

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

@edvakf
Copy link

edvakf commented Mar 23, 2011

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.

@paulirish
Copy link

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. :)

@edvakf
Copy link

edvakf commented Jun 14, 2011

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?

@webkeke
Copy link

webkeke commented Aug 22, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment