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

Question

js代码

window.onload=function(){
   console.log(2)
}
console.log(1)

html 代码什么都没有，只分别：

1. 在head标签中引入上述js
2. body标签最后引入
3. html标签外引入

然后对比三种情况的控制台。

1. 第一种情况：先1后2，不难理解 因为在head中DOM还没加载完 所以先1 等文档加载完毕输出2
2. 第二种情况：我的理解是 在最后引入js dom已经加载完毕应该先2后1 很不幸 本人测试结果还是先1后2
3. 第三种情况：将script写在整个html跟标签之外，很不幸 还是先1后2

测试了jquey的read函数 结果相同（手机打字没有图不好意思了）

Answer 1

这个问题的本质不是 DOMContentLoaded 和 load 问题。

题主可以打开 devtools，选择网络

刷新页面，可以看到：

两者是同步发生的。

言外之意是，js 阻塞了页面的载入和渲染。

那么我们再看一下性能面板：

我以第二种情况举例。

点击这个重新载入，或者使用快捷键：

我们会得到一个火焰图，由于代码很简单，所以我们很容易定位。

由于之前页面载入的时间是 2.6s，所以这次我们等待 3s 钟：

可以很清楚的看到，console.log 先执行的。

Answer 2

首先，你声明的是 js 的回调函数，js 引擎在解析时碰到回调函数会将它抛到一个事件队列中，在其它代码执行完且触发条件出现时（此处触发条件为 window.onload）才会执行。
其次，window.onload 发生在所有文件加载完之后。

Answer 3

1. jQ的.ready()对应的是DOMContentLoaded事件，而不是load；
2. .ready()的推荐写法是$(function(){});或者jQuery(function($) {});
3. script写在整个html根标签之外？这是非标准写法。