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