您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“script標簽一般寫在html的哪里”,內容詳細,步驟清晰,細節處理妥當,希望這篇“script標簽一般寫在html的哪里”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。
script標簽的位置:1、放在head標簽內部,瀏覽器解析HTML,解析到script標簽時,會先下載完所有script,再往下解析其他的HTML;因此會使網頁內容呈現滯后,用戶體驗差。2、放在body標簽內部,瀏覽器會先解析完整個HTML頁面,再下載并解析js。3、放在body閉標簽之后,瀏覽器會忽略之前的“”,所以實際效果和寫在body閉合標簽之前沒有區別。
本教程操作環境:windows7系統、HTML5版、Dell G3電腦。
一般script標簽會被放在頭部或尾部,頭部就是head標簽里,尾部就是body里,也有放在body閉合標簽之后。
<head> <title>獲取DOM元素</title> <script> var myElement = document.getElementById("atag"); console.log(myElement); </script> </head> <body> <div id="atag"> <p>一個標簽</p> </div> </body>
打印結果:
當script標簽放在head標簽里時,瀏覽器解析HTML,解析到script標簽時,會先下載完所有script,再往下解析其他的HTML。在瀏覽器下載js時,是不能多個js一起下載的,且瀏覽器下載js時,會阻塞解析其他的HTML。因此,將script標簽放在頭部,會使網頁內容呈現滯后,用戶體驗差。
<body> <div id="atag"> <p>一個標簽</p> </div> <script> var myElement = document.getElementById("atag"); console.log(myElement); </script> </body>
將script標簽放在body尾部,瀏覽器會先解析完整個HTML頁面,再下載js,這樣的話,如果js執行出錯了,最起碼頁面中的元素還可以加載出來,因為DOM文檔是從上往下的順序執行的。 但是對于一些高度依賴于js的網頁,這樣就會顯得很慢。
<body> <div id="atag"> <p>一個標簽</p> </div> </body> <script> var myElement = document.getElementById("atag"); console.log(myElement); </script>
雖然放在body閉合標簽之前和之后的打印結果是一樣的,但是從HTML 2.0起放在body閉標簽之后
就是不合標準的。之所以瀏覽器不會報錯,是因為如果在body標簽之后
再出現script或任何元素的開始標簽,都是prase error
(語法錯誤),瀏覽器會忽略之前的</body>
,即視作仍舊在body內部,所以實際效果和寫在body閉合標簽之前
是沒有區別的。
async
和defer
async的設置,會使得script腳本異步的加載并在允許的情況下執行,但是并不會按照在script在頁面中的順序來執行,而是誰先加載完誰執行。
<script async src="/script01.js"></script> <script async src="/script02.js"></script>
如果script01.js較大,下載慢,則會導致script02.js可能先于script01.js執行。
defer的設置,會是瀏覽器異步的下載該文件并且不會影響到DOM的渲染,如果有多個設置了defer的script標簽存在,則會按照順序執行所有的script,即先下載script01.js,再下載script02.js
讀到這里,這篇“script標簽一般寫在html的哪里”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。