一般來(lái)說(shuō)，我們都會(huì)將外部js文件放在我們html的<head>...</head>中：
<html>
<head>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
...
</body>
</html>
那么這樣到底好不好呢涛舍？
在瀏覽器渲染頁(yè)面之前，它需要通過(guò)解析HTML標(biāo)記然后構(gòu)建DOM樹(shù)箩言。在這個(gè)過(guò)程中硬贯，如果解析器遇到了一個(gè)腳本(script)，它就會(huì)停下來(lái)陨收，并且執(zhí)行這個(gè)腳本饭豹，然后才會(huì)繼續(xù)解析HTML。如果遇到了一個(gè)引用外部資源的腳本(script)务漩，它就必須停下來(lái)等待這個(gè)腳本資源的下載拄衰，而這個(gè)行為會(huì)導(dǎo)致一個(gè)或者多個(gè)的網(wǎng)絡(luò)往返，并且會(huì)延遲頁(yè)面的首次渲染時(shí)間饵骨。
那么既然把腳本(script)資源放在head里面是個(gè)不好的主意翘悉，并且可能會(huì)阻塞瀏覽器渲染頁(yè)面；那我們是不是要把所有的JavaScript文件都放置到文檔的底部呢居触？
那也不一定哦妖混。老赤。。
如果你的腳本中使用了document.write在頁(yè)面中插入內(nèi)容的話(huà)制市，那么我的內(nèi)容必須在頁(yè)面加載的時(shí)候就顯示出來(lái)抬旺，那此時(shí)我的js就必須在<head>里面了。
到底怎么放呢
對(duì)于必須要在DOM加載之前運(yùn)行的JavaScript腳本祥楣，我們需要把這些腳本放置在頁(yè)面的head中开财，而不是通過(guò)外部引用的方式，因?yàn)橥獠康囊迷黾恿司W(wǎng)絡(luò)的請(qǐng)求次數(shù)误褪；并且我們要確保內(nèi)斂的這些JavaScript腳本是很小的责鳍，最好是壓縮過(guò)的，并且執(zhí)行的速度很快振坚，不會(huì)造成瀏覽器渲染的阻塞薇搁；
對(duì)于支持使用
script標(biāo)簽的async和defer屬性的瀏覽器，我們可以使用這兩個(gè)屬性渡八；async和defer都代表異步執(zhí)行啃洋，他們的下載過(guò)程都可以在HTML的解析過(guò)程中進(jìn)行，async加載完成之后立即執(zhí)行這個(gè)文件的代碼屎鳍，執(zhí)行文件代碼的過(guò)程中會(huì)阻塞HTML的解析宏娄，defer是在HTML文檔解析之后再執(zhí)行加載完成的文件那么除了必須在頁(yè)面加載前執(zhí)行的
js文件，且不支持async和defer的瀏覽器逮壁，那么我們就可以將他們放在html底部孵坚。
