js在浏览器中的执行机制
前言
单线程语言
js是一门单线程语言,js设计之初就是为了处理浏览器网页的交互,比如DOM操作、UI动画等。如果js是多线程的,那么两个线程同时对一个DOM元素进行了相互冲突的操作,那么浏览器的解析器是无法执行的。
为什么需要异步?
单线程语言在处理同步任务的时候经常会遇到很多耗时操作,比如接口请求,定时执行等,那么我们的代码在执行的过程中会一直等待这些操作。js提供了异步的方式处理这些问题。
异步的实现方案
js实现异步的两个重要概念:eventloop事件循环,任务队列(事件队列),任务队列又分为两种:微任务和宏任务。
- 微任务(micro-task):process.nextTick(node),Promise.then,Promise.catch,Promise.finally,MutationObserver
- 宏任务:整体script,setTimeout,setInterval,setImmediate,I/O,UI rendering
js代码的执行过程
- 整体代码执行一遍,既执行一个宏任务,执行过程中遇到微任务和宏任务时分别将他们添加到微任务队列和宏任务队列;
- 整体代码执行完成后,也就是主线程为空闲时,会立即依次执行微任务队列中的任务,执行过程中又可能遇到微任务和宏任务,分别添加至微任务队列和宏任务队列;
- 上面的过程直到微任务队列为空时,这时会根据事件循环机制获取第一个达到执行条件的宏任务,并执行,此后与整体代码执行过程完全一致。
- 循环上面的执行过程,直到微任务队列和宏任务队列为空位置,主线程结束。
Promise微任务何时添加到微任务队列?
- 如果Promise的状态为pending时,成功和失败的回调会存放在[[PromiseFullReactions]]和[[PromiseRejectReactions]]中,此时不能添加到微任务队列。
- 当Promise的状态为非pending时,回调被添加至微任务队列。
promise链式调用中需要注意的问题
- 链式调用中,只有当前一个then的回调执行完成之后,紧跟的then中的回调才会被添加到微任务队列。
- 同一个Promise对的每一个链式调用的开端会首先一次进入微任务队列
2 声望
2 粉丝
推荐阅读
正则原理剖析
回溯法也称试探法,它的基本思想是:从问题的某一种状态(初始状态)出发,搜索从这种状态出发所能达到的所有“状态”,当一条路走到“尽头”的时候(不能再前进),再后退一步或若干步,从另一种可能“状态”出发,继...
闲人阅读 557
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...
边城赞 31阅读 7.2k评论 5
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...
chokcoco赞 20阅读 2.1k评论 2
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...
边城赞 17阅读 1.9k
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!
SegmentFault思否赞 20阅读 5.6k评论 10
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...
边城赞 18阅读 7.7k评论 3
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...
XboxYan赞 21阅读 1.6k评论 1
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。