這篇文章主要介紹“js延遲加載的方式有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“js延遲加載的方式有哪些”文章能幫助大家解決問題。
HTML 4.01 為<script>標簽定義了defer屬性。標簽定義了defer屬性元素中設置defer屬性，等于告訴瀏覽器立即下載，但延遲執行標簽定義了defer屬性。
用途：表明腳本在執行時不會影響頁面的構造。也就是說，腳本會被延遲到整個頁面都解析完畢之后再執行。
在<script>元素中設置defer屬性，等于告訴瀏覽器立即下載，但延遲執行。
說明：雖然<script>元素放在了<head>元素中，但包含的腳本將延遲瀏覽器遇到</html>標簽后再執行。
HTML5規范要求腳本按照它們出現的先后順序執行。在現實當中，延遲腳本并不一定會按照順序執行。
defer屬性只適用于外部腳本文件。支持 HTML5 的實現會忽略嵌入腳本設置的defer屬性。
HTML5 為<script>標簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。
目的：不讓頁面等待腳本下載和執行，從而異步加載頁面其他內容。
異步腳本一定會在頁面 load 事件前執行。
不能保證腳本會按順序執行。
async和defer一樣，都不會阻塞其他資源下載，所以不會影響頁面的加載。
缺點：不能控制加載的順序
延遲加載js代碼，給網頁加載留出更多時間
把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度
例如引入外部js腳本文件時，如果放入html的head中,則頁面加載前該js腳本就會被加載入頁面，而放入body中，則會按照頁面從上倒下的加載順序來運行JavaScript的代碼
所以我們可以把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度
3.上述方法2也會偶爾讓你收到Google頁面速度測試工具的“延遲加載javascript”警告。所以這里的解決方案將是來自Google幫助頁面的推薦方案。
這段代碼意思等到整個文檔加載完后，再加載外部文件“defer.js”。
使用此段代碼的步驟：
1）.復制上面代碼
2）.粘貼代碼到HTML的標簽前 (靠近HTML文件底部)
3）.修改“defer.js”為你的外部JS文件名
4）.確保你文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。
注意：
這段代碼直到文檔加載完才會加載指定的外部js文件。因此，不應該把那些頁面正常加載需要依賴的javascript代碼放在這里。而應該將JavaScript代碼分成兩組。一組是因頁面需要而立即加載的javascript代碼，另外一組是在頁面加載后進行操作的javascript代碼(例如添加click事件或其他東西)。這些需等到頁面加載后再執行的JavaScript代碼，應放在一個外部文件，然后再引進來。
在元素中設置defer屬性，等于告訴瀏覽器立即下載，但延遲執行元素中設置defer屬性，等于告訴瀏覽器立即下載，但延遲執行元素中設置defer屬性，等于告訴瀏覽器立即下載，但延遲執行。
關于“js延遲加載的方式有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
