1、標籤的位置
按照慣例，所有<script>元素都應該放在頁面的<head>元素中，例如：
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!--這裏放內容-->
</body>
</html>
這種做法的目的是把所有外部文件（包含CSS文件和javascript文件）的引用都放在相同的地方。可是，在文檔<head>元素中包含所有的js文件，意味着必須等到全部javascript代碼都被下載、解析和執行完成之後，才能開始呈現頁面的內容（瀏覽器在遇到<body>標籤時纔開始呈現內容）。對於那些需要很多javascript代碼的頁面來說，這無疑會導致瀏覽器在呈現頁面時出現明顯的延遲，而延遲期間的瀏覽器窗口中將是一片空白。爲了避免這個問題，現代web應用程序一般都把全部javascript引用放在<body>元素中，放在頁面的內容後面，如下例所示：
<html>
<head>
<title> New Document </title>
</head>
<body>
<!--這裏放內容-->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
這樣，在解析包含的javascript代碼之前，頁面的內容將完全呈現在瀏覽器中。而用戶也會因爲瀏覽器窗口顯示空白頁面的時間縮短而感到打開頁面的速度加快了。
2、延遲腳本
HTML4.0爲<script>標籤定義了defer的屬性。這個屬性的用途是表明腳本在執行時不會影響頁面的構造。也就是說，腳本會延遲到整個頁面都解析完畢後在執行。因此，在<script>元素中設置defer屬性（如下面的例子），實際上與上面介紹的把<script>元素放在頁面底部的效果是一樣的。
<html>
<head>
<title> New Document </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>
這個例子中，雖然我們把<script>元素放在了文檔的<head>元素中，但其中包含的腳本將延遲到瀏覽器遇到</html>標籤後在執行。
不過，問題是並非所有瀏覽器都支持defer屬性，IE和firefox3.0是目前唯一支持defer屬性的主流瀏覽器。其他瀏覽器則會忽略這個屬性，不延遲腳本的執行
標籤的位置 和 defer延遲腳本
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章