Is it correct to write multiple pages and separate <script> per page?

Question

When writing JavaScript code, I separate each block of code 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 it is good practice to write separate <script type="text/javascript"></script> on one page

--or--

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

What are the technical differences in each direction?

Answer 1

Well, you may ask yourself why your code organization scheme leads to this setup, and whether it causes maintenance or understanding problems, but I don’t think it’s strictly “bad”. Now, if your <script> tags are actually retrieving individual files from the server, then it is a good idea to shorten them.

The browser parses and interprets the script tags so that other work stops, so the Javascript blocks at the top of the page can slow down if they do a lot of work. However, it is true whether you have a large block of code or several small blocks.

The advantage of moving to separate script files is that you can reuse code on multiple pages. When you do this, it may be easier to compress your scripts with YUICompressor or another similar tool during build time.

Answer 2

The best reason for this is that each script is a discrete piece of functionality that cannot be used on (and therefore not on every page). In this case, the strategy becomes smart.

Answer 3

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

Answer 4

There is one extreme case where multiple script blocks can make a difference (and I just found out about it). If one line of code refers to 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 does not change the answer that they all gave you: in everyday encoding, this probably does not matter.

Answer 5

You don't have to, but obviously it's cleaner if you don't want to clearly separate the blocks of code.

Answer 6

Put all your javascript codes separately, and then call the file name. Because it's good. The encoding is phased, so it will take time if js is present between the encoding.

Answer 7

I do not like it, but not a problem.

Answer 8

The hunter is right; he has absolutely nothing to do with performance.

When your javascript, however, becomes more complex, you can start creating your own API and sort all the tags into separate files. Then, when you deploy your application, find some kind of packaging solution that combines all of these files into one, compresses it using YUI compressor or Google Closure and has one tag that refers to this file of all your code.

Although it is a small drawback to force a separate HTTP request for this file, if it is packed correctly, the file size will be smaller than the uncompressed code that you included in this file.

It's also okay to have script tags on your page that provide additional functionality (e.g. look at google analytics)

Answer 9

Whenever you violate the DRY principle (do not repeat yourself), you need to ask why. Unless you have a good reason, you probably shouldn't do this.