DOMContentLoaded和onload事件区别和兼容

最近学习javacript看到个DOMContentLoaded事件，找了下资料看看，为了方便记忆，把学到的记录下来，其实和它和onload是有区别的，DOMContentLoaded事件是当初始HTML文档完全被加载和解析（即所有的DOM完全解析）时触发的，无需要等待样式列表，图片，子框架完成加载，而onload事件它要等页面所有元素，包括图片 以及脚本等全部加载完成才触发，因此它比DOMContentLoaded要更晚执行。

	//onload事件 是所有标签 图片 样式 及脚本加载完成是触发
	window.onload=function(){
		var span=document.querySelector("span");
		console.log(span,"onload");
	}
	
//DOMContentLoaded事件是所有DOM元素解析完成是触发（HTML文档被完全加载和解析）
//这个要IE9以上才兼容
	document.addEventListener("DOMContentLoaded",function(){
		var span=document.querySelector("span");
		console.log(span,"DOMConetentLoaded")
})

可以看的出DOMContentLoaded要快比onload要快

	//为了兼容IE9及以下的版本
	document.attachEvent("onreadystatechange",function(){
		var span=document.querySelector("span");
		//这里要判断一下
		if(document.readyState=="complete"){
		console.log(span,"onreadystatechange")
}
})