While writing JavaScript code, I Separate each code block with <script> tags

<script type="text/javascript">
 //---- code block 1--------- 
</script>   

<script type="text/javascript">
    ----code block 2-----
</script>

<script type="text/javascript">
$(document).ready.(function(){
 // code block3
});
</script>

I want to know that is it good practice to write separate <script type="text/javascript"></script> on the same page

--or--

We have to write all JavaScript code under one <script>

What are the technical differences in each way?

While writing JavaScript code, I Separate each code block with <script> tags

<script type="text/javascript">
 //---- code block 1--------- 
</script>   

<script type="text/javascript">
    ----code block 2-----
</script>

<script type="text/javascript">
$(document).ready.(function(){
 // code block3
});
</script>

I want to know that is it good practice to write separate <script type="text/javascript"></script> on the same page

--or--

We have to write all JavaScript code under one <script>

What are the technical differences in each way?

• javascript
• performance

9 Answers 9

Well, you may want to ask yourself why your code organization scheme leads to that setup, and whether it causes maintenance or understandability problems, but I don't think it's strictly "bad". Now if your <script> tags are actually fetching separate files from the server, then it's a good idea to cut back on them.

The browser parses and interprets script tags in such a way that other work stops, so blocks of Javascript up at the top of your page can slow things down if they do a lot of work. That's true whether you've got a big block of code or several smaller blocks, however.

An advantage of moving to separate script files is that you can re-use code on multiple pages. When you do that, it may be easier at build time to compress your scripts with YUICompressor or some other similar tool.

The best reason to do this is if each script represents a discrete chunk of functionality which may not be used on (and therefore not vended to) every page. In that case, it becomes a smart strategy.

Having multiple <script> tags makes no real difference in performance but is less readable.

There is one edge case where multiple script blocks can make a difference (and I just learned about it). If one line of code references a value before it has been declared, this will work if the code belongs to the same script block, but not if they are separate. But this doesn't change the answer everybody gave you: it probably won't matter in everyday coding.

You don't have to, but its obviously cleaner that way, unless you want to clearly seperate the blocks of code.

Put all your javascript coding in separate and then call the file name. Because it is good thing. Coding execution is step by step, so it will take time if js present in between the coding.

Not nice, but not a problem.

Hunter is right, it makes absolutely no difference as far as performance is concerned.

When your javascript however becomes more complex, you may want to start building your own API of sorts and splitting out all of those tags into separate files. Then when you're deploying your app, find some sort of packaging solution that will combine all of those files to a single one, compress it using YUI compressor or Google Closure and have one single tag that references this file of all your code.

While it is a 'slight' disadvantage to force a separate http request for this file, if it's packaged properly, the file size will be smaller than the uncompressed code you've included in that file.

It is also normal to have script tags further down in your page that provide extra functionality (ie look at google analytics)

Whenever you are violating the DRY principle (Don't Repeat Yourself), you need to ask why. If you don't have a good reason, then you probably shouldn't be doing it that way.