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