JavaScript DOMContentLoaded事件案例詳解
DOMContentLoaded 事件
字面上看,它會在dom加載完成后觸發(fā)。
與window.onload事件非常相似,但有一定區(qū)別:
- DOMContentLoaded 事件是在文檔完全加載和解析之后觸發(fā);
- window.onload 事件不但文檔完全加載和解析完畢,相關(guān)資源都要加載完畢,比如圖片和CSS文件等;
下一個問題是什么時候dom加載完畢,這得從瀏覽器渲染說起,瀏覽器顯示網(wǎng)頁的過程可以做如下描述:
1. 請求得到html文檔,根據(jù)文檔請求更多的img,css及其它資源文件;
2. 解析文檔得到兩個東西,dom tree and cssom tree;
3. 依據(jù)上面兩個tree生成render tree;
4. 根據(jù)render tree進行布局并在其中繪制相關(guān)元素。
以webkit為例,它的渲染流程如下:
DOMContentLoaded事件觸發(fā)時機:
在DOM后,RENDERtree之前。
JavaScript加載和執(zhí)行會遲滯DOMContentLoaded 事件的觸發(fā)。
JavaScript要等待CSS渲染完成再去加載和執(zhí)行,因為瀏覽器無法確定JavaScript是否需要DOM元素信息。
為確保JavaScript獲取的是最新的信息,會首先加載和渲染CSS。
參考文檔:
http://www.softwhy.com/article-9783-1.html
https://www.cnblogs.com/CandyManPing/p/6635008.html
https://www.cnblogs.com/caizhenbo/p/6679478.html
到此這篇關(guān)于JavaScript DOMContentLoaded事件案例詳解的文章就介紹到這了,更多相關(guān)JavaScript DOMContentLoaded事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript中DOM操作常用事件總結(jié)
- JavaScript WebAPI、DOM、事件和操作元素實例詳解
- 詳解用js代碼觸發(fā)dom事件的實現(xiàn)方案
- JS前端知識點總結(jié)之頁面加載事件,數(shù)組操作,DOM節(jié)點操作,循環(huán)和分支
- JS實現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法
- js中DOM事件綁定分析
- JS對象與JSON互轉(zhuǎn)換、New Function()、 forEach()、DOM事件流等js開發(fā)基礎(chǔ)小結(jié)
- js學(xué)習(xí)總結(jié)之dom2級事件基礎(chǔ)知識詳解
- JS實現(xiàn)動態(tài)添加DOM節(jié)點和事件的方法示例
- JavaScript DOM操作與事件處理方法
相關(guān)文章
layui之數(shù)據(jù)表格--與后臺交互獲取數(shù)據(jù)的方法
今天小編就為大家分享一篇layui之數(shù)據(jù)表格--與后臺交互獲取數(shù)據(jù)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09js動態(tài)添加onload、onresize、onscroll事件(另類方法)
window 的 onload、onresize、onscroll 事件,跟其他的事件不一樣,它不能用 attachEvent 或 addEventListener 來添加于是本人想了一些另類的方法,需要了解的朋友可以參考下2012-12-12