前言 众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section. Ther…

JavaScript 事件循环机制 (event loop) 本篇文章已经默认你有了基础的 ES6 和 javascript语法 知识. 本篇文章比较细致,如果已经对同步异步,单线程等概念比较熟悉的读者可以直接阅读执行栈后面的内容了解 event loop 原理 在了解 JavaScript 事件循环机制之前,得先了解同步与异步的概念 同步与异步 同步(Sync const cal = () => { for (let i = 0; i < 1e8; i++) { // 做一些运算 } } c…

引言 相信所有学过 JavaScript 都知道它是一门单线程的语言,这也就意味着 JS 无法进行多线程编程,但是 JS 当中却有着无处不在的异步概念 .在初期许多人会把异步理解成类似多线程的编程模式,其实他们中有着很大的差别,要完全理解异步,就需要了解 JS 的运行核心——事件循环(event loop).在之前我对事件循环的认识也是一知半解的,直到我看了 Philip Roberts 的演讲 What the heck is the event loop anyway?,我才对事件循环有了一…

一.JS单线程.异步.同步概念 众所周知,JS是单线程(如果一个线程删DOM,一个线程增DOM,浏览器傻逼了-所以只能单着了),虽然有webworker酱紫的多线程出现,但也是在主线程的控制下.webworker仅仅能进行计算任务,不能操作DOM,所以本质上还是单线程. 单线程即任务是串行的,后一个任务需要等待前一个任务的执行,这就可能出现长时间的等待.但由于类似ajax网络请求.setTimeout时间延迟.DOM事件的用户交互等,这些任务并不消耗 CPU,是一种空等,资源浪费,因此出现了异步…

浏览器的事件循环机制是HTML中定义的规范. JavaScript有一个主线程和调用栈,所有的任务都会被放到调用栈等待主线程执行. JS调用栈 是一种先进后出的数据结构.当函数被调用时,会被添加到栈中的顶部,执行完成之后就从栈的顶部移除该函数,直到栈内被清空. 同步任务.异步任务 JS单线程任务分为同步任务和异步任务.同步任务会在调用栈中按照顺序排队等待主线程执行,异步任务则会在异步有了结果之后将注册的回调函数添加到任务队列(消息队列)中等待主线程空闲的时候,也就是栈内被清空的时候,被读取到栈中…

JavaScript是单线程的编程语言,只能同一时间内做一件事.但是在遇到异步事件的时候,js线程并没有阻塞,还会继续执行,这就是因为JS有事件循环机制. 事件循环流程总结 主线程开始执行一段代码, 假设开始执行一个 script 标签内的代码,将代码放入执行栈中执行,同步代码优先执行,执行过程中,当遇到任务源时,判断是宏任务还是微任务. 如果是宏任务,加入到宏任务队列中,如果是微任务,加入到微任务队列中. 同步代码执行完成,执行栈空闲,检查微任务队列中是否有可执行任务,如果有,依次执行所有微任…

引入 众所周知Javascript是一个单线程的机制,虽然可以依托多线程的浏览器实现页面如何实现页面复杂的渲染.事件响应,但仍不会改变其单线程的本质:所以对于js的事件循环机制的了解是一个前端人员的必备基础之一. 1 几个相关的简单概念(以下备注均以javascript为前提) _ 执行上下文:execution context--js代码执行当前代码段的环境.变量的构成,参考: _ 函数调用栈-call stack--调度js代码.函数执行先后顺序的,一种有序数据结构,遵循FILO,参考: _…

区分进程和线程 进程是cpu资源分配的最小单位(系统会给它分配内存) 不同的进程之间是可以同学的,如管道.FIFO(命名管道).消息队列 一个进程里有单个或多个线程 浏览器是多进程的,因为系统给它的进程分配了资源(cpu.内存)(打开Chrome会有一个主进程,每打开一个Tab页就有一个独立的进程) 浏览器的渲染进程是多线程的 1.GUI渲染线程 2.JS引擎线程 3.事件触发线程 4.定时触发器线程 5.异步HTTP请求线程 事件循环机制 上图解释: 同步和异步任务分别进入不同的执行"场所&q…

引言 microtask 这一名词是 JS 中比较新的概念,几乎所有人都是在学习 ES6 的 Promise 时才接触这一新概念,我也不例外.当我刚开始学习 Promise 的时候,对其中回调函数的执行方式特别着迷,于是乎便看到了 microtask 这一个单词,但是困难的是国内很少有关于这方面的文章,有一小部分人探讨过不过对其中的原理和机制的讲解也是十分晦涩难懂.直到我看到了 Jake Archibald 的文章,我才对 microtask 有了一个完整的认识,所以我便想把这篇文章翻译过来,供…

引言 microtask 这一名词是 JS 中比较新的概念,几乎所有人都是在学习 ES6 的 Promise 时才接触这一新概念,我也不例外.当我刚开始学习 Promise 的时候,对其中回调函数的执行方式特别着迷,于是乎便看到了 microtask 这一个单词,但是困难的是国内很少有关于这方面的文章,有一小部分人探讨过不过对其中的原理和机制的讲解也是十分晦涩难懂.直到我看到了 Jake Archibald 的文章,我才对 microtask 有了一个完整的认识,所以我便想把这篇文章翻译过来,供…