當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript标签在页面中的位置探讨
生活随笔
收集整理的這篇文章主要介紹了
javascript标签在页面中的位置探讨
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
在制作網(wǎng)頁的過程中需要引用很多的js文件，至于他正確位置好多的朋友就會(huì)有疑問了，接下來為大家詳細(xì)介紹下
在制作網(wǎng)頁的過程中，我們經(jīng)常寫類似下面的代碼：?
[html]?
復(fù)制代碼 代碼如下:
<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>?
<!-- 這里放內(nèi)容 -->?
</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>?
<!-- 這里放內(nèi)容 -->?
</body>?
</html>?
按照慣例，所有的<script>元素都應(yīng)該放在頁面的<head>元素中。請(qǐng)注意：無論引用幾個(gè)外部js文件，瀏覽器都會(huì)按照<script>元素在頁面中出現(xiàn)的先后順序?qū)λ鼈円来芜M(jìn)行解析 。換句話說，在第一個(gè)<script>元素包含的代碼解析完成后，第二個(gè)<script>包含的代碼才會(huì)被解析，然后才是第三個(gè)、第四個(gè)...?
這種做法的目的就是把所有外部文件（包括CSS文件和JavaScript文件）的引用都放在相同的地方。可是，在文檔的<head>元素中包含所有JavaScript文件，意味著必須等到全部JavaScript代碼都被下載、解析和執(zhí)行完成以后，才能開始呈現(xiàn)頁面的內(nèi)容（瀏覽器在遇到<body>標(biāo)簽時(shí)才開始呈現(xiàn)內(nèi)容）。對(duì)于那些需要很多JavaScript代碼的頁面來說，這無疑會(huì)導(dǎo)致瀏覽器在呈現(xiàn)頁面時(shí)出現(xiàn)明顯的延遲，而延遲期間的瀏覽器窗口將是一片空白。為了避免這個(gè)問題，現(xiàn)代Web應(yīng)用程序一般都會(huì)把全部JavaScript引用放在<body>元素中，放在頁面的內(nèi)容后面，如下所示：?
[html]?
復(fù)制代碼 代碼如下:
<html>?
<head>?
<title>Example HTML Page</title>?
</head>?
<body>?
<!-- 這里放內(nèi)容 -->?
<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>?
<!-- 這里放內(nèi)容 -->?
<script type="text/javascript" src="example1.js"></script>?
<script type="text/javascript" src="example2.js"></script>?
</body>?
</html>?
這樣，在解析包含的JavaScript代碼之前，頁面的內(nèi)容將完全呈現(xiàn)在瀏覽器中。而用戶也會(huì)因?yàn)闉g覽器窗口顯示空白頁面的時(shí)間縮短而感到打開頁面的速度加快了。?
或者也可以使用<script>標(biāo)簽的defer屬性表明腳本在執(zhí)行時(shí)不會(huì)影響頁面的構(gòu)造，即腳本會(huì)被延遲到整個(gè)頁面都解析完畢后再運(yùn)行，代碼如下：?
[html]?
復(fù)制代碼 代碼如下:
<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>?
<!-- 這里放內(nèi)容 -->?
</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>?
<!-- 這里放內(nèi)容 -->?
</body>?
</html>?
上述兩種寫法的實(shí)際效果是一樣的。但是，并非所有的瀏覽器都支持defer屬性，有些瀏覽器會(huì)忽略這個(gè)屬性，不延遲腳本的執(zhí)行。
在制作網(wǎng)頁的過程中，我們經(jīng)常寫類似下面的代碼：?
[html]?
復(fù)制代碼 代碼如下:
<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>?
<!-- 這里放內(nèi)容 -->?
</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>?
<!-- 這里放內(nèi)容 -->?
</body>?
</html>?
按照慣例，所有的<script>元素都應(yīng)該放在頁面的<head>元素中。請(qǐng)注意：無論引用幾個(gè)外部js文件，瀏覽器都會(huì)按照<script>元素在頁面中出現(xiàn)的先后順序?qū)λ鼈円来芜M(jìn)行解析 。換句話說，在第一個(gè)<script>元素包含的代碼解析完成后，第二個(gè)<script>包含的代碼才會(huì)被解析，然后才是第三個(gè)、第四個(gè)...?
這種做法的目的就是把所有外部文件（包括CSS文件和JavaScript文件）的引用都放在相同的地方。可是，在文檔的<head>元素中包含所有JavaScript文件，意味著必須等到全部JavaScript代碼都被下載、解析和執(zhí)行完成以后，才能開始呈現(xiàn)頁面的內(nèi)容（瀏覽器在遇到<body>標(biāo)簽時(shí)才開始呈現(xiàn)內(nèi)容）。對(duì)于那些需要很多JavaScript代碼的頁面來說，這無疑會(huì)導(dǎo)致瀏覽器在呈現(xiàn)頁面時(shí)出現(xiàn)明顯的延遲，而延遲期間的瀏覽器窗口將是一片空白。為了避免這個(gè)問題，現(xiàn)代Web應(yīng)用程序一般都會(huì)把全部JavaScript引用放在<body>元素中，放在頁面的內(nèi)容后面，如下所示：?
[html]?
復(fù)制代碼 代碼如下:
<html>?
<head>?
<title>Example HTML Page</title>?
</head>?
<body>?
<!-- 這里放內(nèi)容 -->?
<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>?
<!-- 這里放內(nèi)容 -->?
<script type="text/javascript" src="example1.js"></script>?
<script type="text/javascript" src="example2.js"></script>?
</body>?
</html>?
這樣，在解析包含的JavaScript代碼之前，頁面的內(nèi)容將完全呈現(xiàn)在瀏覽器中。而用戶也會(huì)因?yàn)闉g覽器窗口顯示空白頁面的時(shí)間縮短而感到打開頁面的速度加快了。?
或者也可以使用<script>標(biāo)簽的defer屬性表明腳本在執(zhí)行時(shí)不會(huì)影響頁面的構(gòu)造，即腳本會(huì)被延遲到整個(gè)頁面都解析完畢后再運(yùn)行，代碼如下：?
[html]?
復(fù)制代碼 代碼如下:
<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>?
<!-- 這里放內(nèi)容 -->?
</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>?
<!-- 這里放內(nèi)容 -->?
</body>?
</html>?
上述兩種寫法的實(shí)際效果是一樣的。但是，并非所有的瀏覽器都支持defer屬性，有些瀏覽器會(huì)忽略這個(gè)屬性，不延遲腳本的執(zhí)行。
總結(jié)
以上是生活随笔為你收集整理的javascript标签在页面中的位置探讨的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： luncene 查询字符串的解析—Que
- 下一篇： jquery 手指滑动多半屏_JS拖拽专