HTML文档、javascript脚本的加载与解析
1、onload事件
1.1 onload事件分类
a、文档加载完成事件（包括脚本、图片等资源都加载完），绑定方法：<body onload="doSomething()"></body> 或者 window.onload=doSomething
b、图片与脚本加载事件
var image = document.createElement('img'); image.onload = function () { $('#image').html('image loaded') } image.src = 'ww.png'; var script = document.createElement('script'); script.onload = function () { $('#script').html('script loaded') } script.src = 'test.js'; document.getElementById('container').appendChild(script); // 加载script并触发onload事件之前，必须插入到dom中
注意： 1、图片元素的src属性赋值之后就开始加载，不必等到插入dom文档中；而脚本元素必须插入到dom中之后才开始加载
2、对于图片元素，onload事件必须在src赋值之前绑定
3、样式表的加载事件特点与js脚本相同
1.2 onload事件与DOM事件
jQuery封装的dom文档加载完成方法：$(function(){})
该方法注册的事件是在dom文档元素（不包括图片）加载完成并且脚本执行完之后触发，总是位于onload之前执行
一种简单的测试方法：将img元素对图片的加载设为http处理并返回字节流的方式，在后台处理程序中添加断点，程序运行时，我们发现onload总是在img请求返回之后才会触发，而dom事件正常触发不受影响（一种说法是jQuery的dom事件是对window.onload事件的封装，该例说明这种说法是错误的）
2、js脚本的加载、解析与执行
2.1 js脚本文件在等待或加载期间，js执行线程处于阻塞还是闲置？
答：为闲置状态，示例代码如下，
lottery.js的内容：
alert('lottery.js');
在页面中的一段代码如下：
<script type="text/javascript"> setTimeout(function () { alert('blocking')}, 0); alert('script1'); </script> <script type="text/javascript" src="/js/lottery.js" onload="alert('loaded')"></script> <script type="text/javascript"> alert('script2'); </script>
实际测试的响应结果有两种（ie11与chrome）：
1、script1 -> blocking -> lottery.js -> loaded -> script2
2、script1 -> lottery.js -> loaded -> blocking -> script2
‘blocking’总是在‘script1’之后、‘script2’之前，因此其执行必定在lottery.js加载期间（ie7中script无onload事件，其执行结果除了无onload响应结果，其他与ie11相同，因此该结论同样使用于ie7）
2.2 脚本文件的onload事件与该脚本的执行关系
在2.1的示例中，‘loaded’总是在‘lottery.js’之后、‘script2’之前，因此onload处理程序紧随lottery.js之后并在下一段脚本之前执行
2.3 chrome中脚本、图片等外部资源的下载时多线程进行，但脚本的解析、执行依然是单线程
2.4 函数声明的提升（即非匿名函数）是以script标签为单位
如下代码：
<script type="text/javascript"> test() </script> <script type="text/javascript"> function test() { alert('hello') } </script>
运行时会显示test未定义，将这个标签合二为一或者上下顺序调整一下则会正常执行
2.5 js脚本可以放置在dom中间，此时可以访问到位于脚本之前加载的html元素，而无法访问之后的
具体原因：js执行与dom解析时同一线程，脚本之后的元素尚未解析，因此无法访问
2.6 js脚本对dom的操作会立即生效，因此可以在脚本中操作上一行代码插入的html元素
如下所示
$('#myDiv').html('<span></span>')
$('#myDiv span').html('my span')
代码中，第2行可以立即对第1行插入的html元素进行访问
另外需要注意的是，js对dom的操作不会立即绘制到页面，原因：绘制页面与执行js虽然是两个不同的线程，但是这两个线程是互斥的，即js当执行完成并闲置时，页面才会更新，详细可以参考JavaScript下的setTimeout(fn,0)意味着什么？
2.7 某一js文件不存在（返回404错误），页面会忽略该文件正常加载显示；某一js文件加载较慢（fiddler设断点），页面处于loading状态，等待文件加载完
