onload、DOMContentLoaded与性能问题

onload、DOMContentLoaded与性能问题

onload事件 DomContentLoaded

---

 

1、onload事件

onload事件一般在所有的文档内容加载完成后触发，如果网页中图像、脚本较多，会等待这些文件都加载完毕，才会触发onload事件。实际上，这会影响用户体验，在文件未加载完毕，网页处于锁定状态。为了避免这一情况，W3C标准中有一个DOMContentLoaded事件，只要文档标记（即各种标签元素）载入完毕，就会触发，而不必等待图片下载完毕。

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

 

2、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. };

 

3、使用场景

一般在涉及对图片相关属性的操作以及操作时，为了提高用户体验，可以不必等所有图片加载完成才执行脚本，这时可以使用DOMContentLoaded事件。 
否则的话，使用onload事件