探討JavaScript標(biāo)簽位置的存放與功能有無關(guān)系

更新時(shí)間：2016年01月15日 11:05:59 作者：詩吟

在網(wǎng)頁中，我們可以將JavaScript代碼放在html文件中任何位置，但一般放在head或body標(biāo)簽里面。一般來說，<script>元素放在哪里與其的功能作用是緊密相關(guān)的，通過本文我們一起學(xué)習(xí)下

在網(wǎng)頁中，我們可以將JavaScript代碼放在html文件中任何位置，但一般放在head或body標(biāo)簽里面。

一般來說，<script>元素放在哪里與其的功能作用是緊密相關(guān)的，在這里討論2種情況：

1、放在<head>里

將<script>元素放在head中是為了讓瀏覽器在一開始就讀取，<script>元素會(huì)在整個(gè)網(wǎng)頁最開始解析時(shí)就加載執(zhí)行，其優(yōu)先次序僅次于<title>元素。

然后依次向下解析渲染。

應(yīng)用：比如進(jìn)行頁面顯示初始化的js必須放在head里面。

2、放在<body>部分

瀏覽器按照頁面標(biāo)簽順序依次解析，在讀取到JavaScript代碼時(shí)就會(huì)執(zhí)行語句。

但有的JS函數(shù)是通過事件調(diào)用的，所以具體放在頁面的哪個(gè)位置并不影響其發(fā)揮作用的時(shí)間，所以，在考慮到前端性能方面的問題后，可以把不是最先執(zhí)行的和事件調(diào)用的JS代碼放在body的最下面。

寫一寫看咯：

<!DOCTYPE HTML>
<html>
<head>
<title>JS代碼的位置</title>
<script type="text/javascript">
document.write("I'M HEAD javascript");
</script>
</head>
<body>
<script type="text/javascript">
document.write("I'M body javascript");
</script>
</body>
</html>

由以上所述看出，javascript標(biāo)簽位置的存放與功能緊密相關(guān)，希望本文所述對大家有所幫助。

您可能感興趣的文章:

相關(guān)文章

Javascript中的return作用及javascript return關(guān)鍵字用法詳解
本文給大家介紹Javascript中的return作用及javascript return關(guān)鍵字用法詳解，對于大家學(xué)習(xí)javascript中的return知識有所幫助，感興趣的朋友一起學(xué)習(xí)吧
2015-11-11
微信小程序之事件交互操作實(shí)例分析
這篇文章主要介紹了微信小程序之事件交互操作,結(jié)合實(shí)例形式分析了微信小程序事件響應(yīng)、交互及界面布局等相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2018-12-12
JavaScript 實(shí)現(xiàn)下雪特效的示例代碼
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)下雪特效的示例代碼，幫助大家利用JavaScript制作特效，感興趣的朋友可以了解下
2020-09-09
共享自己寫一個(gè)框架DreamScript
共享自己寫一個(gè)框架DreamScript...
2007-01-01
js+html5實(shí)現(xiàn)復(fù)制文字按鈕
這篇文章主要為大家詳細(xì)介紹了js+html5實(shí)現(xiàn)復(fù)制文字按鈕，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
js判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
js動(dòng)態(tài)生成form 并用ajax方式提交的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s動(dòng)態(tài)生成form 并用ajax方式提交的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-09-09
對采用動(dòng)態(tài)原型方式無法展示繼承機(jī)制得思考
今天看書，作者討論到能否采用動(dòng)態(tài)原型方法展示繼承機(jī)制，給出的答案是：不能。原因是prototype對象的唯一性?？聪旅娲a（這段代碼不正確，卻值得研究）
2009-12-12
關(guān)于JS Lodop打印插件打印Bootstrap樣式錯(cuò)亂問題的解決方案
關(guān)于Lodop打印是個(gè)很牛的打印插件,但是打印Bootstrap的樣式的時(shí)候就容易錯(cuò)亂,下面通過本文給大家分享下這方面的問題
2016-12-12
JS拉起或下載app的實(shí)現(xiàn)代碼
最近做項(xiàng)目遇到這樣的需求，通過手機(jī)網(wǎng)頁判斷是否安裝了自己公司app，如果安裝了則拉起app，沒有安裝則跳轉(zhuǎn)到下載頁。怎么實(shí)現(xiàn)呢？下面小編給大家分享js拉起或下載app的實(shí)現(xiàn)代碼，需要的朋友參考下
2017-02-02