最近重新翻了翻JavaScript高級(jí)程序設(shè)計(jì)，還是有很多小收獲的。
script標(biāo)簽定義了6個(gè)屬性
-
async表示立即下載腳本，但不影響頁面中的其他操作 -
charset表示通過src屬性指定的代碼的字符集 -
defer表示腳本可以延遲到文檔完全被解析和顯示后再執(zhí)行 -
language已廢棄，原來是用于表示編寫代碼所使用的腳本語言 -
src表示包含要執(zhí)行代碼的外部文件 -
type可以看成是language的替代屬性
今天來聊聊defer 和 async這兩個(gè)屬性。
正常情況下的使用
<html>
<head>
</head>
<body>
...
<script src="xxx.js"></script>
...
</body>
</html>
瀏覽器會(huì)按照<script>元素在頁面中出現(xiàn)的順序加載。也就是說第一個(gè)解析完成，才會(huì)對(duì)第二個(gè)進(jìn)行接續(xù)，然后才是第二個(gè)，第三個(gè)......
defer
<html>
<head>
<script defer src="xx1.js"></script>
<script defer src="xx2.js"\></script>
</head>
<body>
...
</body>
</html>
就算我們把<script>標(biāo)簽放在<head>中，這兩個(gè)js文件也是會(huì)在遇到</html>時(shí)才會(huì)執(zhí)行。雖然html5規(guī)范要求腳本按照他們出現(xiàn)的順序執(zhí)行，并先于DOMContentLoaded事件。但在現(xiàn)實(shí)中，延遲腳本不一定按照順序執(zhí)行，且不一定先于DOMContentLoaded事件。所以最好只含有一個(gè)延遲腳本，且放在底部。
async
<html>
<head>
<script async src="xx1.js"></script>
<script async src="xx2.js"></script>
</head>
<body>
...
</body>
</html>
如上面的例子，第二個(gè)腳本可能會(huì)在第一個(gè)腳本前執(zhí)行，且不讓頁面等待他們加載和執(zhí)行，從而加載頁面的其他內(nèi)容。
script標(biāo)簽的使用
按照傳統(tǒng)的方法，<script>元素應(yīng)該放在頁面的<head>元素中，但是<head>元素中如果包含了所有的js文件，意味著要等待所以的js文件加載完成和執(zhí)行完成之后，才能呈現(xiàn)頁面的內(nèi)容，導(dǎo)致會(huì)有一段白屏?xí)r間。所以為了規(guī)避這個(gè)問題，一般把全部的javascript放在</body>前。
如果一個(gè)腳本不依賴于其他腳本，這時(shí)候使用async屬性還是很有用的。
兼容性
瀏覽器對(duì)defer和async的支持還是相當(dāng)廣的。在XHTML文檔中，要把a(bǔ)sync屬性設(shè)置成async="async"，defer也一樣。
