嵌入javascript指令碼的位置

標籤：

JavaScript指令碼可以放在HTML文檔任何需要的位置。一般來說，可以在<head>與</head>、<body>與</body>標記對之間按需要放置JavaScript指令碼代碼。

 

一、放在<head>與</head>標記對之間

放置在<head>與</head>標記對之間的JavaScript指令碼代碼一般用於提前載入以響應使用者的動作，一般不影響HTML文檔的瀏覽器顯示內容。如下是其基本文檔結構：

 1 <html> 2 <head> 3 <title>放置在<head>與</head>標記對之間</title> 4 <!--直接寫JavaScript代碼--> 5 <script type="text/javascript"> 6 //JavaScript代碼 7 </script> 8 <!--引入外部指令碼--> 9 <script type="text/javascript" src="1.js"></script>10 </head>11 <body>12 </body>13 </html>

 二、放置在<body>與</body>標記對之間

JavaScript指令碼也可以放置在<body>與</body>標記對之間，可根據需要寫多個獨立的指令碼程式碼片段並與HTML代碼結合在一起。

 1 <html> 2 <head> 3 <title>放置在<body>與</body>標記對之間</title> 4 </head> 5 <body>
 6　<!--直接寫JavaScript代碼-->
 7 <script type="text/javascript">
 8     //JavaScript代碼
 9 </script>
10 <!--引入外部指令碼-->
11 <script type="text/javascript" src="1.js"></script>12 </body>13 </html>

注意：在<head>和<body>標籤內可以有多個代碼塊，只要放在<script type="text/javascript">與</script>之間或者引入外部指令碼即可。同時，JavaScript指令碼也可以放在其他任意HTML標籤之間，如<div>、<p>、<span>等。

 

說明：瀏覽器一般是從上到下渲染HTML，當遇到JavaScript代碼時，瀏覽器將發生阻塞（不再解析後面的任何代碼，包括HTML和JavaScript），有些瀏覽器在阻塞期間不會解析該JavaScript後面的HTML代碼，必須等到該JavaScript代碼執行完畢，才繼續解析。如果將JavaScript放置在<head>...</head>或者<body>...</body>之間，經常會發生會發生這種現象：瀏覽器先是呈現一部分頁面，再呈現後邊的頁面，中間間隔時間明顯。這樣帶來的明顯結果就是使用者體驗差。

因此，如無特殊要求，我們強烈建議將JavaScript代碼置於<body>...</body>的最後。如：

<body><!--HTML代碼--><script type="text/javascript"></scirpt><script type="text/javascript" src="1.js"></scirpt></body>

原文連結：http://www.itxueyuan.org/view/6297.html

嵌入javascript指令碼的位置