(如果你感觉一上来不想看这些列举的知识点的话，直接看后面的例子再来理解它们也可以) event loop它的执行顺序： 一开始整个脚本作为一个宏任务执行 执行过程中同步代码直接执行，宏任务进入宏任务队列...setTimout作为一个宏任务被放入宏任务队列(下一个) Promise.then作为一个微任务被放入微任务队列 本次宏任务执行完，检查微任务，发现Promise.then，执行它 接下来进入下一个宏任务...(偷偷告诉你，这道题往下一点有流程图) 因此过程分析为： 刚开始整个脚本作为第一次宏任务来执行，我们将它标记为宏1，从上至下执行 遇到Promise.resolve().then这个微任务，将then中的内容加入第一次的微任务队列标记为微...(见3.8) .then方法是能接收两个参数的，第一个是处理成功的函数，第二个是处理失败的函数，再某些时候你可以认为catch是.then第二个参数的简便写法。...第一个then和第二个then中传入的都不是函数，一个是数字类型，一个是对象类型，因此发生了透传（跳过非函数的then函数），将resolve(1) 的值直接传到最后一个then里。
大家都知道JavaScript是同步的，也就是单线程，原因是因为如果不使用单线程，在操作DOM时可能会出现一些问题，比如我们有两个事件，一个是删除div，一个是添加div，他们的执行顺序不同，导致的结果也将截然不同...举个不是很恰当的例子，就是一堆人在食堂排队买饭吃，第一个人买完饭（第一个任务执行了），但是还没开始吃（回调函数还没执行）；第二个人就开始买饭（第二个任务就执行了），还没开始吃，第三个人就又开始买饭了（第三个任务就执行了...事件循环的执行顺序 执行顺序 先执行同步代码（主任务中的宏任务），遇到异步宏任务将异步宏任务放进宏任务队列，遇到异步微任务放进微任务队列。...开始第二轮宏任务setTimeout输出1 2 5 3 4 1 练习 5 setTimout和promise执行顺序变种题 setTimeout(()=>{ console.log(1) },0...第一轮事件循环结束，开始第二轮宏任务，setTimout输出1 ---控制台打印--- 2 10 3 5 4 1 在chrome的控制台console中输出结果的话，会发现每相邻的两个事件循环之间都会有一个
什么是事件循环 在了解事件循环前，需要一些有关JS特性的前置知识。 JS引擎是单线程的，直白来说就是一个时间点下JS引擎只能去做一件事情，而Java这种多线程语言，可以同时做几件事情。...但对于JS这种单线程语言来说，这种长时间的空闲等待是不可接受的：遇到其他紧急任务，Java可以再开一个线程去处理，JS却只能忙等。...事件循环是由一个队列组成的，异步任务的回调遵循先进先出，在JS引擎空闲时会一轮一轮地被取出，所以被叫做循环。 根据队列中任务的不同，分为宏任务和微任务。...常见的宏任务有：script（整体代码）/setTimout/setInterval/setImmediate(node 独有)/requestAnimationFrame(浏览器独有)/IO/UI render...浏览器的事件循环 浏览器的事件循环由一个宏任务队列+多个微任务队列组成。 首先，执行第一个宏任务：全局Script脚本。产生的的宏任务和微任务进入各自的队列中。
2.3、JavaScript的宏任务与微任务 除了广义上的定义，我们可以将任务进行更精细的定义，分为宏任务与微任务： 宏任务（macro-task）： 包括整体代码script脚本的执行，setTimeout...setTimeout() 和 setInterval() 产生的任务是 异步任务，也属于 宏任务。 setTimeout() 接受两个参数，第一个是回调函数，第二个是推迟执行的毫秒数。...setInterval() 接受两个参数，第一个是回调函数，第二个是反复执行的毫秒数。...3.2.3 process.nextTick process.nextTick 是 Node.js 提供的一个与"任务队列"有关的方法，它产生的任务是放在 执行栈的尾部，并不属于 宏任务 和 微任务...有时候，setTimeout 的执行顺序会在 setImmediate 的前面，有时候会在 setImmediate 的后面，这并不是 node.js 的 bug，这是因为虽然 setTimeout 第二个参数设置为
为什么js是单线程的？ js单线程是js语言的一大特点，这与他的用途有关。 作为浏览器脚本语言，他最初的主要执行环境是浏览器，而他（专指js）的主要用途是和用户互动、操作dom。...这就导致这些代码只能顺序执行，不能并发执行。 js执行栈 ? 上边图中，heap和stack翻译过来分别是： heap： 堆 stack： 栈 他们是js代码在执行时，用于储存变量的两个内存位置。...严谨的说，因为异步是浏览器的两个或者两个以上线程共同完成的。所以触发浏览器多线程的代码会被异步处理。...假如还有第二个回掉函数，js主线程在执行完一个回掉函数时，不是立马执行下一个，而是再排查一遍还有没有同步任务需要处理，没有了再执行第二个回调。第三个回调执行前也会再检查一遍。...宏任务和微任务 值的注意的是，像定时器这些任务都属于宏任务（macro-task），回调函数被推入执行栈之前，js引擎都会先扫描一遍看还有没有微任务（micro-task）没有被执行，当所有微任务被执行完毕后
因为JS是脚本语言，JS的最主要用途是与用户互动和操作DOM，如果不是单线程，就会出现浏览器不知道先处理哪个线程不知以哪个线程为主的问题。...2 什么是任务队列，什么是执行栈 既然JS是单线程的，那么就代表着JS代码的执行要按照一定的顺序排队在主线程执行。...5 定时器 定时器主要涉及两个常用函数，setTimeout(), setInterval()，前者是一次执行，后者反复执行，两者内部运行机制相同 setTimeout()接受两个参数，第一个是回调函数...，第二个是推迟执行的毫秒数 setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。...6 宏任务与微任务 这时，有的同学就会问了，那不同的异步任务执行顺序又是怎样的呢？
宏任务Event Queue微任务Event QueuesetTimeout2 process2 then2 第二轮事件循环宏任务结束，发现有process2和then2两个微任务可以执行...宏任务Event Queue微任务Event Queueprocess3 then3 第三轮事件循环宏任务执行结束，执行两个微任务process3和then3：输出10。...obj.a() ; 调用 obj 实例上的方法 a，该实例上目前有两个 a 方法：一个是内部属性方法，另一个是原型上的方法。...defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下：执行顺序： 多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行...；脚本是否并行执行：async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js
(如果你感觉一上来不想看这些列举的知识点的话，直接看后面的例子再来理解它们也可以) event loop它的执行顺序： 一开始整个脚本作为一个宏任务执行 执行过程中同步代码直接执行，宏任务进入宏任务队列...setTimout作为一个宏任务被放入宏任务队列(下一个) Promise.then作为一个微任务被放入微任务队列 本次宏任务执行完，检查微任务，发现Promise.then，执行它 接下来进入下一个宏任务...因此过程分析为： 刚开始整个脚本作为第一次宏任务来执行，我们将它标记为宏1，从上至下执行 遇到Promise.resolve().then这个微任务，将then中的内容加入第一次的微任务队列标记为微1...(见3.8) .then方法是能接收两个参数的，第一个是处理成功的函数，第二个是处理失败的函数，再某些时候你可以认为catch是.then第二个参数的简便写法。...第一个then和第二个then中传入的都不是函数，一个是数字类型，一个是对象类型，因此发生了穿透，将resolve(1) 的值直接传到最后一个then里。
而且，我认为把 V8 里面的源码全部读懂并不是一个明智的做法，一个是工程量过于庞大，很容易失去耐心，另一方面代码的封装度非常高，导致很多抽象的代码，理解难度大。...主要分为两条主线，一个是 V8 的编译和执行流程，这会逼着你去补充计算机底层架构相关的知识，另一个是在性能优化方面 V8 采取了哪些具体的手段，根据这些手段你就知道如何合适的组织 JS 代码去触发这些优化...渲染进程: 负责将 HTML、CSS 和 JS 转换为用户可见的网页，其中有一个主线程，这个主线程的执行权会在两个引擎间来回切换，一个是 Blink 排版引擎，一个是 V8 引擎，完成 JS 执行和文档的排版...EventLoop 调度能力 回顾一下浏览器中 EventLoop 的调度过程: 一开始整段 JS 脚本作为第一个宏任务执行 执行过程中同步代码直接执行，宏任务进入宏任务队列，微任务进入微任务队列 当前宏任务执行完出队...，检查微任务队列，如果有则依次执行，直到微任务队列为空 执行浏览器 UI 线程的渲染工作 检查是否有Web worker任务，有则执行 执行队首新的宏任务，回到2，依此循环，直到宏任务和微任务队列都为空
那为什么JavaScript是单线程的呢？ JavaScript 的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript 的主要用途是与用户互动，以及操作 DOM。...setTimeout() 和 setInterval() 产生的任务是 异步任务，也属于 宏任务。 setTimeout() 接受两个参数，第一个是回调函数，第二个是推迟执行的毫秒数。...setInterval() 接受两个参数，第一个是回调函数，第二个是反复执行的毫秒数。...process.nextTick process.nextTick 是 Node.js 提供的一个与"任务队列"有关的方法，它产生的任务是放在 执行栈的尾部，并不属于 宏任务 和 微任务，因此它的任务...有时候，setTimeout 的执行顺序会在 setImmediate 的前面，有时候会在 setImmediate 的后面，这并不是 node.js 的 bug，这是因为虽然 setTimeout 第二个参数设置为
执行完这个宏任务，就开始执行微任务队列，打印出3；继续执行宏任务队列中的第二个定时器，打印出6。...（5）其他可以通过一些小的优化点来加快打包速度resolve.extensions：用来表明文件后缀列表，默认查找顺序是 ['.js', '.json']，如果你的导入文件没有添加后缀就会按照这个顺序查找文件...obj.a() ; 调用 obj 实例上的方法 a，该实例上目前有两个 a 方法：一个是内部属性方法，另一个是原型上的方法。...；遇到Promise，执行代码，打印出3，遇到resolve，将其加入到微任务队列；遇到第二个定时器，加入到宏任务队列；遇到第三个定时器，加入到宏任务队列；继续执行script代码，打印出8，第一轮执行结束...；执行微任务队列，打印出第一个Promise的resolve结果：4；开始执行宏任务队列，执行第一个定时器，打印出2；此时没有微任务，继续执行宏任务中的第二个定时器，首先打印出5，遇到Promise，首选打印出
那为什么JavaScript是单线程的呢？ JavaScript 的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript 的主要用途是与用户互动，以及操作 DOM。...setTimeout() 和 setInterval() 产生的任务是 异步任务，也属于 宏任务。 setTimeout() 接受两个参数，第一个是回调函数，第二个是推迟执行的毫秒数。...setInterval() 接受两个参数，第一个是回调函数，第二个是反复执行的毫秒数。...process.nextTick process.nextTick 是 Node.js 提供的一个与”任务队列”有关的方法，它产生的任务是放在 执行栈的尾部，并不属于 宏任务 和 微任务，因此它的任务...有时候，setTimeout 的执行顺序会在 setImmediate 的前面，有时候会在 setImmediate 的后面，这并不是 node.js 的 bug，这是因为虽然 setTimeout 第二个参数设置为
因此这里提出了同步任务和异步任务的概念。 在js中，可以将同步和异步简单理解为执行顺序的问题。 2.1同步（sync）： 即上面所说的后面等待前面。...微任务会对应地进入微任务队列中。 5.事件循环的具体实现过程？ 总的来说，事件循环的顺序，决定了js代码执行的顺序。 首先进入包裹的整体代码(这是第一个宏任务)，标志着第一次循环开始。...我们将其标记为setTimeout2 此时第一轮事件循环宏任务结束，下表是第一轮事件循环宏任务结束时各任务队列的情况 深入理解事件循环-2.png 可以看到第一轮事件循环宏任务结束后微任务事件队列中还有两个事件待执行...输出: 5 此时第二轮事件循环宏任务结束，下表是第二轮事件循环宏任务结束时各任务队列的情况 深入理解事件循环-3.png 可以看到第二轮事件循环宏任务结束后微任务事件队列中还有两个事件待执行，因此这两个事件会被推入主线程...输出: 11 此时第三轮事件循环宏任务结束，下表是第三轮事件循环宏任务结束时各任务队列的情况 深入理解事件循环-4.png 可以看到第二轮事件循环宏任务结束后微任务队列中还有两个事件待执行，因此这两个事件会被推入主线程
defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下： 执行顺序： 多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行...； 脚本是否并行执行：async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，...（2）老生代算法 老生代中的对象一般存活时间较长且数量也多，使用了两个算法，分别是标记清除算法和标记压缩算法。...所以正确的一次 Event loop 顺序是这样的 执行同步代码，这属于宏任务 执行栈为空，查询是否有微任务需要执行 执行所有微任务 必要的话渲染 UI 然后开始下一轮 Event loop，执行宏任务中的异步代码...通过上述的 Event loop 顺序可知，如果宏任务中的异步代码有大量的计算并且需要操作 DOM 的话，为了更快的 界面响应，我们可以把操作 DOM 放入微任务中。
，首先打印出4，如遇到Promise，执行其中的同步代码，打印出5，遇到定时器，将其加入到宏任务队列中，此时宏任务队列中有两个定时器；执行宏任务队列中的代码，这里我们需要注意是的第一个定时器的时间为100ms...，第二个定时器的时间为10ms，所以先执行第二个定时器，打印出6；此时微任务队列为空，继续执行宏任务队列，打印出1。...所以正确的一次 Event loop 顺序是这样的执行同步代码，这属于宏任务执行栈为空，查询是否有微任务需要执行执行所有微任务必要的话渲染 UI然后开始下一轮 Event loop，执行宏任务中的异步代码通过上述的...Event loop 顺序可知，如果宏任务中的异步代码有大量的计算并且需要操作 DOM 的话，为了更快的 界面响应，我们可以把操作 DOM 放入微任务中。...第一个then和第二个then中传入的都不是函数，一个是数字，一个是对象，因此发生了透传，将resolve(1) 的值直接传到最后一个then里，直接打印出1。
闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，它的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中，不会在外部函数调用后被自动清除。...then 方法接受两个参数，第一个参数是成功时的回调，在 promise 由“等待”态转换到 “完成”态时调用，另一个是失败时的回调，在 promise 由“等待”态转换到“拒绝”态时调用。...17、JS垃圾回收与V8垃圾回收 js中垃圾回收一般采用标识清除法和引用计数法 v8中垃圾回收采用分代回收：新生代，老生代和大对象 18、什么是宏任务和微任务，两者有什么区别？...ES6 规范中，宏任务（macrotask）又称为 task，微任务（microtask）又称为 jobs。 宏任务是由宿主发起的，而微任务是由 JS 本身发起。...等 宏任务和微任务的执行顺序： 同步任务->微任务->宏任务 两者的区别： 宏任务：DOM渲染后触发，如setTimeout 微任务：DOM渲染前触发，如promise 19、
>加载外部脚本时，任务是执行它 用户移动鼠标时，任务是调度 mousemove 事件并执行处理程序 当计划好的时间到了 setTimeout，任务是运行其回调。 ......现在，如果 onclick 在引擎正在忙于执行第1部分时出现新的辅助任务（例如事件），则将其排队，然后在第1部分完成时在下一部分之前执行。...最后，我们将需要大量 CPU 的任务分成了几个部分–现在它不会阻塞用户界面。而且它的整体执行时间不会更长。 用例2：进度指示 为浏览器脚本分配繁重任务的另一个好处是，我们可以显示进度指示。...promise显示第二个，因为它.then通过微任务队列，并在当前代码之后运行。 timeout 最后显示，因为它是一个宏任务。...更丰富的事件循环图片如下所示（顺序是从上到下，即：首先是脚本，然后是微任务，渲染，等等）： ? 在执行任何其他事件处理或呈现或执行任何其他宏任务之前，所有微任务都已完成。
注意：all和race传入的数组中如果有会抛出异常的异步任务，那么只有最先抛出的错误会被捕获，并且是被then的第二个参数或者后面的catch捕获；但并不会影响数组中其它的异步任务的执行。...懒加载与预加载的区别 这两种方式都是提高网页性能的方式，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。...； 执行完这个宏任务，就开始执行微任务队列，打印出3； 继续执行宏任务队列中的第二个定时器，打印出6。...timer1，将其加入宏任务队列； 最后，宏任务队列有三个任务，先后顺序为timer2，timer3，timer1，没有微任务，所以直接所有的宏任务按照先进先出的原则执行。...宏任务Event Queue 微任务Event Queue process3 then3 第三轮事件循环宏任务执行结束，执行两个微任务process3和then3：
第四种是 apply 、 call 和 bind 调用模式，这三个方法都可以显示的指定调用函数的 this 指向。其中 apply 方法接收两个参数：一个是 this 绑定的对象，一个是参数数组。...第二轮：从宏任务队列开始，发现setTimeout回调，输出1执行完毕，因此结果是25431JS 在执行的过程中会产生执行环境，这些执行环境会被顺序的加入到执行栈中。...Event loop 顺序是这样的执行同步代码，这属于宏任务执行栈为空，查询是否有微任务需要执行执行所有微任务必要的话渲染 UI然后开始下一轮 Event loop，执行宏任务中的异步代码通过上述的...；再执行宏任务队列，根据宏任务插入先后顺序执行 setTimeout 再执行 fs.readFile，这里需要注意，先执行 setTimeout 由于其回调时间较短，因此回调也先执行，并非是 setTimeout...针对JavaScript的来及回收机制有以下两种方法（常用）：标记清除，引用计数标记清除v8 的垃圾回收机制基于分代回收机制，这个机制又基于世代假说，这个假说有两个特点，一是新生的对象容易早死，另一个是不死的对象会活得更久
前言 JavaScript是一门单线程的非阻塞脚本语言，同一时刻只允许一个代码段执行。在单线程的机制下，执行异步任务时，在等待结果返回的这个时间段，后面的代码就无法执行了。...我们做个假设，如果JS是多线程的，因为JS有DOM API可以操作DOM，此时如果有两个线程在操作同一个DOM，线程1删除了这个dom节点，线程2要操作这个dom，就会产生矛盾，到底以哪个线程为主。...为了避免这种情况的出现，JS就被设计成了单线程 。 宏任务与微任务 JS引擎把所有任务分为两类：宏任务、微任务。...，JS是通过事件循环机制（EventLoop）来解决这一弊端的，接下来我们来看下EventLoop的执行规则： 所有代码作为宏任务进入主线程执行栈，开始执行 执行过程中，同步代码会立即执行，宏任务进入宏任务队列...，微任务进入微任务队列 当前宏任务执行完成出队，读取微任务队列，有则执行，直至全部执行完毕 执行浏览器ui进程渲染 检查是否有webworker任务，有则执行 本轮宏任务执行完成，回到第2步，继续执行，
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
