Are there any performance issues in having a large number of script tags in your html?

Question

Are there any issues in having a large number (say 50) of script tags in an html file. Does it cause any performance issues in page rendering times?

I have a section on my page that's pulling a geolocation point and putting this into an array for use on a google map. I could create a separate query for just the geolocation points but I believe it is more efficient if I pull this out as other content is requested.

<script type="text/javascript">points[{count}] = [{job_latitude},{job_longitude},'{title}'];</script>

Answer 1

When a browser encounters a SCRIPT elements it stops parsing and rendering the HTML and starts parsing and interpreting its contents. That is because the code SCRIPT elements could alter the already parsed DOM tree.

That’s the reason why it’s recommended to put SCRIPTs at the bottom of the document so that the whole document body is already parsed.

So I would rather request the geo locations altogether (maybe you can collect them on the server side and print them at the end). Or if you cannot or don’t want to do that, add the defer attribute to your SCRIPT elements to tell the parser not to wait for the script.

Answer 2

LABjs is a lightweight .js file (MIT license) which will allow your script to load in parallel with the markup - it has the potential to significantly improve page load time - but be careful to make use of the wait() function to ensure dependencies are honoured.