這是一個面試經常問到的問題:js的延遲加載方法 (js的延遲加載有助于提高頁面的加載速度)
主要考察對程序的性能方面是否有研究,程序的性能是一個項目不斷地追求的,通常也是項目完成后需要長期做的一件事情,像騰訊QQ依然對程序的性能不斷地做優化,讓用戶的體驗更好,性能優化的核心思想就是快,可以預先準備數據(如緩存的使用),可以按需獲取,可以分段獲取等都是常見的優化手段。
解題思路 :
1.defer屬性
<script src="file.js" defer> </script>
瀏覽器會并行下載 file.js和其它有 defer 屬性的script,而不會阻塞頁面后續處理。defer屬性在IE 4.0中就實現了,超過10多年了!Firefox從 3.5 開始支持defer屬性 。
注:所有的defer腳本保證是按順序依次執行的。
2.async屬性
<script src="file.js" async> </script>
async屬性是HTML5新增的。作用和defer類似,但是它將在下載后盡快執行,不能保證腳本會按順序執行。它們將在onload 事件之前完成。
Firefox3.6、Opera 10.5、IE 9和 最新的Chrome 和 Safari 都支持 async 屬性。可以同時使用 async 和 defer,這樣IE 4之后的所有IE 都支持異步加載。
3.動態創建DOM方式 (使用的最多)
<script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) //添加監聽事件 window.addEventListener("load",downloadJSAtOnload, false); //事件在冒泡階段執行 else if (window.attachEvent) window.attachEvent("onload",downloadJSAtOnload); else window.onload = downloadJSAtOnload;</script>PS: 這里插一句addEventListener() 也是常考的知識點之一:
addEventListener() 方法用于向指定元素添加事件句柄。
使用 removeEventListener() 方法來移除 addEventListener() 方法添加的事件句柄。
語法:element.addEventListener(event, function, useCapture)
新聞熱點
疑難解答
圖片精選