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屬性的主流瀏覽器。其他瀏覽器則會忽略這個屬性，不延遲指令碼的執行
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
