为了账号安全,请及时绑定邮箱和手机立即绑定

javascript event loop(1)

标签:
Java

这篇文章学习 jake 一次分享,首先感谢 jake 的分享,当然我们都是学习别人,但是我个人并不是简单地传递或翻译他人内容,而是融入了自己思想,可能是不对的,将一些自己学过过程中的遇到问题给大家分享,以便大家更好地理解作者分享的内容。


看到下面的代码,大家可能会有顾虑这样写,el 会不会在屏幕上有一闪而过的效果

webp

我通过代码进行尝试,并没有您顾虑那种情况,因为在 javascript 中并没 race condition 的问题

webp

webp

在 web 页面有一个主线程,之所以叫主线程,是因为加载文件(css 或 javascript)、以及 javascript 的运行和页面渲染,dom 所有这些一切都是发生在这个线程中。

webp

这样就表示以上所有动作都是有一定顺序,因为他们都发生一个线程里。我们无法用同时编辑和修改一个 DOM ,所以也就不存在 race condition 的问题了。但是如何某一个动作占用主线程时间过长,所谓长时间一般在 200 毫秒以上,这样就会影响其他动作,在这段时间内阻止用户交互,造成不好的用户体验。

但是我们一些耗时例如网络请求,也些用户操作、解码和编码,这些都会运行在主线程以外的线程,当结束后会将信息返回到主线程。这就是今天主题 the event loop,这里我就不翻译这个词,保持原滋原味吧。


setTimeout(callback,ms) 想必大家都用过吧,参数位置看起来有点别扭,不过今天我们抛开这个,探究一下方法背后究竟发生了什么。

webp

当然我们不想让这个方法占据主线程那么多时间,所以我们这个方法是并行于主线运行的

webp

但是如果并行运行的话,那么我们希望 callback 方法是返回到主线程进行执行的。但是问题来了这些异步操作当他们返回主线程对 dom 进行操作,会不会引起 race condition 呢?

为了解决这个问题,引入了任务队列,这些任务会有序地返回到主线程进行执行,

当你点击鼠标,那么如何从系统操作来到 javascript 呢?这也是进入任务队列

任务队列

任务队列是 event loop 一部分,也是历史悠久了。下图我们通过图形的形式来生动地展示 event loop 是如何工作的。

我们发现了这里有一个小门,当有任务时候小门就会开启,然后去执行任务。让浏览器通知 event loop ,hey 我们有些任务要做,就会开启小门

webp

下面我们创建两个 setTimeout 指定相同延时时间然后进行打印来看效果


webp


webp

webp

当执行这两个方法会并行于主线程进行执行,然后回到主线,执行顺序是根据任务队列顺序决定。

webp

浏览器通知 event loop 有任务要回到主线程执行, 我有两个任务在任务队列中,这样 event loop 会按顺序依次执行两个任务

webp


webp

渲染步骤

这是浏览是如何更新屏幕输出的,分步渲染是 event loop 另一个小门,这里首先查询计算所有 css 然后将其应用到每一个元素上。

webp

然后(Layout)是布局,根据渲染树(dom 的结构)来放置每个元素到屏幕上其该有的位置。

webp

最后也就是根据样式和位置信息生产 pixel 数据,每一个像素的颜色以及透明度,然后根据这些数据进行绘制。

webp

webp

如果我们点击这个按钮,整个 JavaScript 世界就停止在您点击这一刻,无法进行任何操作。

webp

为什么会这样呢?当您点击按钮,浏览器通知 event loop 这一个任务需要你执行,event loop 就会立即执行任务,

webp

不过这是无限任务,几毫秒后浏览器还想让 event loop 去做一些其他类似更新界面工作。

webp

不过这是 event loop 没有完成手头上工作是无法进行下一项工作的。

webp



作者:zidea
链接:https://www.jianshu.com/p/426d251a053e


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
JAVA开发工程师
手记
粉丝
205
获赞与收藏
1006

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消