首頁 > 開發者 > JavaScript
按照慣例，所有的<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屬性，有些瀏覽器會忽略這個屬性，不延遲指令碼的執行。
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
