Geek Answers Handbook

What is the difference in javascript placement in file and in script tag?

What is the difference between the following two codes in an HTML file? If I add another javascript file xyz.js after enabling abc.js , is there any scripting priority?

First code:

 <script src="js/abc.js" type="text/javascript" language="javascript"> </script>

Second code:

 <script language="javascript"> /*same code of abc.js*/ </script
+4
source share
5 answers

The main difference is that the javascript file can be cached by the browser and network devices, so the user does not need to download it every time the page loads.

So, if you have 100k javascript files, your visitor only needs to upload them once. Otherwise, they will have to download the same exact 100 thousand. For each page load and visit.

This also allows for inline and external CSS and images.

Suppose this is just the tip of the cedar of caching and browser performance (Steve's book is one of the web bibles):

http://yuiblog.com/blog/2006/11/28/performance-research-part-1/

http://www.yuiblog.com/blog/2007/01/04/performance-research-part-2/

http://www.stevesouders.com/

+3
source

What is the difference between the following two codes in an HTML file?

One requires an additional HTTP request, but it is cached. The other does not.

If I add another javascript file xyz.js after enabling abc.js, is there any priority associated with using scripts?

Downloading external scripts is blocked. The first will be loaded first. Then the second one will load.

+2
source

They both force the browser to read javascript and execute it. The first code can use caching, while the last is NOT a cache.

The first use case also requires another HTTP request, which can be expensive.

Otherwise, there is no priority.

+1
source

The first difference between loading a script from a file and running a script from a script tag is that an additional HTTP request is required to load it. This is usually trivial, but you will get an increase in speed with a script embedded in the page. However, loading from an external file allows the script to be cached. Sounds like you can't rely on caching, though .

Now, I have to tell you that all of your hard-coded scripts on the page are not very manageable. If you want to update one of the scripts, but it is attached to a specific html file, it becomes much more difficult to update.

As for your second question, scripts are loaded in order. All external loading is blocked when loading scripts. Therefore, it is recommended that you place all of your script at the bottom of the <body> .

0
source

Beyond the primary reason for caching, a secondary and important difference is support for Separation of problems , which, among other things, states that web development markup (html) should be separated from style (css) and behavior (js). These elements should be stored in separate places and tied only to the markup. This is important for project organization, ongoing maintenance and optimization. Writing a jumble of spaghetti code with built-in everything makes you sad panda .

0
source

More articles:


All Articles