Browser performance impact of lots of js includes

Question

I'm working on a website for work that uses one master layout for the whole site which includes lots (over 40) js files. This website is really slow to render. How much overhead is there for the browser to parse and (for a lack of better technical term) "deal with" all these includes? I know that they are cached, so they are not being downloaded on each page view. However, does each include get parsed and executed anew on every page refresh?

At any rate, I imagine there is some overhead in dealing with all these includes, but I'm not sure if it's big or small.

Answer 1

The best way to understand is to measure. Try merging those 40 js files into a single one and see if it makes a big difference. Also compressing them could reduce bandwidth costs.

There will be an overhead of having multiple includes but as you say those pages are cached and the overhead should be only on the first request. I think that if we ignore this initial overhead the performance difference won't be enormous compared to the time spent in those scripts manipulating the DOM, etc...

Answer 2

it depends on what they do - to test you could do this before they are all loaded:

<script>
  var test_start_time = (new Date()).getTime();
  </script>

and this after:

<script>
    alert("took: " + (((new Date()).getTime()-test_start_time)/1000) + " seconds");
  </script>