ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端溯源:宏任务与微任务|事件循环

2021-04-16 22:05:05  阅读:139  来源: 互联网

标签:返回 读取 前端 JS 任务 循环 堆栈 溯源


强烈建议 参考:https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/?utm_source=html5weekly

每个“线程”都有自己的事件循环,因此每个Web工作者都有自己的事件循环,因此可以独立执行,而同一源上的所有窗口都可以共享事件循环,因为它们可以同步通信。事件循环持续运行,执行所有排队的任务。事件循环具有多个任务源,这些任务源保证了该源中的执行顺序(如IndexedDB之类的规范定义了它们的执行顺序),但是浏览器可以在循环的每个循环中选择从哪个源执行任务。

计划了任务,以便浏览器可以从其内部进入JavaScript / DOM领域,并确保这些操作顺序发生。

 

宏任务, 微任务, JS  堆栈 ,

 

输出顺序日志: 宏任务 读取 开始运行脚本-》遇到setTimeOut 加入JS堆栈回调任务排队-》从上到下接着读取脚本-》遇到PROMISE.then 作为 微任务回调排队, 代码压入JS堆栈 -> 关键点: 并不是直接返回 而是 接着从上到下读取脚本->直至读取JS完毕->开始处理微任务-》第一个PROMISE.THEN 返回 , 返回会被 压入JS堆栈-》返回执行完毕 -》微任务重新读取函数 第二个PROMISE.THEN -》函数体压入JS堆栈 并准备执行, 返回被压入JS堆栈-》返回结束 ,浏览器更新渲染。

判别:

宏任务:setTimeOut ,promise 直接resolve 的函数 都会安排在 宏任务排队

微任务:mutation 及action 都安排在微任务队列。

 

标签:返回,读取,前端,JS,任务,循环,堆栈,溯源
来源: https://www.cnblogs.com/xred/p/14668845.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有