- 1.javascript具有阻塞特征，<script>標(biāo)簽出現(xiàn)，會(huì)停止頁(yè)面的下載和解析，等待腳本執(zhí)行，因?yàn)槟_本可能在運(yùn)行過(guò)程中修改頁(yè)面內(nèi)容。
- 2.腳本位置
<html>
<head>
<title>Script Example</title>
<-- Example of inefficient script positioning -->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
</body>
</html>
存在的性能問(wèn)題：
瀏覽器在遇到body之前，不會(huì)渲染頁(yè)面的任何部分，head部分加載了三個(gè)js文件，每個(gè)<script>標(biāo)簽阻塞了頁(yè)面的解析，直到它完整的下載并運(yùn)行了js代碼之后，頁(yè)面才會(huì)繼續(xù)進(jìn)行。這就會(huì)導(dǎo)致，頁(yè)面打開(kāi)時(shí)，首先是一個(gè)空白的頁(yè)面。
推薦的方法：
將所有script標(biāo)簽盡可能接近<body>標(biāo)簽底部，盡量減少對(duì)整個(gè)頁(yè)面下載的影響。
下載一個(gè)100kb的文件比下載四個(gè)25kb的文件要快，減少引用外部文件的數(shù)量，將多個(gè)js文件整合成一個(gè)，可以使用打包工具。
3.defer屬性：
指明元素中所包含的腳本不打算修改DOM，因此代碼可以稍后執(zhí)行。
<script type = "text/javascript" src="file1.js" defer></script>
帶有defer屬性的<script>標(biāo)簽可以放置在頁(yè)面任何位置，對(duì)應(yīng)的Javascript文件在<script>標(biāo)簽被解析時(shí)啟動(dòng)下載，它不會(huì)阻塞瀏覽器的其他處理過(guò)程，這些文件可以與頁(yè)面的其他資源一起并行下載。這些代碼的執(zhí)行時(shí)機(jī)在頁(yè)面解析完后,但在 DOMContentLoaded事件之前。
- 4.async屬性
<script type="text/javascript" src="demo_async.js" async="async"></script>
async屬性同defer屬性相同的地方在于，可以被放到任何位置，當(dāng)遇到<script>標(biāo)簽時(shí)開(kāi)始啟動(dòng)下載，并且不會(huì)阻塞瀏覽器的其他處理過(guò)程。
不同的地方在于，帶有async標(biāo)簽的腳本一旦下載完成就開(kāi)始執(zhí)行(當(dāng)然是在window的onload之前)，執(zhí)行也是異步的不會(huì)阻塞瀏覽器的其他處理過(guò)程。這意味著這些script 可能不會(huì)按它們出現(xiàn)在頁(yè)面中的順序來(lái)執(zhí)行,如果你的腳本互相依賴并和執(zhí)行順序相關(guān),就有很大的可能出問(wèn)題。
