快捷導(dǎo)航

javascript標(biāo)簽在頁(yè)面中的位置探討

更新時(shí)間：2013年04月11日 16:16:46 作者：

在制作網(wǎng)頁(yè)的過(guò)程中需要引用很多的js文件，至于他正確位置好多的朋友就會(huì)有疑問(wèn)了，接下來(lái)為大家詳細(xì)介紹下

在制作網(wǎng)頁(yè)的過(guò)程中，我們經(jīng)常寫類似下面的代碼：
[html]

 
<html> 
<head> 
<title>Example HTML Page</title> 
<script type="text/javascript" src="example1.js"></script> 
<script type="text/javascript" src="example2.js"></script> 
</head> 
<body> 
<!-- 這里放內(nèi)容 --> 
</body> 
</html> 
<html> 
<head> 
<title>Example HTML Page</title> 
<script type="text/javascript" src="example1.js"></script> 
<script type="text/javascript" src="example2.js"></script> 
</head> 
<body> 
<!-- 這里放內(nèi)容 --> 
</body> 
</html> 

按照慣例，所有的<script>元素都應(yīng)該放在頁(yè)面的<head>元素中。請(qǐng)注意：無(wú)論引用幾個(gè)外部js文件，瀏覽器都會(huì)按照<script>元素在頁(yè)面中出現(xiàn)的先后順序?qū)λ鼈円来芜M(jìn)行解析。換句話說(shuō)，在第一個(gè)<script>元素包含的代碼解析完成后，第二個(gè)<script>包含的代碼才會(huì)被解析，然后才是第三個(gè)、第四個(gè)...
這種做法的目的就是把所有外部文件（包括CSS文件和JavaScript文件）的引用都放在相同的地方?？墒牵谖臋n的<head>元素中包含所有JavaScript文件，意味著必須等到全部JavaScript代碼都被下載、解析和執(zhí)行完成以后，才能開(kāi)始呈現(xiàn)頁(yè)面的內(nèi)容（瀏覽器在遇到<body>標(biāo)簽時(shí)才開(kāi)始呈現(xiàn)內(nèi)容）。對(duì)于那些需要很多JavaScript代碼的頁(yè)面來(lái)說(shuō)，這無(wú)疑會(huì)導(dǎo)致瀏覽器在呈現(xiàn)頁(yè)面時(shí)出現(xiàn)明顯的延遲，而延遲期間的瀏覽器窗口將是一片空白。為了避免這個(gè)問(wèn)題，現(xiàn)代Web應(yīng)用程序一般都會(huì)把全部JavaScript引用放在<body>元素中，放在頁(yè)面的內(nèi)容后面，如下所示：
[html]

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>Example HTML Page</title> 
</head> 
<body> 
<!-- 這里放內(nèi)容 --> 
<script type="text/javascript" src="example1.js"></script> 
<script type="text/javascript" src="example2.js"></script> 
</body> 
</html> 
<html> 
<head> 
<title>Example HTML Page</title> 
</head> 
<body> 
<!-- 這里放內(nèi)容 --> 
<script type="text/javascript" src="example1.js"></script> 
<script type="text/javascript" src="example2.js"></script> 
</body> 
</html> 

這樣，在解析包含的JavaScript代碼之前，頁(yè)面的內(nèi)容將完全呈現(xiàn)在瀏覽器中。而用戶也會(huì)因?yàn)闉g覽器窗口顯示空白頁(yè)面的時(shí)間縮短而感到打開(kāi)頁(yè)面的速度加快了。

或者也可以使用<script>標(biāo)簽的defer屬性表明腳本在執(zhí)行時(shí)不會(huì)影響頁(yè)面的構(gòu)造，即腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢后再運(yùn)行，代碼如下：
[html]

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>Example HTML Page</title> 
<script type="text/javascript" defer="defer" src="example1.js"></script> 
<script type="text/javascript" defer="defer" src="example2.js"></script> 
</head> 
<body> 
<!-- 這里放內(nèi)容 --> 
</body> 
</html> 
<html> 
<head> 
<title>Example HTML Page</title> 
<script type="text/javascript" defer="defer" src="example1.js"></script> 
<script type="text/javascript" defer="defer" src="example2.js"></script> 
</head> 
<body> 
<!-- 這里放內(nèi)容 --> 
</body> 
</html> 