extsrc.js - load all scripts asynchronously and after drawing the page (even with document.write)

I want to tell you about the thing I invented today to speed up the process of downloading sites. You all know that <script src="..."></script> delays page rendering until this script is loaded. If there are dozens of them, this can seriously slow down the work of the site - as a result, the user stares for 20 seconds at an empty (or undeleted) page due to some blunt social widget (multiply by a dozen of these widgets).

Wouldn't it be cool if you could say <script extsrc ="..."></script> ( "extsrc" = " " ) so that the scripts load after the page is rendered?

Everything would be fine, but there is document.write ... Today I finally solved his problem - I imagine extsrc.js - a script that will run all the scripts after the page is rendered (even if they contain document.write - and everything will be correctly drawn).
')
Result? Super-fast loading pages, even if there is a sea of ​​all sorts of external scripts.

Using:

Replace <script src ="..."> with <script extsrc ="..."> .

The total is:

 <script src="http://whiteposts.com/extsrc_js/extsrc.js"></script> <script extsrc="..."></script> 

All the most important thing on Google Code: http://code.google.com/p/extsrcjs/

All extsrc="..." are loaded sequentially (due to document.write ), but after the page has been rendered (unlike the usual src="..." , which forces users to look at the blank page until the script loads) .

I do not recommend making AdSense asynchronous - you can lose an account for unauthorized code changes.

Why didn’t I like it src = ""? Well, in the light of the last DDOS in 100GBit (they wrote today) all my pages with a widget from Twitter were loaded for more than a minute. It's time for everyone to switch to asynchronous loading of JavaScript, especially since it is already possible in existing browsers and even with document.write (the main argument against 'async' before).

asyncsrc

 <script asyncsrc="..."></script> 

Besides extsrc ="..." there is also asyncsrc ="..." - faster, but less secure from the point of view of document.write . Use <script asyncsrc ="..."></script> if you are sure that there is no document.write in this particular script.

In essence, <script asyncsrc=""> is the same as <script defer> only works in all reasonable browsers (as far as I know).

All asyncsrc will load in parallel (accordingly, there is no guarantee which script will load earlier, but of course it is faster than sequentially loading extsrc ). The problem is to combine these two approaches just in the implementation of the replacement document.write .

In general, not sure about the script - write extsrc="..." . Sure - write asyncsrc="..." .

Total

That is, first all the script src="..." do extsrc="..." , and then one by one we change to asyncsrc = "..." - if nothing is broken.

HTML code. Fixed
Download start time (after pictures). Fixed
Bug with IE / Opera and empty Script3. Fixed
document.write('<script src="...">'); document.write('</script>'); bug document.write('<script src="...">'); document.write('</script>'); document.write('<script src="...">'); document.write('</script>'); also probably fixed.
Grammar bugs also fixed. :)

Thanks to users in the comments and posts for finding bugs.

Tested and working : IE 6/8, Opera 10, Chrome 7, Firefox 3.
Sorry, that the post was removed - it was necessary time to put everything in order. It’s still hard to debug in IE under a virtual machine. :)

Test, try, break. If someone translates his website to this method - unsubscribe about the results :) Especially about the bad, where something does not work.

Jquery

JQuery will most likely work normally as extsrc, plug-ins can be loaded as extsrc too, but inline javascript cannot be used:

 <script extsrc="jquery.js"></script> <script> $(document).ready(....) </script> 

This will not work! Because at first it will try to execute an “inline script” (about document.ready), which will not know what $ , and then JQuery will be loaded.

Solution: you need to move $(document).ready(...) into a separate file and load it as extsrc="..." .

Update

Someone Brenden Grace ran some tests and, with the sequential ( extsrc ) loading of specially slowed down scripts, the page finished loading in 1.2 seconds, while the content appeared for 300ms? (It is difficult to judge by the picture)

With the default download, all the content has been loaded for 500 (. Actually, it is difficult to draw conclusions from this, because extsrc is made for the convenience of the user (so that the content appears as early as possible, and then load what you want).

But the conclusion that makes Brendan - that (of course) loading content consistently eventually takes more time than in parallel. But on the other hand, the user saw the content one and a half times faster than with the default ...

And Yahoo / MS has already tested - that the earlier the result - the more money from the client :) is a completely real study.

So in any case - a double-edged sword. But when it comes to all kinds of social widgets - I would clean them up after loading - no matter how slower they load. They do not stand to sit on the page and wait for them to load.

Pictures from Brenden and post

The main idea here is all the same - you cannot predict how long any external server will respond and you should not rely on them, so give all external scripts to extsrc.

Yoi Haji
view is already from everywhere