當前位置:首頁 » 網頁前端 » js腳本放哪個位置
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

js腳本放哪個位置

發布時間: 2022-12-16 13:37:49

『壹』 js文件放在哪裡好

沒有區別的,放在哪裡都可以的,頁面都可以訪問的,
因為頁面中只是把JS文件的路徑導入進來,
寫在頁面的body內,只是在寫程序的時候可以方便的查找到要使用的方法(根據JS文件名)

『貳』 關於Web優化的問題,JS腳本的引用代碼,放在HTML底部哪裡

<html>
<head>
<!--此處引入CSS-->
</head>
<body>
<!--正文內容-->
<!--此處引入JS,在正文結尾-->
</body>
</html>


但不是所有的JS都需要放在文檔尾部的,放在尾部的原因有兩點:

  1. 現在主流瀏覽器都支持並行下載,head引入的文件會在多個線程中同時下載,如果你有某幾個JS存在相互依存關系,比如a.js里調用b.js里的某個函數,或是操作某個還在載入中的DOM元素,如果並行下載b.js沒下載完或DOM沒載入完時a.js已經開始執行了,此時會出錯。所以放在尾部等到整個文檔載入完(注意引入的順序)才執行。

  2. HTML是瀑布流式載入的,即從上到下順序載入,如果你某一個跟主要功能無關(比如流量統計)的JS放在頁面開始時載入,那麼頁面會一直等待,直到這個JS完全載入完畢才會繼續載入其他內容,這樣很影響用戶的體驗。

『叄』 JavaScript腳本應放在頁面的什麼位置,其存放位置對腳本的執行有什麼影響

建議您看一下高性能網站建設指南一書,該書是權威指導所寫,受無數javascript程序員推薦,上面就有一章詳細寫到腳本放的位置對這個網頁,已經對腳本的影響
腳本寫在網頁內的時候:
在頁面載入時.就立即需要運行的腳本.就要放到調用它的的代碼之前,如果腳本中要操作DOM,會習慣的把腳本放在</body>之後
腳本寫成獨立js
在下載腳本的時候,並行下載是被阻止的.也就是說,在引入js文件時,瀏覽器在下載腳本時,會不繼續下載頁面,直到腳本下載完成後再繼續下載頁面,所以,如果你的JS文件很大的時候,放在body前.可能會時頁面載入時,出現白屏一段時間的現象,所以在引入外部JS,會習慣在body後面引入

『肆』 外部javascript存放在哪裡

存放在網站文件夾里的任何位置都可以,只要你引用的時候把路徑寫正確就可以。當然建立一個專門的文件夾保存便於管理。

『伍』 JavaScript代碼應該放在HTML代碼哪個位置比較好

