Where should we put the script tag in the HTML document?

Last Update:2017-10-06 Source: Internet

Author: User

Tags script tag

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article translates the JavaScript Tutorial playlist of up master Kudvenkat on YouTube

SOURCE Address here:

https://www.youtube.com/watch?v=PMsVM7rjupU&list=PL6n9fhu94yhUA99nOsJkKXBqokT3MBK0b

In this video we discuss where we should put our script tag in an HTML document. Is it supposed to be in the body or head? In a word, the script tag can be placed in the head or in the body.

Let's take a look at some examples

Example 1:script tag placed in head

[Html][head]    [Script Type= "Text/javascript"]        alert ("Welcome to JavaScript Tutorial");    [/script][/head] [body]    [form id= "form1" runat= "Server"]    [/form][/body][/html]

Example 2:script tag placed in body

[html][head][/head] [body]    [form ID= "form1" runat= "Server"]    [/form]    [Script type= "Text/javascript"]        Alert ("Welcome to JavaScript Tutorial");    [/script][/body][/html]

In Example 1 we put the script tag in the head, in Example 2 we put the script tag in the body, in both cases the script can be run as expected

Example 3: Set the background color of the textbox to red

[html][head][/head] [body]    [form ID= "form1" runat= "Server"]        [asp:textbox id= "TextBox1" runat= "Server"][/asp:textbox]    [/ Form]    [script type= "Text/javascript"]        document.getElementById ("TextBox1"). Style.backgroundcolor = "Red";    [/script][/body][/html]

Example 4: Same as Example 3, the only difference is that we move the script tag to the Head section. In this scenario, the script will not work correctly. Depending on the browser we are using, the following JavaScript error message appears

Firefox-typeerror:document.getelementbyid (...) Is null

Chrome-uncaught Typeerror:cannot Read Property ' style ' of NULL

Ie-unable to get property ' style ' of undefined or null reference

Press F12 to bring up the developer tools to monitor these JavaScript error messages. For the above three browsers, F12 can be used

[Html][head]    [Script Type= "Text/javascript"]        document.getElementById ("TextBox1"). Style.backgroundcolor = " Red ";    [/script][/head] [body]    [form id= "form1" runat= "Server"]        [asp:textbox id= "TextBox1" runat= "Server"][/asp:textbox]    [/form][/body][/html]

So why is JavaScript going wrong in this situation?

JavaScript code appears before the TextBox is controlled. When JavaScript code is executed, the textbox is still not loaded into the browser's Dom (dociment Object Model) . This is why JavaScript cannot find the textbox and throws a null reference error

In the sixth part of the video we discussed, in general, it is a good programming habit to store JavaScript in an external. js file. So if JavaScript is in an external file, and you want to use <script> element to put into the page as a reference, where should the <script> element be?

To answer this question, first we need to understand what happens when the browser loads a Web page.

1. Browser starts parsing HTML

2. When parser touches the <script> tag, and the tag points to an external JavaScript file. Parser stops parsing HTML, and then the browser issues a request to download the script file. Until the end of the download, Parser is not allowed to continue parsing HTML on the remaining pages

3. At the end of the current download, parser continues to return to the original work, parse the rest of the HTML

This means that the loading of the page until all the script is loaded is temporarily halted, which obviously affects the user experience

In summary, it is best to put the <script> tag before the <body> closed tag. Because this does not prevent HTML parser from working properly. However, today's browsers support async and defer The properties of the scripts. These properties tell the browser that you can continue to parsing the page, even if the script is being downloaded. But there are these attributes, which, from a performance standpoint, still put <script> tags in <body> Still a good choice before closing the label

According to the http/1.1 rule, a particular browser cannot download more than two parts in parallel. So if there are multiple pictures on the page waiting to be downloaded, and you put the <script> tag at the top of the page, the <script> file will be downloaded first, and prevents the download of other page pictures, resulting in a significant increase in page load time

Where should we put the script tag in the HTML document?

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More