Javascript + page load time

inline scripts vs included js files

[Miki]

In terms of page load time (perceived and/or actual) or what is being pushed down a user's line, is it better to have inline javascript, ie. all your code between a pair of SCRIPT tags, or to have your javascript stored in a separate js file and included?

[SurfMan]

It has it's advantages and disadvantages:

inline script advantage: Loads with html, so it loads fast
inline script disadvantage: hard use on multiple pages

external script advantage: easy maintenance, easy to use on multiple pages
external script disadvantage: it requires an extra GET from the browser. So it's a bit slower... But who cares with 2Mbit ADSL ;)

I always go for external files. Pure for easy maintenance...

[Rambo Tribble]

Another thing to bear in mind, an internal script will be ready to function immediately, as the page loads, while with an external file there may be a lag between when the HTML page loads and the scripts become available.

Personally, to get the fastest load on my home page, I use an internal script, all other pages use external.

[bruhaha]

As Rambo's approach suggests, it may not be all or nothing. If, for instance, you use a particular script on only a few pages, and want it to be immediately available, you could include that on the page itself, while linking to an external file for all other scripts.

Along the same lines, if you only use particular scripts on a few pages, you may wish to put those scripts in a separate external file and link to them only on pages that need them.

(That may be obvious, but perhaps it is worth mentioning. I have seen too many sites that include all javascripts used on the site in one large file, forcing the user to download the whole thing on the first page they visit, even if some of the scripts are used only very occasionally. Two or three files, each with groups of related scripts, might serve them much better. For that matter, it makes organizing and maintaining the scripts much easier.)

[jomaxx]

One of the best reasons to use an external JS file is that it only has to be loaded once. It can slow down the initial page rendering, although I don't think that would always be true, but over the course of a user session it can reduce bandwidth and load times considerably (depending on how much code we're talking about).

[Rambo Tribble]

"It can slow down the initial page rendering, although I don't think that would always be true . . ."

Actually, since each separate file requires a separate HTTP request and its own TCP packets, the first request for an external file will always be slower to load than an internal script.

Additionally, depending on the specific cacheing instructions for the external file in question, in many cases each time it is called by a new page being loaded in the browser, an HTTP request is generated that produces a 304 "Not Modified" response from the server. Usually this overhead is minimal compared to retransmitting the file or even the bytes of a duplicate internal script (unless it is very short), but it is overhead.

All else being equal, that is comparing a locally cached file with internal scripts vs. a locally cached file with locally cached external scripts, the first case will still load faster because of lower file system overhead. Since we're talking milliseconds in that case, it's pretty moot, but still a reality. Two files are just more overhead than one.

The real savings in external files come from not having to retransmit the same data and ease of maintenance.

[jomaxx]

The reason I said it that way was that the HTML file and the JS file can be downloaded in parallel. I was wondering if there could be situations related to server load management or network traffic that would cause the 2 smaller files to load faster than the single combined file.

[Rambo Tribble]

I would think for them to be downloaded in parallel the requests would have to be concurrent, whereas the call to the .js file originates from the client after the .htm file has begun to load.

[jomaxx]

Clearly the requests don't go out simultaneously but the files can both be in transit at the same time. Basically the same as image files, I would imagine.

Anyway I think we're in agreement that external is better.