Question

We have main layout page, and we have some external scripts, that loading after page loaded via ajax. Some of them are really slow, cause they are opening socket.io connection. This slow down whole page load.

I have some questions:

1. Is it ok, if external widget contains more than 5 scripts in body? What reasonable limits we should have on count of scripts per service?

2. <script src="/path/to.js"></script> embedded in ajax loaded html – will make sync or async query to server?

3. How to avoid browser block, during external script load?

4. How to improve speed loading time, when we have a lot of external scripts?

Update: Finally I use HeadJS library.

Answer 1

1. while it is ok to load many different scripts, it is encouraged to cut down on the different HTTP calls, as most browsers allow for up to 2 concurrent connections per each domain, this means your code will load them 2 by 2, and will not continue to run until they are loaded. best practices are to minify, and concatenate all of your scripts into fewer files.
2. as far as i know regular script tags will usually load synchronously, slowing down even ajax loaded html.
3. there are a few good proposals to avoid browser blocks. either load your scripts at the bottom of your body tag, to ensure parsing everything before working on the heavy scripting. you can also use the defer, and async tags (the latter is HTML5), or try loading your scripts after the document sends it’s “ready” event.
4. less HTTP calls, postpone parsing of some JS to when needed, and defer+async load your javascript externals to prevent freezing the browser.

a good read is this: http://www.sitepoint.com/a-detailed-breakdown-of-the-ltscriptgt-tag/

it is very thorough in explaining the history and evolution of the script tag itself, and has some of it’s best practices.