一、什么是DOM

     文档对象模型：DOM—Document Object Model,它定义了访问HTML文档对象的一套属性、方法和事件。如下图，我们可以看到有一个红色标注的Document对象。它是全局对象Windows的一个属性，其实就是我们要讲的DOM对象，它包含了anchors，forms,images,links,location等元素，通过DOM，我们可以访问到网页上的任何部分的内容。

也就是说DOM承载了Html页面的所有内容。我们平常看到网页就是DOM和加上js,css文件产生的效果。

二、DOM加载顺序

一般加载顺序如下： 

　　1. HTML被解析。

　　2. 外部脚本/样式表被加载。

　　3. 文档解析过程中内联的脚本被执行。

　　4. HTML DOM构造完成。

　　5. 图像和外部内容被加载。

　　6. 页面加载完成。 

我们在等待页面加载的时候通常使用的是Windows.onload事件，简单地给window对象的load事件附加一个在页面载入后触发的函数。这样，我们就需要等待如上的留个步骤完全加载完成后，页面才能显示完全。 

 问：

   如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间，此期间的页面显示为空白吗？ 

其实，页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。

我们可以再ready的时候就让页面先显示，图片和外部文件可以继续加载中，不至于出现浏览器加载堵塞。

三、优化浏览器加载堵塞——DOMContentLoaded

1、什么是DOMContentLoaded？ 

DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。与DOM中的onLoad事件与其相近。但onload要等到所有页面元素加载完成才会触发,包括页面上的图片等等，则必然影响用户的体验。在这种情况下firefox的DOMContentLoaded事件,
恰恰是我们需要的，因为它不需要等待图片等的完全加载就可以触发。

通过代码看一下onload 和DOMContentLoaded的效果

非IE浏览器

      传统的DOM加载:

		window.onload = function () {
			var box = document.getElementById('box');
			alert(box.innerHTML);
		};

      //ps:如果有图片，那么图片加载完毕后，方可执行onload里的内容。

现在DOM加载

		addEvent(document, 'DOMContentLoaded', function () {
			var box = document.getElementById('box');
			alert(box.innerHTML);
		});

//PS：如果有图片，先执行节点操作的内容，然后再缓缓加载图片，也就是说，当DOM树结构加载完毕后即可执行了

IE浏览器

传统的DOM加载

window.onload = function () {
var box = document.getElementById('box');

alert(box.innerHTML);
};
//PS：IE使用传统也是图片加载完毕后再执行DOM节点操作，IE678不支持DOMCotnentLoaded

IE678模拟DOMContentLoaded

document.write('<script id="ie_loaded" defer="defer" src="javascript:void(0)"></script>');
		var ie_loaded = document.getElementById('ie_loaded');
		//判断是否完全加载完毕DOM了
		ie_loaded.onreadystatechange = function () {
			if (this.readyState == 'complete') {
				var box = document.getElementById('box');
				alert(box.innerHTML);
			}
		};
	
	//PS：有效，DOM加载完毕后执行了节点操作，并且后面才加载完毕图片

但是IE浏览器有缺陷，遇到特殊标签：Iframe,这种模仿方法就会失效。为了解决IE，iframe加载问题，可以使用doScroll

	var timer = null;
	timer = setInterval(function () {
		try {
			document.documentElement.doScroll('left');
			var box = document.getElementById('box');
			alert(box.innerHTML);
		} catch (e) {};
	});

 综合以上因素，我们可以找出一种跨浏览器兼容的写法：

	function addDomLoaded(fn) {
		if (document.addEventListener) {//W3C
			addEvent(document, 'DOMContentLoaded', function () {
				fn();
				removeEvent(document, 'DOMContentLoaded', arguments.callee);
			});
		} else {
			var timer = null;
			timer = setInterval(function () {
				try {
					document.documentElement.doScroll('left');
					fn();
				} catch (e) {};
			});
		}
	}
	
	
	addDomLoaded(function () {
		var box = document.getElementById('box');
		alert(box.innerHTML);
	});

总结

    我们现在遇到的一些东西，前人已经给做好了，重在我们自己去发现问题。这些问题一层一层被暴漏，但是不管怎样都可以找到解决的方案。