Javascript file inclusion in html pages- what happens underneath in the browser?

Question

I think this may be a browser dependent question- Suppose I have 10 Javascript files and several HTML pages. Suppose HTML pageA needs only JS1.js and JS3.js, similarly HTML pageB needs JS4.js and JS1.js. I want to know what would be effect of including all the 10 javascript files in all HTML pages? Will it directly relate to the memory consumption by the browser?

I am facing this problem particularly with YUI javascript library. There are several components like datatable, event, container, calendar, dom-event etc., The order in which they are included also seems to matter a lot- For example the dom-event js should be included before the rest for it to work. So to avoid all this confusion, I thought of including all these js files in a header file that gets included in all HTML pages.

The thing that I am worried about is the memory bloat and performance problems that it may cause. Please provide your suggestions on the same..

Thanks, -Keshav

Answer 1

Any script you load into your page, even once downloaded and cached must still be parsed before the rest of the page can load. So in that sense there is a memory penalty, and there's still a potential for something in the script to significantly delay rendering.

However, in the case of a conscientiously designed library such as YUI I would expect the parsing time to be minimised.

If you can load all your scripts in at the end of the page, that can vastly improve performance as the entire page can render before being blocked by javascript execution, and your site will feel a lot snappier.

I would suggest investigating the Firebug Net panel and the YSlow extension to get specific performance stats for your website.