1.標(biāo)簽的位置
按照傳統(tǒng)的做法，所有<script>元素都應(yīng)該放在頁面的<head>元素中，例如：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 這里放內(nèi)容 -->
</body>
</html>
這種做法的目的雖然可以讓script都放在相同的地方，但是放在<head>中意味著必須要等到全部JavaScript代碼都被下載、解析和執(zhí)行完成之后，才會(huì)開始頁面的加載。這樣子會(huì)導(dǎo)致瀏覽器在加載頁面內(nèi)容時(shí)出現(xiàn)明顯的延遲。所以應(yīng)該把對(duì)JavaScript的引用放在<body>元素中頁面的后面，例如：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 這里放內(nèi)容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
這樣子，在解析JavaScript代碼之前，頁面的內(nèi)容將呈現(xiàn)在瀏覽器中。
2.延遲腳本
HTML4.01為<script>標(biāo)簽定義了defer屬性。這個(gè)屬性的用途是表明腳本在執(zhí)行時(shí)不會(huì)影響頁面的構(gòu)造。腳本會(huì)被延遲到整個(gè)頁面解析完畢后再運(yùn)行。例如：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!-- 這里放內(nèi)容 -->
</body>
</html>
defer屬性腳本會(huì)被立刻下載，但是會(huì)延遲執(zhí)行，延遲到</html>標(biāo)簽后執(zhí)行。但是這個(gè)屬性只適用于外部腳本文件，所以沒什么卵用吧。把腳本放在頁面底部才是最佳選擇。
3.異步腳本
HTML5為<script>元素定義了async屬性。這個(gè)屬性與defer屬性類似，都用于改變處理腳本的行為，只適用于外部腳本文件。但是，標(biāo)記為async 的腳本并不保證按照指定它們的先后順序執(zhí)行。例如：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
<!-- 這里放內(nèi)容 -->
</body>
</html>
因?yàn)闆]有執(zhí)行順序了，所以要確保外部腳本之間不具有依賴。
因?yàn)閍sync屬性的目的是不讓頁面等待兩個(gè)腳本的下載和執(zhí)行，從而異步加載頁面其他內(nèi)容，所以異步腳本最好不要在加載期間修改DOM
4.不推薦使用的語法
<script><!--
function sayHi(){
alert("Hi!");
}
//--></script>
這種用法用于早期不支持JavaScript的瀏覽器，使用上述方法，可以避免腳本內(nèi)容作為文本顯示。但是現(xiàn)在瀏覽器都支持JavaScript了，這種格式?jīng)]必要了
5.<noscript>元素
早期瀏覽器都面臨一個(gè)特殊的問題，即當(dāng)瀏覽器不支持JavaScript時(shí)如何讓頁面平穩(wěn)地退化。<noscript>元素可以包含能夠出現(xiàn)在文檔<body>中地任何HTML元素——<script>元素除外。包含在<noscript>元素中地內(nèi)容只有在下列情況下才會(huì)顯示出來：
- 瀏覽器不支持腳本
-
瀏覽器支持腳本，但腳本被禁用
符合上述任何一個(gè)條件，瀏覽器都會(huì)顯示<noscript>中的內(nèi)容。例如：
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
<noscript>
<p>本頁面需要瀏覽器支持（啟用）JavaScript。</p>
</noscript>
</body>
</html>
這個(gè)頁面會(huì)在腳本無效的情況下向用戶顯示一條信息。
小結(jié)
把JavaScript插入到HTML頁面中要使用<script>元素。使用這個(gè)元素可以把JavaScript嵌入到HTML頁面中，讓腳本與標(biāo)記混合在一起；也可以包含外部的JavaScript文件。
- 在包含外部JavaScript文件時(shí)，必須將src屬性設(shè)置為指向相應(yīng)文件的URL。而這個(gè)文件既可以是與包含它的頁面位于同一個(gè)服務(wù)器上的文件，也可以是其他任何域中的文件。
- 所有<script>元素都會(huì)按照它們?cè)陧撁嬷谐霈F(xiàn)的先后順序依次被解析。在不適用defer和async屬性的情況下，只有在解析完前面<script>元素中的代碼之后，才會(huì)開始解析后面<script>元素中的代碼。
- 由于瀏覽器會(huì)先解析完不適用defer屬性的<script>元素中的代碼，然后再解析后面的內(nèi)容，所以一般應(yīng)該把<script>元素放在頁面最后，即主要內(nèi)容后面，</body>標(biāo)簽前面。
- 使用defer屬性可以讓腳本再文檔完全呈現(xiàn)之后再執(zhí)行。延遲腳本總是按照指定它們的順序執(zhí)行。
- 使用async屬性可以表示當(dāng)前腳本不必等待其他腳本，也不必阻塞文檔呈現(xiàn)。不能保證異步腳本按照它們?cè)陧撁嬷谐霈F(xiàn)的順序執(zhí)行。
- 使用<noscript>元素可以指定在不支持腳本的瀏覽器中顯示的替代內(nèi)容。但在啟用了腳本的情況下，瀏覽器不會(huì)顯示<noscript>元素中的任何內(nèi)容。
