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)文章
如何使用TypeScript實現(xiàn)一個瀏覽器事件的集中管理
這篇文章主要介紹了使用TypeScript實現(xiàn)一個瀏覽器事件的集中管理,瀏覽器事件模型的主要優(yōu)點是它可以使開發(fā)人員更加靈活地處理用戶交互，并且可以通過事件委托等技術(shù)來提高性能，本文給大家講解的非常詳細，需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)文字滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了詳解微信小程序——自定義圓形進度條，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-12-12
javascript實現(xiàn)計算指定范圍內(nèi)的質(zhì)數(shù)示例
這篇文章主要介紹了javascript實現(xiàn)計算指定范圍內(nèi)的質(zhì)數(shù),涉及javascript數(shù)值計算與判斷相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了JS中常用的輸出方式(五種)的相關(guān)資料，非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-06-06
通過seajs實現(xiàn)JavaScript的模塊開發(fā)及按模塊加載
seajs實現(xiàn)了JavaScript 的 模塊開發(fā)及按模塊加載。用來解決繁瑣的js命名沖突，文件依賴等問題，其主要目的是令JavaScript開發(fā)模塊化并可以輕松愉悅進行加載。下面我們來一起深入學(xué)習(xí)下吧2019-06-06
JavaScript callback回調(diào)函數(shù)用法實例分析
這篇文章主要介紹了JavaScript callback回調(diào)函數(shù)用法,結(jié)合實例形式分析了callback回調(diào)函數(shù)的概念、功能、應(yīng)用場景及相關(guān)使用技巧,需要的朋友可以參考下2018-05-05
其實瀏覽器也自帶了返回的功能，也就是說，自帶了返回定位的功能，返回定位到具體位置有兩種方法，下面通過場景分析給大家詳細講解，需要的的朋友參考下2016-12-12
這篇文章主要介紹了JS 實現(xiàn)請求調(diào)度器的方法，幫助大家更好的理解和學(xué)習(xí)使用js，感興趣的朋友可以了解下2021-03-03
下面小編就為大家?guī)硪黄ㄟ^構(gòu)造函數(shù)實例化對象的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06