Is it right to write multiple and separate <script > on a page?

Question

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?

Pointy · Accepted Answer · 2010-04-23 12:56:25Z

6

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.

answered Apr 23, 2010 at 12:56

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Robusto · Accepted Answer · 2010-04-23 12:56:46Z

3

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.

answered Apr 23, 2010 at 12:56

Robusto

32k8 gold badges59 silver badges79 bronze badges

Comments

hunter · Accepted Answer · 2010-04-23 12:53:37Z

1

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

answered Apr 23, 2010 at 12:53

hunter

63.8k19 gold badges115 silver badges115 bronze badges

1 Comment

SLaks Over a year ago

I suspect that it would be a little slower.

Community · Accepted Answer · 2017-05-23 11:59:25Z

1

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.

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered May 7, 2010 at 18:09

Jan Fabry

7,4112 gold badges38 silver badges43 bronze badges

1 Comment

tloflin Over a year ago

Yes, in fact the Google analytics code on this very page relies on this principle. Edit: Oh, wait, it's actually the opposite principle: a document.write in the first block is parsed and run before the second block, allowing some variables to be referenced in the second that wouldn't otherwise.

Warrantica · Accepted Answer · 2010-04-23 12:54:26Z

0

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

answered Apr 23, 2010 at 12:54

Warrantica

3241 gold badge4 silver badges12 bronze badges

Comments

Karthik · Accepted Answer · 2010-04-23 12:55:59Z

0

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.

answered Apr 23, 2010 at 12:55

Karthik

3,3415 gold badges31 silver badges38 bronze badges

Comments

Lars · Accepted Answer · 2010-04-23 12:56:03Z

0

Not nice, but not a problem.

answered Apr 23, 2010 at 12:56

Lars

1,1217 silver badges16 bronze badges

Comments

brad · Accepted Answer · 2010-04-23 12:57:11Z

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)

Brent Baisley · Accepted Answer · 2010-04-23 13:12:49Z

0

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.

answered Apr 23, 2010 at 13:12

Brent Baisley

12.7k2 gold badges28 silver badges39 bronze badges

Collectives™ on Stack Overflow

Is it right to write multiple and separate <script > on a page?

9 Answers 9

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related