extsrc.js - make all your [script]s 'async' (works with document.write too) | Hacker News Reader

extsrc.js - make all your [script]s 'async' (works with document.write too)

whiteposts.com

19 pointsrarestblog16 comments

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.

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

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.

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.

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?

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.

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.

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.

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!

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

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

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

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

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

It has. Look at the yellow blocks.

Ah yes, you are right. Thanks for reminding.

What a handy piece of thing!

Reply on news.ycombinator.com