js延遲加載的6種方式實(shí)例總結(jié)
1. defer 屬性
HTML 4.01 為<script>標(biāo)簽定義了defer屬性。標(biāo)簽定義了defer屬性元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行標(biāo)簽定義了defer屬性。
用途：表明腳本在執(zhí)行時(shí)不會(huì)影響頁面的構(gòu)造。也就是說，腳本會(huì)被延遲到整個(gè)頁面都解析完畢之后再執(zhí)行。
在<script>元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行。
說明：雖然<script>元素放在了<head>元素中，但包含的腳本將延遲瀏覽器遇到</html>標(biāo)簽后再執(zhí)行。
HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行。在現(xiàn)實(shí)當(dāng)中，延遲腳本并不一定會(huì)按照順序執(zhí)行。
defer屬性只適用于外部腳本文件。支持 HTML5 的實(shí)現(xiàn)會(huì)忽略嵌入腳本設(shè)置的defer屬性。
2. async 屬性
HTML5 為<script>標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。
目的：不讓頁面等待腳本下載和執(zhí)行，從而異步加載頁面其他內(nèi)容。
異步腳本一定會(huì)在頁面 load 事件前執(zhí)行。
不能保證腳本會(huì)按順序執(zhí)行。
async和defer一樣，都不會(huì)阻塞其他資源下載，所以不會(huì)影響頁面的加載。
缺點(diǎn)：不能控制加載的順序
3.動(dòng)態(tài)創(chuàng)建DOM方式
4.使用jQuery的getScript()方法
5.使用setTimeout延遲方法的加載時(shí)間
延遲加載js代碼，給網(wǎng)頁加載留出更多時(shí)間
6.讓JS最后加載
把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度
例如引入外部js腳本文件時(shí)，如果放入html的head中,則頁面加載前該js腳本就會(huì)被加載入頁面，而放入body中，則會(huì)按照頁面從上倒下的加載順序來運(yùn)行JavaScript的代碼
所以我們可以把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度
3.上述方法2也會(huì)偶爾讓你收到Google頁面速度測試工具的“延遲加載javascript”警告。所以這里的解決方案將是來自Google幫助頁面的推薦方案。
這段代碼意思等到整個(gè)文檔加載完后，再加載外部文件“defer.js”。
使用此段代碼的步驟：
1）.復(fù)制上面代碼
2）.粘貼代碼到HTML的標(biāo)簽前 (靠近HTML文件底部)
3）.修改“defer.js”為你的外部JS文件名
4）.確保你文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。
注意：
這段代碼直到文檔加載完才會(huì)加載指定的外部js文件。因此，不應(yīng)該把那些頁面正常加載需要依賴的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁面需要而立即加載的javascript代碼，另外一組是在頁面加載后進(jìn)行操作的javascript代碼(例如添加click事件或其他東西)。這些需等到頁面加載后再執(zhí)行的JavaScript代碼，應(yīng)放在一個(gè)外部文件，然后再引進(jìn)來。
在元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行。
總結(jié)
到此這篇關(guān)于js延遲加載的6種方式的文章就介紹到這了,更多相關(guān)js延遲加載方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了javascript如何寫熱點(diǎn)圖，熱點(diǎn)圖是以點(diǎn)的形式展示，通過補(bǔ)全周邊變化顏色也會(huì)相應(yīng)的調(diào)整漸變，對(duì)熱點(diǎn)圖感興趣的朋友可以參考一下2015-12-12
js中判斷變量類型函數(shù)typeof的用法總結(jié)
下面小編就為大家?guī)硪黄猨s中判斷變量類型函數(shù)typeof的用法總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了js隨機(jī)生成網(wǎng)頁背景顏色的方法,涉及javascript操作背景色的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
嚴(yán)格模式就是使JS編碼更加規(guī)范化的模式,消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為。下面通過代碼相結(jié)合的形式給大家介紹js中的嚴(yán)格模式，感興趣的朋友一起看看吧2018-06-06
小程序?qū)崿F(xiàn)瀑布流動(dòng)態(tài)加載列表
用瀑布流的方式在網(wǎng)頁上插入圖片的簡單實(shí)現(xiàn)方法
小程序中使用css var變量(使js可以動(dòng)態(tài)設(shè)置css樣式屬性)
獲取本機(jī)IP地址的實(shí)例(JavaScript / Node.js)
