<script>元素
- 直接頁面嵌入JavaScript代碼
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
包含在
<script>
元素內(nèi)部的JavaScript代碼從上至下依次解釋。上例,解釋器解釋一個函數(shù)的定義,然后把定義保存自己環(huán)境中。在解釋器對<script>
內(nèi)部代碼求值完畢以前,頁面中其余內(nèi)容不會被瀏覽器加載或顯示。
- 包含外部JavaScript文件
<script type="text/javascript" src="js/jquery-1.8.3.min.js">
//注意:在帶有src屬性的<script>只會下載并執(zhí)行外部文件,嵌入的代碼會被忽略
</script>
與解析嵌入式JavaScript代碼一樣,解析外部JavaScript文件(
包括下載該文件
)時,頁面的處理也會暫時停止。
延遲腳本——defer屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Example HTML Page</title>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link type="text/css" rel="stylesheet" href="css/reset.css"/>
<link type="text/css" rel="stylesheet" href="css/main.css"/>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" defer="defer" src="example1.js"></script>
</head>
<body>
<!--這里是內(nèi)容-->
</body>
</html>
<script>標簽定義了defer屬性。這個屬性的用途是表明腳本在執(zhí)行時不會影響頁面的構(gòu)造。也就是說,腳本會被延遲到整個頁面都解析完畢后再運行。因此,在<script>元素中設置defer屬性,相當于告訴瀏覽器立即下載,但延遲執(zhí)行。
在上例中,雖然我們把<script>元素放在了文檔的<head>元素中,但其中包含的腳本將延遲到瀏覽器遇到</html>標簽后再執(zhí)行。
- 在
<script>
元素中設置defer屬性,相當于告訴瀏覽器立即下載,但延遲執(zhí)行。- H5會忽略給嵌入式腳本設置的defer屬性。
- 多個延遲腳本實際中不一定按照順序執(zhí)行,最好只包含一個延遲腳本。
- 延遲腳本放頁面底部為最佳選擇。(不支持defer屬性的瀏覽器會忽略此屬性,正常處理此腳本)*
異步加載——async屬性
<script type="text/javascript" async src="example1.js"></script>
async
只適用于外部腳本文件,并告訴瀏覽器立即下載文件,但不能保證按照指定的先后順序執(zhí)行。- 指定async屬性的目的是不讓頁面等待腳本下載和執(zhí)行,從而異步加載頁面其他內(nèi)容。因此,建議異步腳本不要再加載期間修改DOM。
- 異步腳本一定會在頁面load事件之前執(zhí)行,有可能會在
DOM ContentLoaded
事件觸發(fā)之前或之后執(zhí)行。
文檔模型
最初的倆種文檔模式是:混雜模式(quirks mode)和標準模式(standards mode)。混雜模式會讓IE的行為與(包含非標準特性的)IE5相同,而標準模式則讓IE的行為更接近標準行為。
如果在文檔開始初沒有發(fā)現(xiàn)文檔類型聲明,則所有瀏覽器都會默認開啟混雜模式。
<noscript>元素
包含在<noscript>元素中的內(nèi)容只有在下列情況下才會顯示出來:
- 瀏覽器不支持腳本
- 瀏覽器支持腳本,但腳本被禁用
<body>
<noscript>
<p>本頁面需要瀏覽器支持(啟動)JavaScript</p>
</noscript>
</body>
小結(jié)
- 由于瀏覽器會先解析完不使用defer屬性的<script>元素中的代碼,然后再解析后面的內(nèi)容。所以,一般把<script>元素放在頁面最后—— 主要內(nèi)容后面,
<body>
標簽之前。 - defer屬性——可以讓腳本在文檔完全呈現(xiàn)之后再執(zhí)行。延遲腳本總是按照指定它們的順序執(zhí)行(至少H5規(guī)范要求,現(xiàn)實不一定)。
- async屬性——可以表示當前腳本不必等待其他腳本,也不必阻塞文檔呈現(xiàn)。但是,不保證執(zhí)行順序!