HTML加载顺序
1. html文档中的所有dom标签会被按顺序加载包括css、js的内和外引用，在所有浏览器中都是如此。
1.1 仅有一个特殊情况：当使用document.write("js外引用地址");引用js时，IE不会去及时的加载和执行所引用的js。
解决方案：因为dom是一个标签一个标签加载，为了使后面的js代码使用到了这个外部js内容是不会找不到，可以将这段引用js的输出语句单独写在一个语句块中<script type="text/javascript">******</script>保证它一定被使用。
<span style="font-size:14px;"><script type="text/jscript">
document.write('<script type="text/javascript" src="test.js"></script>
</script></span>
1.2 也就是说html是同步加载（阻塞加载）的，前面的没有加载完，后边的不会被加载。比如：前面js写了个alert();那么你不去点这个alert的话，后面的所有元素都会在那等着被解析。
1.3 特别提醒：html文档并不十分严谨，即使你在<html></html>外面写div，js也是一样能被加载。
onload事件
1. onload是window对象的事件，它在窗口中所有东西都加载完时会被触发。记住它是窗口(window)中所有东西而不是文档(document)，意味着如果你嵌入了<iframe>或者使用了<frameset>，而其中引用了很大的图片，此事件也会等图片完全加载了才去执行。
2. 当你有需要在window中所有东西都加载完时才去执行的js代码，你可以使用它。但大部分情况下，你的js不需要也不想等window全部加载完。
为什么需要ready()?
1.1 从目的来说，使用ready()函数的原因是你需要一个jquery环境来放置JQ相关代码；JQ团队让你将JQ代码放入一个ready()函数中，他们来保证你写的JQ代码一定能找得到JQ.js中的东西。
1.2 那么我们来看看他们是怎么写这个方法的：
<span style="font-size:18px;">jQuery.ready.promise = function( obj ) {
if ( !readyList ) {
readyList = jQuery.Deferred();
// Catch cases where $(document).ready() is called after the browser event has already occurred.
// we once tried to use readyState "interactive" here, but it caused issues like the one
// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( jQuery.ready );
// Standards-based browsers support DOMContentLoaded
} else if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", completed, false );
// If IE event model is used
} else {
// Ensure firing before onload, maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", completed );
// A fallback to window.onload, that will always work
window.attachEvent( "onload", completed );
// If IE and not a frame
// continually check to see if the document is ready
var top = false;
try {
top = window.frameElement == null && document.documentElement;
} catch(e) {}
if ( top && top.doScroll ) {
(function doScrollCheck() {
if ( !jQuery.isReady ) {
try {
// Use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
top.doScroll("left");
} catch(e) {
return setTimeout( doScrollCheck, 50 );
}
// detach all dom ready events
detach();
// and execute any waiting functions
jQuery.ready();
}
})();
}
}
}
return readyList.promise( obj );
};</span>
总结其代码逻辑来说：
1. 概念：
1.1 理想的文档加载完==*.html中所有标签元素加载完 ；这包括js、css的内外引用，不(想)包括图片、iframe和frameset引用的html中所有内容..（其他没测试）。
1.2 准备好ready：JQ定义的一个时间点，不同浏览器不同，JQ非常想使他们统一到一个时间点，但事实并不是，总有些差别。
1.2 标准浏览器：IE9+、FireFox、Chrome、Opera、Safari；他们支持addEventListener事件监听和DOMContentLoaded事件。
2. 流程
a：如果是标准浏览器：先使用标准浏览器都支持的事件DOMContentLoaded来判断文档是否加载完，加载完就认为ready，执行程序员自定义的ready内容。最不济，使用window.onload来触发你的ready代码。
b：如果不是标准浏览器(就是IE低版本)：那就用onreadystatechage来判断文档是否加载完，认为ready。最不济也用window.onload。
b继续，如果是顶层（也就是说不是frame之类的），那么就认为top.doScroll("left");不抛出异常时认为ready。
3. 事实上
JQ非常想要统一其函数在所有浏览器上的体验，包括ready，但是“人生之不如意，十之八九”。
举个例子，IE11支持DOMContentLoaded，那么他会在这个事件发生后执行你的ready，但是如果有iframe和frameset的话IE11默认frame中内嵌的html文档完毕之后才会触发顶级文档的DOMContentLoaded。而Chrome测试就是不等frame中内嵌的html文档加载就会触发。还是不一样。
4. 所以
写JQ方法，请把内容写在ready()中(大多数情况下合适，也可能不合适)，JQ团队尽量保证所有浏览器的统一体验。如有不测风云，造成代码错误，请明白我上面说的这些逻辑，然后请自行调试…
