DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> javascript標簽在頁面中的位置探討
javascript標簽在頁面中的位置探討
編輯:JavaScript基礎知識     
在制作網頁的過程中,我們經常寫類似下面的代碼:
[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>
<!-- 這裡放內容 -->
</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>
<!-- 這裡放內容 -->
</body>
</html>

按照慣例,所有的<script>元素都應該放在頁面的<head>元素中。請注意:無論引用幾個外部js文件,浏覽器都會按照<script>元素在頁面中出現的先後順序對它們依次進行解析 。換句話說,在第一個<script>元素包含的代碼解析完成後,第二個<script>包含的代碼才會被解析,然後才是第三個、第四個...
這種做法的目的就是把所有外部文件(包括CSS文件和JavaScript文件)的引用都放在相同的地方。可是,在文檔的<head>元素中包含所有JavaScript文件,意味著必須等到全部JavaScript代碼都被下載、解析和執行完成以後,才能開始呈現頁面的內容(浏覽器在遇到<body>標簽時才開始呈現內容)。對於那些需要很多JavaScript代碼的頁面來說,這無疑會導致浏覽器在呈現頁面時出現明顯的延遲,而延遲期間的浏覽器窗口將是一片空白。為了避免這個問題,現代Web應用程序一般都會把全部JavaScript引用放在<body>元素中,放在頁面的內容後面,如下所示:
[html]
復制代碼 代碼如下:
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 這裡放內容 -->
<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>
<!-- 這裡放內容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>

這樣,在解析包含的JavaScript代碼之前,頁面的內容將完全呈現在浏覽器中。而用戶也會因為浏覽器窗口顯示空白頁面的時間縮短而感到打開頁面的速度加快了。

或者也可以使用<script>標簽的defer屬性表明腳本在執行時不會影響頁面的構造,即腳本會被延遲到整個頁面都解析完畢後再運行,代碼如下:
[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>
<!-- 這裡放內容 -->
</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>
<!-- 這裡放內容 -->
</body>
</html>

上述兩種寫法的實際效果是一樣的。但是,並非所有的浏覽器都支持defer屬性,有些浏覽器會忽略這個屬性,不延遲腳本的執行。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved