

extsrc.js - make all your [script]s 'async' (works with document.write too) - rarestblog
http://whiteposts.com/extsrc

======
rarestblog
Yesterday I wrote a topic "Your social widgets are losing you visitors right
now". Today I present you solution to very old problem of scripts delaying
page loads: just _change src=""_ to _extsrc=""_ and use 'extsrc.js':

    
    
      <script extsrc="..."></script>
    

Now all of your scripts are loading AFTER the page renders. It works even if
scripts use _document.write_

I've tested with Chrome/Ubuntu and Firefox/Ubuntu - works like it should.

ALPHA! Test it and let me know if your browser matches the reference
rendering. If it doesn't - maybe we can do some fallback.

Quite a few bugs fixed by now. Please test it and leave bug reports.

~~~
TamDenholm
Good job, now lets get the major sites (especially blogs) to use this.

~~~
rarestblog
Thanks! Too early, need to polish out quite a few bugs with Opera/IE right
now.

UPD. Major bugs with Opera fixed. IE probably too, waiting for confirmation.

------
Sephr
Asynchronous document.write (<http://github.com/eligrey/async-document-write>)
does mostly the same thing, and actually supports real async and deferred
script execution on browsers that support it. Also note that extsrc.js waits
until everything, including large images which may take a while, on your page
is loaded before running the "asynchronous" scripts, which doesn't sound that
asynchronous to me.

~~~
rarestblog
From the looks of it - it means that you have to modify external scripts in
ADW, right?

FIXED loading time to browser-specific DOM ready events. Don't see the need to
use actual DEFER. Any reasons to do it?

~~~
Sephr
The only reason is so that you can use the browser's native async and defer
script scheduling. And yes, you need to modify the external scripts (only
adding a single line to the start and end).

If you can't convince the widget provider to change the script, you can place
<script>document.write.to = "the URI of the following widget script";</script>
right before the widget script itself.

Also, on your fixed loading time thing: with onload, it still won't run until
every image and iframe on your website has loaded too.

~~~
rarestblog
How many browsers support 'document.write.to'?

It uses browser-specific event. onload is fallback.

I've tested the slow image (20 second delay instead of image) - no, it doesn't
require loading of images, scripts fire up as soon as HTML finishes loading.
Sorry.

~~~
Sephr
document.write.to isn't something used by any browsers, it's something that my
asynchronous document.write library uses instead of polluting the global
namespace. Those image results are interesting, and I admit that I only took a
quick skim of your code, so I may have been wrong to assume that it would be
limited by onload.

~~~
rarestblog
It was. Thank you for noting that. It was your comment that made me look into
window.onload and scrape it, replacing with more sophisticated browser-
specific code. Thank you!

------
rarestblog
UPDATE. Thanks for testing everybody, sadly there are serious problems that
need fixing. So for now the project is closed.

~~~
rarestblog
UPDATE2. IE now works. Chrome works. Opera works. Firefox works.

Test it and tell me if you can break it! :)

------
bcg
async= works as you would think but extsrc= loads all javascript sequentially
which can make total page load times longer. I wrote up a bit about the tests
here:

<http://bit.ly/aIvHa6>

------
tszming
Looks interesting, will be even better if the script has a demo page.

~~~
rarestblog
It has. Look at the yellow blocks.

~~~
tszming
Ah yes, you are right. Thanks for reminding.

------
1inuxoid
What a handy piece of thing!

