摘要:簡(jiǎn)介最近對(duì)于文檔加載方法有了新的理解,因此整理成一片簡(jiǎn)記,方便以后進(jìn)行查閱。此狀態(tài)為樹構(gòu)建完成后觸發(fā),和一樣,但在其之后觸發(fā)兼容性以上可用方法當(dāng)瀏覽器窗口,文檔或其資源將要卸載時(shí),會(huì)觸發(fā)事件。沒有賦值時(shí),該事件不做任何響應(yīng)。
簡(jiǎn)介
最近對(duì)于文檔加載方法有了新的理解,因此整理成一片簡(jiǎn)記,方便以后進(jìn)行查閱。
先來一段Html,作為我們研究的基礎(chǔ)吧。
這就夠了。
Onload方法支持的Html標(biāo)簽:
兼容性良好,所有主要瀏覽器都支持.onload()方法
說明:
1、 window.onload() 為在全部文檔加載完成后觸發(fā),包括頁(yè)面的css、js和圖片資源加載完成 2、 img.onload() 方法為在圖片加載完成后觸發(fā),因此img.onload() 要優(yōu)先于window.onload(),其次如果是從緩存中讀取到的圖片,則不會(huì)觸發(fā)該方法 3、 body.onload() 方法設(shè)置addEventListener監(jiān)聽load事件無效,會(huì)與window.onload()方法沖突,同時(shí)聲明二者,后聲明的會(huì)覆蓋前者, 其次是與window.addEventListener("load", function() {} )不會(huì)沖突,但是會(huì)影響執(zhí)行順序,先定義先執(zhí)行, 最后是我的一點(diǎn)觀點(diǎn)body.onload()實(shí)質(zhì)就是window.onload()方法Onreadystatechange方法
該方法為document對(duì)象上的方法,當(dāng)document對(duì)象上的readyState改變時(shí)觸發(fā)
document對(duì)象的readyState一共有三個(gè)值
1、 loading 文檔正在加載 2、 interactive DOM樹構(gòu)建完成,可以訪問到DOM里面的元素 3、 complete 渲染樹(Render Tree)構(gòu)建完成 4、 MDN中關(guān)于readyState只有三種狀態(tài)(本人測(cè)試也是),但也有文章指出還有另外兩種狀態(tài): 1、 uninitialized (未初始化) :對(duì)象尚未初始化 2、 loaded (加載完畢) :對(duì)象加載數(shù)據(jù)完成, (如果有同學(xué)知道為什么,請(qǐng)?jiān)谙路皆u(píng)論好嗎?謝謝)
說明
1、設(shè)置document.onreadystatechange事件,在此函數(shù)中沒有監(jiān)聽到loading狀態(tài) 2、interactive 狀態(tài)為DOM樹構(gòu)建完成,在圖片加載完成前就會(huì)觸發(fā)此狀態(tài),其次此狀態(tài)要比document對(duì)象的另外一個(gè)事件DOMContentLoaded觸發(fā)稍早 3、complete 狀態(tài)為Render Tree構(gòu)建完成,在圖片以及樣式表文件加載完成前就會(huì)觸發(fā)此狀態(tài)DOMContentLoaded方法
當(dāng)初始HTML文檔被完全加載和解析時(shí),DOMContentLoaded 事件被觸發(fā),而無需等待樣式表、圖像和子框架完成加載,即DOM樹構(gòu)建完成。
此狀態(tài)為DOM樹構(gòu)建完成后觸發(fā),和document.readyState=="interactive"一樣,但在其之后觸發(fā)
兼容性:IE9以上可用
Beforeunload方法當(dāng)瀏覽器窗口,文檔或其資源將要卸載時(shí),會(huì)觸發(fā).beforeunload()事件。
如果處理函數(shù)為Event對(duì)象的returnValue屬性賦值非空字符串,瀏覽器會(huì)彈出一個(gè)對(duì)話框,來詢問用戶是否確定要離開當(dāng)前頁(yè)面。沒有賦值時(shí),該事件不做任何響應(yīng)。
即此函數(shù)在頁(yè)面第一次加載時(shí)不會(huì)觸發(fā),當(dāng)用戶要離開此頁(yè)面或者關(guān)閉瀏覽器等操作時(shí)會(huì)被觸發(fā),為用戶將要離開時(shí)的第一個(gè)觸發(fā)的事件
兼容性良好
Unload方法當(dāng)文檔或一個(gè)子資源正在被卸載時(shí), 觸發(fā)unload事件。
說明:觸發(fā)此事件時(shí),文檔會(huì)處于一種特殊的狀態(tài)
1、所有資源仍存在 (圖片, iframe 等.) 2、對(duì)于終端用戶所有資源均不可見 3、界面交互無效 (window.open, alert, confirm 等.) 4、錯(cuò)誤不會(huì)停止卸載文檔的過程
此事件為用戶離開頁(yè)面是觸發(fā)的第三個(gè)事件,在 pagehide 事件觸發(fā)后觸發(fā)
此事件在觸發(fā)后會(huì)導(dǎo)致頁(yè)面不被bfcache緩存
兼容性良好
Pagehide方法在用戶離開頁(yè)面時(shí)觸發(fā)的第二個(gè)事件,在.beforeunload()事件觸發(fā)后觸發(fā)
此事件可以用來替換.unload()事件,使得頁(yè)面確保被緩存,要考慮瀏覽器的兼容性,
通過對(duì)監(jiān)聽此事件的event對(duì)象的persisted屬性,可以獲知頁(yè)面是否從bfcache(FF和Opera提供的往返緩存)加載的
兼容性:IE11
Pageshow方法用戶在打開頁(yè)面時(shí)就會(huì)觸發(fā)此方法,與.onload()事件類似,但是.onpageshow()在每次加載頁(yè)面時(shí)都會(huì)被觸發(fā),而window.onload()方法在緩存中加載頁(yè)面時(shí)將不會(huì)被觸發(fā)(火狐瀏覽器1.5版本)
此事件可以用來替換window.onload()事件,使得頁(yè)面加載事件確保被觸發(fā),要考慮瀏覽器的兼容性
此事件在window.onload()事件后觸發(fā)
通過對(duì)監(jiān)聽此事件的event對(duì)象的persisted屬性,可以獲知頁(yè)面是否從bfcache(FF和Opera提供的往返緩存)加載的
兼容性:IE11
備注一火狐的這篇文章提到了如何使用pagehide與pageshow方法,但是MDN中沒有關(guān)于pagehide與pageshow的詳細(xì)說明,所以大家僅作了解即可
二是在討論pagehide與pageshow方法時(shí),與這篇文章的博主一樣, 我得到的event.persisted屬性始終為false,不知是什么原因呢
這篇文章僅是個(gè)人的一篇筆記,如果你發(fā)現(xiàn)本文存在不嚴(yán)謹(jǐn)?shù)幕蛘咤e(cuò)誤的地方請(qǐng)輕噴!謝謝。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/84583.html
摘要:簡(jiǎn)介最近對(duì)于文檔加載方法有了新的理解,因此整理成一片簡(jiǎn)記,方便以后進(jìn)行查閱。此狀態(tài)為樹構(gòu)建完成后觸發(fā),和一樣,但在其之后觸發(fā)兼容性以上可用方法當(dāng)瀏覽器窗口,文檔或其資源將要卸載時(shí),會(huì)觸發(fā)事件。沒有賦值時(shí),該事件不做任何響應(yīng)。 簡(jiǎn)介 最近對(duì)于文檔加載方法有了新的理解,因此整理成一片簡(jiǎn)記,方便以后進(jìn)行查閱。先來一段Html,作為我們研究的基礎(chǔ)吧。 ...
摘要:訪問集合元素時(shí)使用局部變量對(duì)于任何類型的訪問,如果對(duì)同一個(gè)屬性或者方法訪問多次,最好使用一個(gè)局部變量對(duì)此成員進(jìn)行緩存。 三、DOM Scripting DOM編程 我們都知道對(duì)DOM操作的代價(jià)昂貴,這往往成為網(wǎng)頁(yè)應(yīng)用中的性能瓶頸。在解決這個(gè)問題之前,我們需要先知道什么是DOM,為什么他會(huì)很慢。 DOM in the Browser World 瀏覽器中的DOM DOM是一個(gè)獨(dú)立于語(yǔ)言...
摘要:訪問集合元素時(shí)使用局部變量對(duì)于任何類型的訪問,如果對(duì)同一個(gè)屬性或者方法訪問多次,最好使用一個(gè)局部變量對(duì)此成員進(jìn)行緩存。 三、DOM Scripting DOM編程 我們都知道對(duì)DOM操作的代價(jià)昂貴,這往往成為網(wǎng)頁(yè)應(yīng)用中的性能瓶頸。在解決這個(gè)問題之前,我們需要先知道什么是DOM,為什么他會(huì)很慢。 DOM in the Browser World 瀏覽器中的DOM DOM是一個(gè)獨(dú)立于語(yǔ)言...
摘要:對(duì)于直接量和局部變量的訪問性能差異微不足道,性能消耗代價(jià)高一些的是全局變量數(shù)組項(xiàng)對(duì)象成員。當(dāng)一個(gè)函數(shù)被創(chuàng)建后,作用域鏈中被放入可訪問的對(duì)象。同樣會(huì)改變作用域鏈,帶來性能問題。 早前閱讀高性能JavaScript一書所做筆記。 一、Loading and Execution 加載和運(yùn)行 從加載和運(yùn)行角度優(yōu)化,源于JavaScript運(yùn)行會(huì)阻塞UI更新,JavaScript腳本的下載、解析...
閱讀 1369·2021-10-19 11:42
閱讀 717·2021-09-22 16:04
閱讀 1867·2021-09-10 11:23
閱讀 1838·2021-07-29 14:48
閱讀 1247·2021-07-26 23:38
閱讀 2812·2019-08-30 15:54
閱讀 1024·2019-08-30 11:25
閱讀 1694·2019-08-29 17:23