So i have been building a website for quite some time for a client and they are getting several javascript operations per page. So i decided to stream line this generation of the javascript material (this includes ajax content, ui manipulation and parsing). So i have a script producer in PHP that will generate scripts in a specific order, this way there is no risk of doing operations that are not ready yet*.
SO then i got into this weird little conundrum. Is there any efficiency in producing scripts like this…
<script type="text/javascript">
script1.action();
script1.secondAction();
script2.action();
...
scriptN.action();
</script>
or
<script type="text/javascript">script1.action()</script>
<script type="text/javascript">script1.secondAction()</script>
<script type="text/javascript">script2.action()</script>
<script type="text/javascript"> ... </script>
<script type="text/javascript">scriptN.action()</script>
Thank you for your input.
* Obviously there can always be some inherent risk no matter how "Safe" you try to program.
Either way, both the tags and the contents within are going to be executed sequentially – no need to worry there.
It would be good to go with the first option if possible, however. Each time a browser comes to a tag, it will stop rendering until it has time to hand the code off to a javascript interpreter and get the results.
Unless you have many different scripts, or very large scripts, this delay will not likely be noticed by any end users. As James mentioned, though, it will also result in a slightly slower load time and heavier server load simply because it is more characters.