onload、DOMContentLoaded與性能問題

 

onload、DOMContentLoaded與性能問題

onload事件 DomContentLoaded

---

 

一、onload事件

onload事件通常在全部的文檔內容加載完成後觸發，若是網頁中圖像、腳本較多，會等待這些文件都加載完畢，纔會觸發onload事件。實際上，這會影響用戶體驗，在文件未加載完畢，網頁處於鎖定狀態。爲了不這一狀況，W3C標準中有一個DOMContentLoaded事件，只要文檔標記（即各類標籤元素）載入完畢，就會觸發，而沒必要等待圖片下載完畢。

jQuery使用者，你可能會常常使用$(document).ready();或者$(function(){}) 這都是使用了DOMContentLoaded事件

 

二、DOMContentLoaded

該事件並非全部瀏覽器都支持，ff opera chrome支持，其餘暫不支持。 
/** IE中替代方案 **/ 
在文檔最後附加一個腳本，經過這個腳本載入完成的標誌來判斷是否全部文檔標記加載完畢。具體地：

 

1. document.write("<script src='javascript:void(0)' id='ie_load' defer> </script>");
2. var script=document.getElementById('ie_load');
3. script.onreadystatechange=function (){
4. if(this.readyState=='complete'){
5. //執行load事件
6. ........
7. }
8. };

 

三、使用場景

通常在涉及對圖片相關屬性的操做以及操做時，爲了提升用戶體驗，能夠沒必要等全部圖片加載完成才執行腳本，這時可使用DOMContentLoaded事件。 
不然的話，使用onload事件