JS的事件循环机制

事件循环的意义

将耗时的任务分解为几部分来执行,这几个分解的任务所执行的时机由事件循环机制来确保。这样做是为了避免耗时操作阻塞浏览器UI界面的重绘。

事件循环与异步操作

JS的异步操作实质上是将一个任务分为几部分,以两部分为例,第二部分作为回调函数(这个函数根据API的写法来确定是异步调用还是同步调用,如果是异步调用才真正应该叫回调函数,同步的操作无所谓回调),等第一部分运行结束有了结果后,再通过调用回调函数(即第二部分)来继续运行任务。第一部分运行往往要么用时不长,要么是浏览器的其他线程执行操作(如远程请求等),回调函数在等待被调用期间,浏览器可以执行其他代码。因此,JS的异步是通过事件循环机制,将回调函数放入任务队列来进行的。

解释异步操作流程

在浏览器中,JS解释器用于执行JS代码,即JS函数调用栈。浏览器提供webAPI诸如setTimeout,Ajax等等异步操作,以及任务队列(task queue)。如下图
浏览器内部执行原理图
回调函数的写法是浏览器API提供的,那样的写法意味着回调函数会在将来被加入到任务队列里。比如一个Ajax请求$.ajax('url', foo),调用栈开始运行时,函数foo会一直等待ajax的运行结果。一旦运行有结果,foo会被加入到任务队列task queue中。此时,event loop机制开始发挥作用。事件循环机制就是一个监视器,一直监视着调用栈是否为空。一旦为空,就会把任务队列中的函数加入到调用栈内执行。之所以叫事件循环,就是这个监视器会一遍一遍循环监测任务队列中是否有任务。有任务的时候,就准备将任务加入调用栈(只有调用栈空了才加入)。
此外,还有一个叫job queue的队列,一般称之为微任务队列,而task queue则称为宏任务队列。事件循环监测一圈时,先加入宏任务,宏任务执行完后,再加入微任务。等微任务执行完后,再继续循环。所以,循环一圈,最后加入的一定是微任务,除非没有微任务。不过关于微任务,node环境跟浏览器环境的执行不一样。

事件循环每一轮的标志

事件循环的每一轮都以调用栈清空为标志,每次清空完调用栈,就代表着一轮事件循环的结束。

事件循环与浏览器重绘

JS的调用栈不为空的时候,浏览器是没法执行重绘的,这样设置也很正常,因为JS代码可能会更改DOM结构,因此只有调用栈为空时,浏览器才会执行重绘。为了避免出现UI界面阻塞,调用栈中的函数代码不应该是耗时操作,如果有任务是耗时的,那应该将任务分割成几部分,采用异步操作来执行任务,从而得到一个漂亮顺畅的UI界面。

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js事件循环机制是一种用于管理和执行任务的机制。在js中,事件循环机制负责处理用户交互事件、异步操作和定时任务等。 事件循环机制的核心是事件循环和任务队列。当有事件发生时(如用户点击按钮),事件被加入到任务队列中。js引擎会持续地从队列中取出任务并执行,直到队列为空。 任务分为两种类型:宏任务和微任务。宏任务包括用户交互事件、定时任务等,而微任务主要是由Promise对象的then方法产生的任务。在每次事件循环中,js首先执行当前宏任务,然后执行所有微任务,然后对页面进行重绘和渲染,然后进入下一次事件循环事件循环机制的重要性在于处理js的异步操作。当遇到一个异步操作时,如网络请求或定时器,js引擎不会立即执行异步任务,而是将其放入任务队列,等到主线程上的任务执行完成后再处理。这就使得js可以同时处理多个任务,提高了程序的性能和响应速度。 需要注意的是,js是单线程执行的,即每次只能执行一个任务。所以当一个任务执行时间过长时,就会造成页面的卡顿和无响应。因此,我们需要合理地使用事件循环机制,将耗时的任务分解为小块的异步任务,以保证页面正常运行和用户体验。 总而言之,js事件循环机制是一种用于管理和执行任务的机制,它通过任务队列和事件循环的方式,实现了js的异步处理,提高了程序的性能和响应速度。掌握事件循环机制对于编写高效并且流畅的js代码是非常重要的。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值