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