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事件