JS延遲加載的幾種方式(就是等頁面加載完成之后再加載 JS文件,延遲加載有助於提高頁面加載速度)


1. defer 屬性

HTML 4.01 為 <script>標簽定義了 defer屬性。
用途:表明腳本在執行時不會影響頁面的構造。也就是說,腳本會被延遲到整個頁面都解析完畢之后再執行。

<script> 元素中設置 defer 屬性,等於告訴瀏覽器立即下載,但延遲執行。

說明:雖然<script> 元素放在了<head>元素中,但包含的腳本將延遲瀏覽器遇到</html>標簽后再執行。

HTML5規范要求腳本按照它們出現的先后順序執行。在現實當中,延遲腳本並不一定會按照順序執行。

注意:defer屬性只適用於外部腳本文件。支持 HTML5 的實現會忽略嵌入腳本設置的 defer屬性

 

 

2. async 屬性

HTML5 為 <script>標簽定義了 async屬性。與defer屬性類似,都用於改變處理腳本的行為。同樣,只適用於外部腳本文件。
目的:不讓頁面等待腳本下載和執行,從而異步加載頁面其他內容。

異步腳本一定會在頁面 load 事件前執行。
不能保證腳本會按順序執行。

async和defer一樣,都不會阻塞其他資源下載,所以不會影響頁面的加載。

缺點:不能控制加載的順序

 

 

 

3.動態創建DOM方式

 

 

4.使用jQuery的getScript()方法

 

 

 

5.使用setTimeout延遲方法

6.讓JS最后加載

把js外部引入的文件放到頁面底部,來讓js最后引入,從而加快頁面加載速度

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM