當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript标签在页面中的位置探讨
生活随笔
收集整理的這篇文章主要介紹了
javascript标签在页面中的位置探讨
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在制作網頁的過程中需要引用很多的js文件，至于他正確位置好多的朋友就會有疑問了，接下來為大家詳細介紹下
在制作網頁的過程中，我們經常寫類似下面的代碼：?
[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屬性，有些瀏覽器會忽略這個屬性，不延遲腳本的執行。
在制作網頁的過程中，我們經常寫類似下面的代碼：?
[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屬性，有些瀏覽器會忽略這個屬性，不延遲腳本的執行。
總結
以上是生活随笔為你收集整理的javascript标签在页面中的位置探讨的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： luncene 查询字符串的解析—Que
- 下一篇： gradle入门，安卓gradle入门