Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
async/defer support for Opera
// ==UserScript==
// @name defer/async for Opera
// @namespace
// @license Public Domain
// ==/UserScript==
(function(window, document, opera) {
function load_script(script, attr) {
return function() {
var script2 = script.cloneNode(true);
script.parentNode.insertBefore(script2, 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 commented Mar 22, 2011

if (script.hasAttribute('defer')) {
  fn = load_script(script, 'defer');
  if (loaded) {
  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 commented Mar 22, 2011

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


fearphage commented Mar 22, 2011

You have any tests for these? Would be useful.


fearphage commented Mar 22, 2011

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

edvakf commented Mar 22, 2011

Async test

Defer test

Should look like instead of

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 commented Mar 23, 2011

I think defer is fine. Async isn't 100%. (precedence is wrong... whatever that means... didn't investigate)

Another old defer test:

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>

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

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