制作好的网站必须申请,厦门企业建网站制作,重庆网站建设坤思特,平面设计作品集如何制作异步背后的奥秘#xff1a;事件循环
复习环节
JavaScript运行时
我们都知道#xff0c;JavaScript本身是一个单线程的#xff0c;那JavaScript是如何处理同时发生的多个任务的呢#xff1f; 首先JavaScript引擎运行在一个容器中#xff0c;这个容器可能是浏览器或者nod…异步背后的奥秘事件循环
复习环节
JavaScript运行时
我们都知道JavaScript本身是一个单线程的那JavaScript是如何处理同时发生的多个任务的呢 首先JavaScript引擎运行在一个容器中这个容器可能是浏览器或者node中 JavaScript对象存储在内存中的位置我们称之为堆 实际执行JavaScript上下文代码是调用栈Call Stack 然后网页 中提供了很多的Web API提供给引擎使用比如DOM计时器Fetch API等等 然后就是事件循环了这个是JavaScript运行事的关键部分他负责处理异步操作和任务队列有事件循环了JavaScript就可以在主线程中运行非阻塞式的操作了事件循环实现一般就是通过回调队列来自事件需要准备执行的函数例如点击事件、计时器、一些数据等等
异步JavaScript如何在幕后工作
先看一段代码片段
el document.querySelector(img);
el.src dog.jpg;
el.addEventListener(load, () {el.classList.add(fedeIn);
});fetch(https://xxxxxxx/api).then(res console.log(res));//后续代码调用堆栈 Call Stack
JavaScript是单线程的只有一个调用堆栈用于执行上下文代码遵循先入后出的原则 所以第一行代码会立即执行变量赋予 第二行浏览器就开始尝试加载图片 第三行的load监听事件会等待图片加载完成后回调函数就会被放入回调队列中注意由于是load事件这并不会阻塞上下文的代码执行 fetch异步操作它是一个网络请求也会立即执行返回一个promise这个网络请求的处理会交给浏览器Web APIs
Web APIs
它是浏览器提供的功能它允许JavaScript执行异步的操作不会阻塞主线程所有操作是由浏览器在后台处理
比如这里的图片加载喝fetch请求
微任务队列 Microtask Queue
它主要是存放Promise的回调函数它的优先级高于回调队列事件循环会优先处理它的任务
fetch的回调函数当网络请求完成之后then中的回调函数就会被访问微任务队列优先处理
回调队列
它就是存放异步操作的回调函数了比如DOM事件定时器等等
比如上述代码中的图片加载当加载完成后load事件就会被放入回调队列
事件循环
它是JavaScript异步操作的核心它会一直检查调用堆栈喝任务列表主要是一下的步骤 当调用堆栈为空就会调出任务队列取出任务并且执行 如果微任务队列为空就会处理回调队列的任务 所以在上述的代码中fetch完成后会将回调函数放入微任务队列中事件循环处理完微任务后执行console.log(res);当图片加载完成后load事件回调函数被放入回调队列中微任务队列完成后执行el.classList.add(fedeIn
总结 经过上述的讲解就能明白JavaScript这种多线程的模型可以实现异步代码不阻塞主线程的执行 在我们编程中一切外部资源的等待完全交给浏览器和运行时的环境这样可以有效的节省CPU和内存的资源 利用这种异步操作也使得JavaScript对于用户交互更加的灵活也可以更快的响应用户的操作 事件循环和任务队列也可以不创建多个线程的情况下处理大量的并发请求
