wordpress 導(dǎo)入失敗,wordpress 數(shù)據(jù)庫(kù)優(yōu)化,佛山公司關(guān)鍵詞網(wǎng)絡(luò)推廣,鄭州網(wǎng)站開發(fā)顧問(wèn)一文講清楚HTML頁(yè)面生命周期#xff0c;DOMContentoaded/load/unload/beforeunload等document和window的狀態(tài) 作為一個(gè)前端開發(fā)者#xff0c;當(dāng)我們?cè)陂_發(fā)一個(gè)web應(yīng)用時(shí)#xff0c;我們?cè)撉逦闹酪患?xff0c;那就是無(wú)論你使用沒(méi)使用框架#xff0c;vue也好#x…一文講清楚HTML頁(yè)面生命周期DOMContentoaded/load/unload/beforeunload等document和window的狀態(tài)作為一個(gè)前端開發(fā)者當(dāng)我們?cè)陂_發(fā)一個(gè)web應(yīng)用時(shí)我們?cè)撉逦闹酪患履蔷褪菬o(wú)論你使用沒(méi)使用框架vue也好react也罷或者原生開發(fā)最終的本質(zhì)目的都是在解決一個(gè)window窗口頁(yè)面下渲染document元素的問(wèn)題只不過(guò)是思路不盡相同而已那我們就需要明白window和docuemnt的關(guān)系window是什么是窗口是頁(yè)面我們點(diǎn)擊打開一個(gè)新的標(biāo)簽就是一個(gè)窗口一個(gè)window一個(gè)頁(yè)面就有一個(gè)window對(duì)象被創(chuàng)建document是什么是文檔什么文檔內(nèi)容文檔什么內(nèi)容HTML內(nèi)容也就是說(shuō)document表示這個(gè)頁(yè)面窗口下的html文檔內(nèi)容那就很清晰了document是window的一個(gè)子集因?yàn)橐粋€(gè)窗口不僅包含html內(nèi)容還要包括地址欄也就是location還要包含瀏覽歷史記錄history設(shè)備信息navigator屏幕信息screen等等大概是這樣window ├── document頁(yè)面內(nèi)容DOM樹 ├── location地址欄信息 ├── history瀏覽歷史記錄 ├── navigator瀏覽器設(shè)備信息 ├── screen屏幕顯示信息 ├──alert()/confirm()彈窗方法 ├──setTimeout()/setInterval()定時(shí)器 └── 全局變量/全局函數(shù)默認(rèn)掛載到window上所以window和document的生命周期總體來(lái)說(shuō)肯定是window激活-document激活-document卸載-window卸載那再來(lái)說(shuō)我們需要關(guān)注什么因?yàn)槲覀冏罱K的目的是把html元素渲染到頁(yè)面上所以我們要考慮什么時(shí)候開始渲染什么時(shí)候渲染完成等等以便我們?cè)诟鱾€(gè)階段做出業(yè)務(wù)邏輯所以需要一個(gè)狀態(tài)來(lái)標(biāo)記html內(nèi)容當(dāng)前的渲染狀態(tài)這個(gè)變量就是readyState他有三個(gè)狀態(tài)loading-interactive-complete當(dāng)window被打開document開始加載至文檔完全被解析完成這個(gè)階段document屬于loading階段document被解析完成至文檔和資源全部被加載完這個(gè)階段document屬于iteracive階段document所有資源被加載完之后就到了complete階段那我們?cè)趺传@取當(dāng)前的文檔轉(zhuǎn)態(tài)呢可以通過(guò)document.reayState來(lái)獲取同時(shí)我們可以監(jiān)聽readyState的狀態(tài)變化來(lái)進(jìn)行業(yè)務(wù)處理通過(guò)document.addEventListener(‘readystatechange’,(){})來(lái)監(jiān)聽不同的狀態(tài)變化上面我們講了document在不同階段的三種狀態(tài)對(duì)于但一個(gè)頁(yè)面來(lái)講document只是一部分就像我們之前說(shuō)的他只是window的一部分我們縱觀全局除了關(guān)心html有沒(méi)有被渲染我們還有考慮頁(yè)面是否被關(guān)閉等所以就需要有宏觀的事件來(lái)被回調(diào)以便于我們知道當(dāng)前頁(yè)面的整體狀態(tài)這個(gè)就是頁(yè)面的事件首先對(duì)于頁(yè)面來(lái)講HTML開始加載并解析構(gòu)建DOM樹當(dāng)DOM樹構(gòu)建完成樣式資源可能還未加載完成這時(shí)候會(huì)觸發(fā)DOMContentLoaded事件表示瀏覽器已完成加載HTML并構(gòu)建DOM樹。他跟interactive幾乎同時(shí)發(fā)生但是interactive在DOMContentLoaded之前完成為什么還是我們說(shuō)的interactive是針對(duì)document的是子集DOMContentLoaded是宏觀的所以先子集完成再宏觀完成。我們可以用document.addEventListener(‘DOMContentLoaded’,(){})來(lái)進(jìn)行捕獲其次img和樣式資源等開始加載并且全部加載完成這時(shí)候會(huì)觸發(fā)window的load事件他跟conmplete幾乎同時(shí)發(fā)生但是complete在前window的load事件在后理由同上。我們可以用window.οnlοad(){}來(lái)進(jìn)行捕獲之后如果頁(yè)面有可能會(huì)被關(guān)閉當(dāng)然從業(yè)務(wù)場(chǎng)景來(lái)說(shuō)兩種可能第一種是用戶點(diǎn)擊關(guān)閉后直接關(guān)閉當(dāng)前頁(yè)面沒(méi)有啥需要保存的東西第二種情況頁(yè)面上有用戶輸入的東西尚未提交保存如果關(guān)閉可能造成數(shù)據(jù)丟失那我們就需要對(duì)用戶的關(guān)閉操作進(jìn)行攔截并提示用戶是否最終選擇關(guān)閉這就需要劫持關(guān)閉事件所以頁(yè)面關(guān)閉就會(huì)有兩個(gè)事件關(guān)閉和準(zhǔn)備關(guān)閉關(guān)閉就是關(guān)閉了很好理解。準(zhǔn)備關(guān)閉就是我們捕獲到用戶要關(guān)閉但是先阻止關(guān)閉提示用戶二次選擇。所以就會(huì)有beforeunload事件用戶準(zhǔn)備離開我們檢查數(shù)據(jù)是否進(jìn)行了保存然后二次詢問(wèn)是否真的需要離開我們可以使用window.beforeunload(){}來(lái)進(jìn)行捕獲最后unload事件用戶幾乎離開了為什么幾乎離開了因?yàn)槲覀冞€可以做一些操作比如發(fā)送數(shù)據(jù)統(tǒng)計(jì)這就是我們前端埋點(diǎn)的常見實(shí)現(xiàn)方式在unload事件處罰時(shí)通過(guò)navigattor.sendBeacon來(lái)發(fā)送數(shù)據(jù)給服務(wù)端