最近重新翻了翻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也一樣掏膏。