V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
lisisi
V2EX  ›  JavaScript

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

  •  
  •   lisisi · 2020-05-16 07:19:58 +08:00 via Android · 3378 次点击
    这是一个创建于 1412 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <script>
    Window.onload = (function(){...})()
    </script>



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

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

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

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

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

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


    以上措辞并不严谨,学术派会喷死我的,但希望能帮到你更好地理解 js 的执行时机
    imswing
        7
    imswing  
       2020-05-17 12:38:02 +08:00 via iPhone
    @lihongming 注意审题
    lihongming
        8
    lihongming  
       2020-05-17 14:09:31 +08:00 via iPhone
    @imswing 审了,我觉得答案是不定,所以讲讲原理,自己根据实际情况想吧。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2819 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 15:25 · PVG 23:25 · LAX 08:25 · JFK 11:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.