window.onload 和 async 的执行顺序有区别吗,哪个先执行?

2020-05-16 07:19:58 +08:00
 lisisi
<script>
Window.onload = (function(){...})()
</script>



<script async src="IIFE.js"></script>
// IIFE..js
(function(){...})()

这两种方式的执行先后顺序,有什么区别吗?
3402 次点击
所在节点    JavaScript
8 条回复
areless
2020-05-16 07:39:34 +08:00
onload 页面图片资源加载完成后。下面的是 dom 刷出来。最大的不一样就是,获取页面图片资源长宽时,下面那种可能获取不到哦
qwertyegg
2020-05-16 09:24:18 +08:00
下面那个异步完全不知道什么时候执行吧。如果网速很慢,可能页面还没加载出来就射出去了
azcvcza
2020-05-16 10:10:08 +08:00
这个估计要翻 spec 了
serenader
2020-05-16 10:52:21 +08:00
async 先执行,然后才是 onload 。其实写个 demo 跑一下就知道了。

async 是指脚本的加载不会阻塞页面后续资源的加载,它自己的执行时间不确定。

而 onload 之所以比 async 晚执行是因为 onload 本身的定义就是在页面所有资源加载完成之后才会触发,而 async 脚本也算是页面的资源,所以 onload 是在 async 脚本之后才触发。同样的道理,defer 也是一样。
serenader
2020-05-16 10:56:56 +08:00
lihongming
2020-05-17 02:10:21 +08:00
1. js 是顺序执行的,哪一行写在前面就先执行哪一行。

2. onload 是个生命周期的钩子函数,执行这一行代码的意义是给 load 这个事件指定一个回调函数。并不是立即执行,而是 load 事件发生后才执行。

3. async 函数被执行时,可以想象为新开一个线程,如果没指定 await 的话,就会与你后面的代码并行执行。换句话说,async 函数一旦开始执行,就各玩各的了,何时执行完成你无法预期。


以上措辞并不严谨,学术派会喷死我的,但希望能帮到你更好地理解 js 的执行时机
imswing
2020-05-17 12:38:02 +08:00
@lihongming 注意审题
lihongming
2020-05-17 14:09:31 +08:00
@imswing 审了,我觉得答案是不定,所以讲讲原理,自己根据实际情况想吧。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/672233

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX