HTML 4.01 為 <script> 標簽定義了 defer 屬性。這個屬性的用途是表明腳本在執行時不會影響頁面的構造。也就是說,腳本會被延遲到整個頁面都解析完畢后再運行。因此,在 <script> 元素中設置defer 屬性,相當於告訴瀏覽器立即下載,但延遲執行。

<script type="text/javascript" defer="defer" src="example.js"></script>

在這個例子中,雖然我們把 <script> 元素放在了文檔的 <head> 元素中,但其中包含的腳本將延遲到瀏覽器遇到 </html> 標簽后再執行。

HTML5規范要求腳本按照它們出現的先后順序執行,因此第一個延遲腳本會先於第二個延遲腳本執行,而這兩個腳本會先於 DOMContentLoaded 事件執行。在現實當中,延遲腳本並不一定會按照順序執行,也不一定會在 DOMContentLoaded 事件觸發前執行,因此最好只包含一個延遲腳本。

IE4、 Firefox 3.5、 Safari 5 和 Chrome 是最早支持 defer 屬性的瀏覽器。其他瀏覽器會忽略這個屬性,像平常一樣處理腳本。為此,把延遲腳本放在頁面底部仍然是最佳選擇。

2. async 異步腳本

HTML5 為 <script> 元素定義了 async 屬性。這個屬性與 defer 屬性類似,都用於改變處理腳本的行為。同樣與 defer 類似, async 只適用於外部腳本文件,並告訴瀏覽器立即下載文件。但與 defer 不同的是,標記為 async 的腳本並不保證按照指定它們的先后順序執行。

<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>

在以上代碼中,第二個腳本文件可能會在第一個腳本文件之前執行。因此,確保兩者之間互不依賴非常重要。指定 async 屬性的目的是不讓頁面等待兩個腳本下載和執行,從而異步加載頁面其他內容。為此,建議異步腳本不要在加載期間修改 DOM。

異步腳本一定會在頁面的 load 事件前執行,但可能會在 DOMContentLoaded 事件觸發之前或之后執行。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 應該把script標簽放在哪里 (轉)script標簽到底該放在哪里 js-script標簽放在的位置 Vue路由: 標簽應該放在哪里 js