通常情況下,JavaScript 代碼是和 HTML 代碼一起使用的,可以將 JavaScript 代碼放置在 HTML 文檔的任何地方。但放置的地方,會對 JavaScript 代碼的正常執行會有一定影響,具體如下所述。
放置於<head></head>之間
將 JavaScript 代碼放置於 HTML 文檔的 <head></head> 標簽之間是一個通常的做法。由於 HTML 文檔是由瀏覽器從上到下依次載入的,將 JavaScript 代碼放置於<head></head> 標簽之間,可以確保在需要使用腳本之前,它已經被載入了:
復制代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
……
JavaScript 代碼
……
</script>
</head>
....
放置於<body></body>之間
也有部分情況將 JavaScript 代碼放置於 <body></body> 之間的。設想如下一種情況:我們有一段 JavaScript 代碼需要操作 HTML 元素。但由於 HTML 文檔是由瀏覽器從上到下依次載入的,為避免 JavaScript 代碼操作 HTML 元素時,HTML 元素還未載入而報錯(對象不存在),因此需要將這段代碼寫到 HTML 元素後面,例子如下:
復制代碼 代碼如下:
<html>
<head>
</head>
<body>
</body>
<div id="div1"></div>
<script type="text/javascript">
document.getElementById("div1").innerHTML="測試文字";
</script>
</html>
但通常情況下,我們操作頁面元素一般都是通過事件來驅動的,所以上面這種情況並不多見。另外我們不建議將 JavaScript 代碼寫到 <html></html> 之外。
提示
如果 HTML 文檔聲明為 XHTML ,<script></script> 標簽必須在 CDATA 部分內聲明,否則 XHTML 將把 <script></script> 標簽解析為另一個 XML 標簽,裡面的 JavaScript 代碼可能不會正常執行。因此,在嚴格的 XHTML 中使用 JavaScript 應該像如下示例一樣聲明:
復制代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
<![CDATA[
JavaScript 代碼
]]>
</script>
</head>
....
以上兩種將 JavaScript 代碼寫到 HTML 文檔中的方式,都是 HTML 文檔內部引用 JavaScript 代碼的方式。除了內部引用,還可以使用外部引用方式。
外部引用 JavaScript 代碼
將 JavaScript 代碼(不包括<script></script>標簽)單獨形成一個文檔,並以 js 後綴命名,如 myscript.js ,並在 HTML 文檔 <script></script> 標簽中使用 src 屬性來引用該文件:
復制代碼 代碼如下:
<html>
<head>
<script type="text/javascript" src="myscript.js"></script>
</head>
....
在使用了外部引用 JavaScript 代碼之後,其好處顯而易見:
1.避免在 JavaScript 代碼里使用 <!-- ... //-->
2.避免使用難看的 CDATA
3.公共的 JavaScript 代碼可以被復用於其他 HTML 文檔,也利於 JavaScript 代碼的統一維護
4.HTML 文檔更小,利於搜索引擎收錄
5.可以壓縮、加密單個 JavaScript 文件
6.瀏覽器可以緩存 JavaScript 文件,減少寬頻使用(當多個頁面同時使用一個 JavaScript 文件的時候,通常只需下載一次)
7.避免使用復雜的 HTML 實體,如可以直接使用 document.write(2>1) 而無需寫作 document.write(2<1)
將 JavaScript 代碼形成為外部文件,也會增加伺服器的 HTTP 請求負擔,在超高並發請求的環境下,這並不是一個好的策略。另外 在引用外部 js 文件時,需注意文件的正確路徑。

『陸』 javascript放在<head>里和放在<body>里有什麼區別嗎

  1. 主要是先載入和後載入的區別。

  2. 如果JavaScript腳本寫在head標簽裡面,那麼需要用window.onload起到一個延遲載入的作用。

  3. 如果JavaScript腳本寫在body裡面,也要看具體位置。如果寫在body裡面,一般都是寫在了body標簽的最後面。

  4. 例子:寫在body里:<body>
    <inputtype="button"id="btn"/>
    <ahref="javascript:;"id="div-box"></a>
    <script>
    varoBtn=document.getElementById('btn');
    varoBox=document.getElementById('div-box');
    oBtn.onclick=function(){
    varhtml='<divstyle="width:100px;height:100px;background:#ccc;"></div>';
    if(oBox.innerHTML==''){
    oBox.innerHTML=html;
    }else{
    oBox.innerHTML='';
    }
    };
    </script>
    </body>
  5. 例子:寫在head里:<headlang="en">
    <metacharset="UTF-8">
    <title></title>
    <script>
    window.onload=function(){
    varoBtn=document.getElementById('btn');
    varoBox=document.getElementById('div-box');
    oBtn.onclick=function(){
    varhtml='<divstyle="width:100px;height:100px;background:#ccc;"></div>';
    if(oBox.innerHTML==''){
    oBox.innerHTML=html;
    }else{
    oBox.innerHTML='';
    }
    };
    }
    </script>
    </head>
    <body>
    <inputtype="button"id="btn"/>
    <ahref="javascript:;"id="div-box"></a>

    </body>