1.<script>元素
<scrtipt src = "" async defer = "defer " type = "text/javascript" >
? async:可選茂契。表示應(yīng)該立即下載腳本,但不應(yīng)妨礙頁(yè)面中的其他操作慨绳,比如下載其他資源或
等待加載其他腳本掉冶。只對(duì)外部腳本文件有效。
? defer:可選脐雪。表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行厌小。只對(duì)外部腳本文件有
效。
? src:可選战秋。表示包含要執(zhí)行代碼的外部文件璧亚。
現(xiàn)代 Web 應(yīng)用程序一般都把全部 JavaScript 引用放在<body>元素中頁(yè)面內(nèi)容的后面
<!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>
延遲腳本:HTML 4.01 為<script>標(biāo)簽定義了 defer 屬性。這個(gè)屬性的用途是表明腳本在執(zhí)行時(shí)不會(huì)影響頁(yè)面的構(gòu)造脂信。也就是說(shuō)癣蟋,腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢后再運(yùn)行。因此狰闪,在<script>元素中設(shè)置defer 屬性疯搅,相當(dāng)于告訴瀏覽器立即下載,但延遲執(zhí)行埋泵。
<!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>
在這個(gè)例子中幔欧,雖然我們把<script>元素放在了文檔的<head>元素中罪治,但其中包含的腳本將延遲到瀏覽器遇到</html>標(biāo)簽后再執(zhí)行。
異步腳本:HTML5 為<script>元素定義了 async 屬性礁蔗。這個(gè)屬性與 defer 屬性類似觉义,都用于改變處理腳本的行為。同樣與 defer 類似浴井,async 只適用于外部腳本文件晒骇,并告訴瀏覽器立即下載文件。但與 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>
在以上代碼中,第二個(gè)腳本文件可能會(huì)在第一個(gè)腳本文件之前執(zhí)行屠缭。因此箍鼓,確保兩者之間互不依賴非常重要。指定 async 屬性的目的是不讓頁(yè)面等待兩個(gè)腳本下載和執(zhí)行呵曹,從而異步加載頁(yè)面其他內(nèi)容款咖。為此,建議異步腳本不要在加載期間修改 DOM奄喂。
嵌入代碼與外部文件
在 HTML 中嵌入 JavaScript 代碼雖然沒有問(wèn)題铐殃,但一般認(rèn)為最好的做法還是盡可能使用外部文件來(lái)
包含 JavaScript 代碼。不過(guò)跨新,并不存在必須使用外部文件的硬性規(guī)定富腊,但支持使用外部文件的人多會(huì)強(qiáng)
調(diào)如下優(yōu)點(diǎn)。
? 可維護(hù)性:遍及不同 HTML 頁(yè)面的 JavaScript 會(huì)造成維護(hù)問(wèn)題域帐。但把所有 JavaScript 文件都放在一個(gè)文件夾中赘被,維護(hù)起來(lái)就輕松多了。而且開發(fā)人員因此也能夠在不觸及 HTML 標(biāo)記的情況下肖揣,集中精力編輯 JavaScript 代碼民假。
? 可緩存:瀏覽器能夠根據(jù)具體的設(shè)置緩存鏈接的所有外部 JavaScript 文件。也就是說(shuō)龙优,如果有兩個(gè)頁(yè)面都使用同一個(gè)文件羊异,那么這個(gè)文件只需下載一次。因此彤断,最終結(jié)果就是能夠加快頁(yè)面加載的速度野舶。
? 適應(yīng)未來(lái):通過(guò)外部文件來(lái)包含 JavaScript 無(wú)須使用前面提到 XHTML 或注釋 hack。HTML 和XHTML 包含外部文件的語(yǔ)法是相同的宰衙。
<noscript>元素
早期瀏覽器都面臨一個(gè)特殊的問(wèn)題筒愚,即當(dāng)瀏覽器不支持 JavaScript 時(shí)如何讓頁(yè)面平穩(wěn)地退化。對(duì)這個(gè)問(wèn)題的最終解決方案就是創(chuàng)造一個(gè)<noscript>元素菩浙,用以在不支持 JavaScript 的瀏覽器中顯示替代的內(nèi)容巢掺。這個(gè)元素可以包含能夠出現(xiàn)在文檔<body>中的任何 HTML 元素——<script>元素除外句伶。
包含在<noscript>元素中的內(nèi)容只有在下列情況下才會(huì)顯示出來(lái):
? 瀏覽器不支持腳本;
? 瀏覽器支持腳本陆淀,但腳本被禁用考余。
<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>
<noscript>
<p>本頁(yè)面需要瀏覽器支持(啟用)JavaScript。
</noscript>
</body>
</html>
這個(gè)頁(yè)面會(huì)在腳本無(wú)效的情況下向用戶顯示一條消息轧苫。而在啟用了腳本的瀏覽器中楚堤,用戶永遠(yuǎn)也不會(huì)看到它——盡管它是頁(yè)面的一部分。
小結(jié)
把 JavaScript 插入到 HTML 頁(yè)面中要使用<script>元素含懊。使用這個(gè)元素可以把 JavaScript 嵌入到HTML 頁(yè)面中身冬,讓腳本與標(biāo)記混合在一起;也可以包含外部的 JavaScript 文件岔乔。而我們需要注意的地方有:
? 在包含外部 JavaScript 文件時(shí)酥筝,必須將 src 屬性設(shè)置為指向相應(yīng)文件的 URL。
而這個(gè)文件既可以是與包含它的頁(yè)面位于同一個(gè)服務(wù)器上的文件雏门,也可以是其他任何域中的文件嘿歌。
? 所有<script>元素都會(huì)按照它們?cè)陧?yè)面中出現(xiàn)的先后順序依次被解析。在不使用 defer 和
async 屬性的情況下茁影,只有在解析完前面<script>元素中的代碼之后宙帝,才會(huì)開始解析后面
<script>元素中的代碼。
? 由于瀏覽器會(huì)先解析完不使用 defer 屬性的<script>元素中的代碼募闲,然后再解析后面的內(nèi)容步脓,
所以一般應(yīng)該把<script>元素放在頁(yè)面最后,即主要內(nèi)容后面浩螺,</body>標(biāo)簽前面沪编。
? 使用 defer 屬性可以讓腳本在文檔完全呈現(xiàn)之后再執(zhí)行。延遲腳本總是按照指定它們的順序執(zhí)行年扩。
? 使用 async 屬性可以表示當(dāng)前腳本不必等待其他腳本,也不必阻塞文檔呈現(xiàn)访圃。不能保證異步腳本按照它們?cè)陧?yè)面中出現(xiàn)的順序執(zhí)行厨幻。
? 使用<noscript>元素可以指定在不支持腳本的瀏覽器中顯示的替代內(nèi)容。但在啟用了腳本
的情況下腿时,瀏覽器不會(huì)顯示<noscript>元素中的任何內(nèi)容况脆。