javascript
JavaScript 判断 DOM 何时加载完毕
處理HTML DOM文檔存在一個(gè)難題是,JavaScript可以在DOM完全加載之前執(zhí)行,這會(huì)給你的代碼引發(fā)不少的潛在問(wèn)題。瀏覽器的渲染和操作順序大致如下列表:
- HTML解析完畢
- 外部腳本和樣式表加載完畢
- 腳本在文檔內(nèi)解析并執(zhí)行
- HTML DOM完全構(gòu)造起來(lái)
- 圖片和外部?jī)?nèi)容加載
- 網(wǎng)頁(yè)完成加載
?
在網(wǎng)頁(yè)頭部并且從外部文件加載的腳本會(huì)在HTML真正構(gòu)造之前執(zhí)行。如前所述,這是個(gè)至關(guān)重要的問(wèn)題,因?yàn)檫@兩處執(zhí)行的腳本并不能訪問(wèn)還不存在的DOM。幸好,我們還有若干的補(bǔ)救方法。
?
目前,最常用的級(jí)數(shù)是完全等待整個(gè)頁(yè)面加載完畢才執(zhí)行DOM操作。這種技術(shù)只需利用window對(duì)象的load事件來(lái)綁定一個(gè)函數(shù),頁(yè)面加載完畢即可觸發(fā)。
?
addEvent(window, "load", function(){// do something });
最簡(jiǎn)單的操作卻是最慢的。在加載過(guò)程的順序列表中,你會(huì)注意到頁(yè)面的加載完畢與否完全被最后一步所掌控。這就是說(shuō),如果頁(yè)面有很多的圖片、視頻等,用戶可能得登上一段時(shí)間JavaScript才執(zhí)行。
另一種級(jí)數(shù)可用以監(jiān)聽(tīng) DOM 加載狀態(tài),可能是最復(fù)雜的(從實(shí)現(xiàn)角度來(lái)看),但也是最有效地。
這項(xiàng)技術(shù)在不堵塞瀏覽器加載的情況下盡可能快地檢查 HTML DOM文檔是否已經(jīng)加載了執(zhí)行所必須得屬性。以下是檢查HTML DOM是否可用的幾個(gè)要點(diǎn):
使用這些檢查就足夠判斷DOM是否可用了(“足夠”在此表示可能會(huì)有一定毫秒級(jí)的時(shí)間差)。這個(gè)方法幾乎沒(méi)有瑕疵。單獨(dú)使用前述檢查,腳本應(yīng)該可以在現(xiàn)代瀏覽器中運(yùn)行得相對(duì)良好。但是,最近(2008年?)Firefox實(shí)現(xiàn)了緩存改進(jìn),使得window加載事件實(shí)際上可以在腳本能檢查到DOM是否可用之前觸發(fā)。為了能發(fā)揮這個(gè)優(yōu)勢(shì),我同時(shí)為window加載事件附加檢查,以期能獲得更快的執(zhí)行速度。
最后,domReady函數(shù)集合了所有需要在DOM可用時(shí)就執(zhí)行的函數(shù)的引用。一旦DOM被認(rèn)為是可用的,就調(diào)用這些引用并按順序一一執(zhí)行。
?
現(xiàn)在我們來(lái)看看在HTML文檔中是如何執(zhí)行的。假設(shè)已經(jīng)將domReady函數(shù)寫(xiě)到一個(gè)名為domready.js的外部文件中
<html><head><title> Testing DOM Loading</title><script src="domready.js"></script><script>domReady(function(){alert("The DOM is loaded!");// do something });</script></head><body><h1>Testing DOM Loading</h1><!-- 這里是大量的HTML --></body> </html>總結(jié)
以上是生活随笔為你收集整理的JavaScript 判断 DOM 何时加载完毕的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: JS getAttribute和setA
- 下一篇: js中innerText,innerHT