快捷導(dǎo)航

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

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

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

在制作網(wǎng)頁的過程中，我們經(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)該放在頁面的<head>元素中。請注意：無論引用幾個外部js文件，瀏覽器都會按照<script>元素在頁面中出現(xiàn)的先后順序?qū)λ鼈円来芜M行解析。換句話說，在第一個<script>元素包含的代碼解析完成后，第二個<script>包含的代碼才會被解析，然后才是第三個、第四個...
這種做法的目的就是把所有外部文件（包括CSS文件和JavaScript文件）的引用都放在相同的地方。可是，在文檔的<head>元素中包含所有JavaScript文件，意味著必須等到全部JavaScript代碼都被下載、解析和執(zhí)行完成以后，才能開始呈現(xiàn)頁面的內(nèi)容（瀏覽器在遇到<body>標(biāo)簽時才開始呈現(xiàn)內(nèi)容）。對于那些需要很多JavaScript代碼的頁面來說，這無疑會導(dǎo)致瀏覽器在呈現(xiàn)頁面時出現(xiàn)明顯的延遲，而延遲期間的瀏覽器窗口將是一片空白。為了避免這個問題，現(xiàn)代Web應(yīng)用程序一般都會把全部JavaScript引用放在<body>元素中，放在頁面的內(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代碼之前，頁面的內(nèi)容將完全呈現(xiàn)在瀏覽器中。而用戶也會因為瀏覽器窗口顯示空白頁面的時間縮短而感到打開頁面的速度加快了。

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