問題： 當(dāng)在html文件中嵌入script標(biāo)簽時(shí)嫂粟，正確的位置應(yīng)該放在哪里叉抡？
分析
當(dāng)瀏覽器加載一個(gè)含有<script>標(biāo)簽的頁面時(shí)椰于，會發(fā)生以下動作：
1 獲取HTML文件淘菩，拉取HTML頁面(比如：index.html)
2 開始解析html文件
3 當(dāng)解析器遇到一個(gè)<script>標(biāo)簽時(shí)，準(zhǔn)備去獲取<script>標(biāo)簽對應(yīng)的js文件
4 當(dāng)解析器獲取js文件時(shí)霜幼，同時(shí)中斷了頁面上其他html的解析
5 一段時(shí)間后嫩码，js文件解析完畢，頁面上其他的html標(biāo)簽繼續(xù)解析
在第四步的時(shí)候罪既，頁面上的html解析阻斷铸题，給用戶帶來了不好的體驗(yàn)。
為什么會出現(xiàn)中斷html解析琢感？
任何script代碼都能改變HTML的結(jié)構(gòu)丢间，通過document.write() 這種方式或者其他方式。 這就導(dǎo)致了HTML解析必須等待<script>全部被下載和執(zhí)行完驹针，HTML才能解析script標(biāo)簽之后余下的部分烘挫。
然而，大部分的Javascript開發(fā)者在加載文檔過程中牌捷，不會通過script操作HTML的DOM結(jié)構(gòu)墙牌。然而，他們必須等到<script>全部加載結(jié)束暗甥，才能看到頁面。
廢棄的解決方式
之前解決這個(gè)問題的方式是將<script>標(biāo)簽放在html文件的<body>標(biāo)簽之后執(zhí)行
但這種加載方式存在的問題就是只有當(dāng)所有的html元素加載完成后才能開始加載<script>標(biāo)簽的內(nèi)容捉捅，如果這個(gè)加載需要花很長時(shí)間的話撤防，那在這段時(shí)間內(nèi)，就無法操作頁面棒口，要知道兩秒之內(nèi)不能操作頁面的話寄月，這個(gè)用戶體驗(yàn)是非常差的。
現(xiàn)在的解決方案
現(xiàn)在瀏覽器<script>標(biāo)簽支持 async 和 defer 屬性无牵， 應(yīng)用這些屬性當(dāng)<script>被下載時(shí)漾肮，瀏覽器更安全而且可以并行下載（下載script并不阻斷HTML解析）。
async
<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>
async標(biāo)記的 <script> 異步下載并執(zhí)行茎毁。這意味著<script>下載時(shí)不阻塞HTML的解析克懊，并且下載結(jié)束<script>馬上執(zhí)行忱辅。
上述代碼 script2 可能比 script1 先下載完并執(zhí)行完。
defer
<script type="text/javascript" src="path/to/script1.js" defer></script>
<script type="text/javascript" src="path/to/script2.js" defer></script>
defer標(biāo)簽的script順序執(zhí)行谭溉，這種方式也不會阻斷瀏覽器解析HTML,同時(shí)下載結(jié)束時(shí)<script> 馬上執(zhí)行
上述代碼中 script2 肯定比 script1 后執(zhí)行完
結(jié)論
使用 async 和 defer屬性來讓你的網(wǎng)頁不被block墙懂，但是前提要確保你的瀏覽器支持 這兩個(gè)屬性。
