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

05-07 15:38