JavaScript DOMContentLoaded事件案例詳解
DOMContentLoaded 事件
字面上看，它會(huì)在dom加載完成后觸發(fā)。
與window.onload事件非常相似，但有一定區(qū)別：
- DOMContentLoaded 事件是在文檔完全加載和解析之后觸發(fā)；
- window.onload 事件不但文檔完全加載和解析完畢，相關(guān)資源都要加載完畢，比如圖片和CSS文件等；
下一個(gè)問(wèn)題是什么時(shí)候dom加載完畢，這得從瀏覽器渲染說(shuō)起，瀏覽器顯示網(wǎng)頁(yè)的過(guò)程可以做如下描述：
1. 請(qǐng)求得到html文檔，根據(jù)文檔請(qǐng)求更多的img,css及其它資源文件；
2. 解析文檔得到兩個(gè)東西，dom tree and cssom tree；
3. 依據(jù)上面兩個(gè)tree生成render tree；
4. 根據(jù)render tree進(jìn)行布局并在其中繪制相關(guān)元素。
以webkit為例，它的渲染流程如下：
DOMContentLoaded事件觸發(fā)時(shí)機(jī)：
在DOM后，RENDERtree之前。
JavaScript加載和執(zhí)行會(huì)遲滯DOMContentLoaded 事件的觸發(fā)。
JavaScript要等待CSS渲染完成再去加載和執(zhí)行，因?yàn)闉g覽器無(wú)法確定JavaScript是否需要DOM元素信息。
為確保JavaScript獲取的是最新的信息，會(huì)首先加載和渲染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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- JavaScript中DOM操作常用事件總結(jié)
- JavaScript WebAPI、DOM、事件和操作元素實(shí)例詳解
- 詳解用js代碼觸發(fā)dom事件的實(shí)現(xiàn)方案
- JS前端知識(shí)點(diǎn)總結(jié)之頁(yè)面加載事件，數(shù)組操作，DOM節(jié)點(diǎn)操作，循環(huán)和分支
- JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法
- js中DOM事件綁定分析
- JS對(duì)象與JSON互轉(zhuǎn)換、New Function()、 forEach()、DOM事件流等js開(kāi)發(fā)基礎(chǔ)小結(jié)
- js學(xué)習(xí)總結(jié)之dom2級(jí)事件基礎(chǔ)知識(shí)詳解
- JS實(shí)現(xiàn)動(dòng)態(tài)添加DOM節(jié)點(diǎn)和事件的方法示例
- JavaScript DOM操作與事件處理方法
相關(guān)文章
這篇文章主要介紹了ES6 Generator基本使用方法,結(jié)合實(shí)例形式分析了ES6 Generator基本功能、使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-06-06
JS中浮點(diǎn)數(shù)精度問(wèn)題的分析與解決方法
在js中我們有時(shí)會(huì)遇到計(jì)算,通過(guò)加減乘除處理某些業(yè)務(wù),那么這時(shí)候如果不做任何處理,就會(huì)出現(xiàn)如下典型的精度丟失問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于JS中浮點(diǎn)數(shù)精度問(wèn)題的分析與解決方法,需要的朋友可以參考下2022-04-04
刷新頁(yè)面后讓控制臺(tái)的js代碼繼續(xù)執(zhí)行
這篇文章主要介紹了刷新頁(yè)面后讓控制臺(tái)的js代碼繼續(xù)執(zhí)行，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
es6中new.target的作用和使用場(chǎng)景簡(jiǎn)單示例分析
這篇文章主要介紹了es6中new.target的作用和使用場(chǎng)景,結(jié)合簡(jiǎn)單示例形式分析了es6中new.target的基本功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
layui之?dāng)?shù)據(jù)表格--與后臺(tái)交互獲取數(shù)據(jù)的方法
今天小編就為大家分享一篇layui之?dāng)?shù)據(jù)表格--與后臺(tái)交互獲取數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
微信小程序三級(jí)聯(lián)動(dòng)選擇器使用方法
這篇文章主要為大家詳細(xì)介紹了微信小程序三級(jí)聯(lián)動(dòng)選擇器使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02
v3-admin-vite 整合pont的詳細(xì)過(guò)程
這篇文章主要介紹了v3-admin-vite 整合pont的詳細(xì)過(guò)程,目前后端的Admin模板使用的是v3-admin-vite,需要整合pont接口,方便前后端統(tǒng)一一體化開(kāi)發(fā),本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
js動(dòng)態(tài)添加onload、onresize、onscroll事件(另類方法)
window 的 onload、onresize、onscroll 事件，跟其他的事件不一樣，它不能用 attachEvent 或 addEventListener 來(lái)添加于是本人想了一些另類的方法，需要了解的朋友可以參考下2012-12-12
這篇文章主要給大家介紹了如何通過(guò)一篇文章弄懂ECMAScript中操作符的相關(guān)資料,其中包括一元操作符、布爾操作符、乘性操作符、加性操作符、關(guān)系操作符、相等操作符、條件操作符、賦值操作符 以及逗號(hào)操作符,需要的朋友可以參考下2021-07-07
JS運(yùn)動(dòng)框架之分享側(cè)邊欄動(dòng)畫(huà)實(shí)例
這篇文章主要介紹了JS運(yùn)動(dòng)框架之分享側(cè)邊欄動(dòng)畫(huà),實(shí)例分析了javascript操作div及css的技巧,需要的朋友可以參考下2015-03-03