当我们执行 JS 代码的时候其实就是往执行栈中放入函数,那么遇到异步代码的时候该怎么办?其实当遇到异步的代码时,会被挂起并在需要执行的时候加入到 Task(有多种 Task) 队列中.一旦执行栈为空,Event Loop 就会从 Task 队列中拿出需要执行的代码并放入执行栈中执行,所以本质上来说 JS 中的异步还是同步行为. 不同的任务源会被分配到不同的 Task 队列中,任务源可以分为 微任务(microtask) 和 宏任务(macrotask).在 ES6 规范中,microtask 称…

目录 前言 认识一个栈两个队列 执行过程 异步任务怎么分配 简单例子 难一点的例子 前言 以下内容是js在浏览器中的事件队列执行,与在nodejs中有所区别,请注意. 都说js是单线程的,不过它本身其实不是单线程,但是在浏览器中执行时只分配一个线程进行执行. 所以说js执行是单线程的,一次只能进行一项任务,就是一件任务一件任务做,做完一件做下一件. 认识一个栈两个队列 一个调用栈Stack. 一个宏队列,macrotask,也叫tasks. 一个微队列,microtask,也叫jobs. 执行过…

前言 本文我们将会介绍 JS 实现异步的原理,并且了解了在浏览器和 Node 中 Event Loop 其实是不相同的. 一.线程与进程 1. 概念 我们经常说 JS 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程? 官方的说法是:进程是 CPU 资源分配的最小单位:线程是 CPU 调度的最小单位.这两句话并不好理解,我们先来看张图: 进程好比图中的工厂,有单独的专属自己的工厂资源. 线程好比图中的工人,多个工人在一个工厂中协作工作,工厂与工人是 1:n 的关系.也…

最近对Event loop比较感兴趣,所以了解了一下.但是发现整个Event loop尽管有很多篇文章,但是没有一篇可以看完就对它所有内容都了解的文章.大部分的文章都只阐述了浏览器或者Node二者之一,没有对比的去看的话,认识总是浅一点.所以才有了这篇整理了百家之长的文章. 1. 定义 Event loop:为了协调事件(event),用户交互(user interaction),脚本(script),渲染(rendering),网络(networking)等,用户代理(user agent)必…

1.进程,单线程与多线 进程: 运行的程序就是一个进程,比如你正在运行的浏览器,它会有一个进程. 线程: 程序中独立运行的代码段. 一个进程由单个或多个线程组成,线程是负责执行代码的. 2.单线程与多线程的区别 单线程 从头执行到尾,一行一行执行,如果其中一行代码报错,那么剩下代码将不再执行.同时容易代码阻塞. 多线程 代码运行的环境不同,各线程独立,互不影响,避免阻塞. 任务队列 任务分两种: 一种是同步任务(synchronous),另一种是异步任务(asynchronous). 同步任务指…

(本文从掘金小册整理) 首先介绍一下几个概念 进程与线程 相信大家经常会听到 JS 是单线程执行的,但是你是否疑惑过什么是线程? 讲到线程,那么肯定也得说一下进程.本质上来说,两个名词都是 CPU 工作时间片的一个描述. 进程描述了 CPU 在运行指令及加载和保存上下文所需的时间,放在应用上来说就代表了一个程序.线程是进程中的更小单位,描述了执行一段指令所需的时间. 把这些概念拿到浏览器中来说,当你打开一个 Tab 页时,其实就是创建了一个进程,一个进程中可以有多个线程,比如渲染线程.JS 引擎…

HTML Standard系列:Event loop.requestIdleCallback 和 requestAnimationFrame - 掘金 https://juejin.im/post/5ddf935951882530bd52bc8d HTML Standard系列:Event loop.requestIdleCallback 和 requestAnimationFrame 上篇回顾:HTML Standard系列:浏览器是如何解析页面和脚本的 简介 本文目的 理解 Event Lo…

JavaScript是单线程的,只有一个执行栈,一次只能做一件事. 在浏览器中,却“好像”可以同时做几件事:点击,发送请求,执行多个函数,解析代码. 这是因为浏览器实现的Event Loop机制. Web API setTimeout,ajax,dom操作回调,等等都是浏览器(JS runtime)提供的.setTimeout or http or DOM 这些东西在V8引擎代码中都是找不到的,他们都是浏览器自身部署的 这些操作不占用js线程,只有在回调函数需要执行时,才会将函数推入js执行栈.…

异步的思考 event loops隐藏得比较深,很多人对它很陌生.但提起异步,相信每个人都知道.异步背后的“靠山”就是event loops.这里的异步准确的说应该叫浏览器的event loops或者说是javaScript运行环境的event loops,因为ECMAScript中没有event loops,event loops是在HTML Standard定义的. event loops规范中定义了浏览器何时进行渲染更新,了解它有助于性能优化. 思考下边的代码运行顺序: console.l…

浏览器组成 User interface: a. Every part of the browser display, except the window. b. The address bar, back/forward button, bookmarking menu, etc. Browser Engine: marshals actions between the UI and the rendering engine. This provides a high-level interf…