JS的时间线

JS程序分两阶段

脚本执行阶段 —— 事件处理阶段

1.web浏览器创建Document对象，并开始解析Web页面，解析HTML元素和它们的文本内容后添加ELement对象和Text节点到文档中。在这个阶段document.readyState属性的值是"loding"

2.当HTML解析器遇到没有async和defer属性的<script>元素时，它把这些元素添加到文档中，然后执行行内和外部脚本。这些脚本会同步执行，并且在脚本下载(如果需要)和执行时解析器会暂停。这样脚本就可以用document.write()来把文本插入到输入流中。解析器恢复时这些文本会成为文档的一部分。同步脚步经常简单定义函数和注册后面使用的注册事件处理程序，但它们可以遍历和操作文档树，因为在它们执行时已经存在了。同步脚本可以看到它自己的<script>元素和它之前的文档内容。

3.当解析器遇到设置了async属性的<script>元素时，它开始下载脚本文本，并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器没有停下卡等它下载。异步脚本禁止使用document.write()方法。它们可以看到自己的<script>元素和它之前的所有文档元素,并且可能或者干脆不可能访问其他的文档内容。

4.当文档完成解析，document.readyState属性值变为"interactive"

5.所有的defer属性的脚本，会按它们在文档里的出现顺序执行。异步脚本可能也会在这个时间执行。延迟脚本能访问完整的文档树，禁止使用document.write()方法。

6.浏览器在Document对象上触发DOMContentLoaded事件。这标志着程序执行从同步脚本执行阶段转换到异步事件驱动阶段。但要注意。这时可能还有异步脚本没有执行完成。

7.这时，文档已经完全解析完成，但是浏览器可能还在等待其他内容载入。当所有这些内容完成载入时，并且所有异步脚本完成载入和执行，document.readyState属性变为"complete",web浏览器触发window对象上的load事件。

8.从此刻起，会调用异步事件，以异步响应用户输入事件、网络事件、计时器过期等。

window.onload和$(document).ready()

onload当文档解析完成，并且所有的内容包括图片都载入了，所有的异步脚本都完成载入和执行了,才会触发。当有大图片要下载时则会很慢

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行

eg：

这样所写的页面逻辑都会在load事件触发之后才执行。

widnow.onload没有简化写法

$(document).ready(function(){})可以简写成$(function(){});

注意：

load ready 只会在文档载入阶段触发，之后改变DOM树结构并不会触发。

JQuery的

所以ready比onload先执行

用JQuery下面的方法

小编是一个有着5年工作经验的前端工程师，关于web前端有一个完整学习web前端的路线，学习材料和工具。需要的伙伴可以私信我，发送“前端”就可以获取领取地址，免费送给大家。对于学习web前端有任何问题（学习方法，学习效率，如何就业）都可以问我。希望你也能凭自己的努力，成为下一个优秀的程序员！

此时load函数是可以写多个的

load事件是每个元素都有的，所以可以给较大的资源文件绑定load事件,在该元素完全加载完之后就会触发onload

$('selector').load(function(){});