js的延遲加載方法(js的延遲加載有助于提高頁(yè)面的加載速度)
1.defer屬性
<script src="file.js" defer> </script>
瀏覽器會(huì)并行下載 file.js和其它有 defer 屬性的script，而不會(huì)阻塞頁(yè)面后續(xù)處理怠苔。defer屬性在IE 4.0中就實(shí)現(xiàn)了慨默，超過(guò)10多年了荤崇！Firefox從 3.5 開(kāi)始支持defer屬性 征候。
注：所有的defer腳本保證是按順序依次執(zhí)行的。
2.async屬性
<script src="file.js" async> </script>
async屬性是HTML5新增的肮柜。作用和defer類(lèi)似棍弄，但是它將在下載后盡快執(zhí)行望薄，不能保證腳本會(huì)按順序執(zhí)行。它們將在onload 事件之前完成呼畸。
Firefox3.6痕支、Opera 10.5、IE 9和 最新的Chrome 和 Safari 都支持 async 屬性蛮原∥孕耄可以同時(shí)使用 async 和 defer，這樣IE 4之后的所有IE 都支持異步加載儒陨。
3.動(dòng)態(tài)創(chuàng)建DOM方式 (使用的最多)
PS： 這里插一句addEventListener()?也是郴ㄋ唬考的知識(shí)點(diǎn)之一：
??? addEventListener() 方法用于向指定元素添加事件句柄。
??? 使用 removeEventListener() 方法來(lái)移除 addEventListener() 方法添加的事件句柄蹦漠。
語(yǔ)法：element.addEventListener(event, function, useCapture)
??????? event （必須）字符串椭员，指定事件名。注意: 不要使用 “on” 前綴津辩。 例如拆撼，使用 “click” ,而不是使用 “onclick”容劳。
??????? function （必須）指定要事件觸發(fā)時(shí)執(zhí)行的函數(shù)喘沿。當(dāng)事件對(duì)象會(huì)作為第一個(gè)參數(shù)傳入函數(shù)。 事件對(duì)象的類(lèi)型取決于特定的事件竭贩。例如蚜印， “click” 事件屬于 MouseEvent(鼠標(biāo)事件) 對(duì)象。
??????? useCapture （可選）布爾值留量，指定事件是否在捕獲或冒泡階段執(zhí)行窄赋∮炊【true：事件句柄在捕獲階段執(zhí)行； false：默認(rèn)忆绰，事件句柄在冒泡階段執(zhí)行】
效果如圖：
4.使用Jquery的getScript()方法
從源碼可以看出浩峡，這個(gè)方法最后還是調(diào)用了jQuery.ajax()來(lái)請(qǐng)求了js文件的。
5.使用setTimeout延遲方法的加載時(shí)間
延遲加載js代碼错敢，給網(wǎng)頁(yè)加載留出時(shí)間
6.讓js最后加載
例如引入外部js腳本文件時(shí)翰灾，如果放入html的head中,則頁(yè)面加載前該js腳本就會(huì)被加載入頁(yè)面，而放入body中稚茅，則會(huì)按照頁(yè)面從上倒下的加載順序來(lái)運(yùn)行javascript的代碼~~~ 所以我們可以把js外部引入的文件放到頁(yè)面底部纸淮，來(lái)讓js最后引入，從而加快頁(yè)面加載速度亚享。
上述方法5,6也會(huì)偶爾讓你收到Google頁(yè)面速度測(cè)試工具的“延遲加載javascript”警告咽块。所以這里的解決方案將是來(lái)自Google幫助頁(yè)面的推薦方案。
這段代碼意思是等到整個(gè)文檔加載完后欺税，再加載外部文件“defer.js”侈沪。
使用此段代碼的步驟：
? ? 1.復(fù)制上面代碼
? ? 2.粘貼代碼到HTML的標(biāo)簽前 (靠近HTML文件底部)
? ? 3.修改“defer.js”為你的外部JS文件名
? ? 4.確保你文件路徑是正確的。例如：如果你僅輸入“defer.js”晚凿，那么“defer.js”文件一定與HTML文件在同一文件夾下峭竣。
注意：這段代碼直到文檔加載完才會(huì)加載指定的外部js文件。因此晃虫，不應(yīng)該把那些頁(yè)面正常加載需要依賴(lài)的javascript代碼放在這里皆撩。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁(yè)面需要而立即加載的javascript代碼哲银，另外一組是在頁(yè)面加載后進(jìn)行操作的javascript代碼(例如添加click事件或其他東西)扛吞。這些需等到頁(yè)面加載后再執(zhí)行的JavaScript代碼，應(yīng)放在一個(gè)外部文件荆责，然后再引進(jìn)來(lái)滥比。
