- 1.javascript具有阻塞特征，<script>標簽出現(xiàn)欣孤，會停止頁面的下載和解析郎任，等待腳本執(zhí)行史翘，因為腳本可能在運行過程中修改頁面內(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>
存在的性能問題：
瀏覽器在遇到body之前位衩，不會渲染頁面的任何部分，head部分加載了三個js文件便脊，每個<script>標簽阻塞了頁面的解析蚂四，直到它完整的下載并運行了js代碼之后，頁面才會繼續(xù)進行哪痰。這就會導(dǎo)致遂赠，頁面打開時，首先是一個空白的頁面晌杰。
推薦的方法：
將所有script標簽盡可能接近<body>標簽底部跷睦，盡量減少對整個頁面下載的影響。
下載一個100kb的文件比下載四個25kb的文件要快肋演，減少引用外部文件的數(shù)量抑诸，將多個js文件整合成一個，可以使用打包工具爹殊。
3.defer屬性：
指明元素中所包含的腳本不打算修改DOM蜕乡，因此代碼可以稍后執(zhí)行。
<script type = "text/javascript" src="file1.js" defer></script>
帶有defer屬性的<script>標簽可以放置在頁面任何位置梗夸，對應(yīng)的Javascript文件在<script>標簽被解析時啟動下載层玲，它不會阻塞瀏覽器的其他處理過程，這些文件可以與頁面的其他資源一起并行下載反症。這些代碼的執(zhí)行時機在頁面解析完后,但在 DOMContentLoaded事件之前辛块。
- 4.async屬性
<script type="text/javascript" src="demo_async.js" async="async"></script>
async屬性同defer屬性相同的地方在于，可以被放到任何位置铅碍，當遇到<script>標簽時開始啟動下載润绵，并且不會阻塞瀏覽器的其他處理過程。
不同的地方在于胞谈，帶有async標簽的腳本一旦下載完成就開始執(zhí)行(當然是在window的onload之前)尘盼，執(zhí)行也是異步的不會阻塞瀏覽器的其他處理過程。這意味著這些script 可能不會按它們出現(xiàn)在頁面中的順序來執(zhí)行,如果你的腳本互相依賴并和執(zhí)行順序相關(guān),就有很大的可能出問題烦绳。
