Tomhsfreestyle 2019-11-19
学习javascipt的时候,经常听人说,javascipt即是异步的,又是单线程的。究竟什么是异步,什么是单线程?javascript在浏览器中的运行机制是怎么样的?什么是eventloop,task queue?怎么写异步函数?相信读完这篇文章,相信你会对上面问题有一个全面的认识。
主线程
)虽然JavaScript是单线程的(说的是JS引擎线程),可是浏览器内部不是单线程的。一些I/O操作、定时器的计时和事件监听(click, keydown...)等都是由浏览器提供的其他线程来完成的。
主线程和渲染引擎线程互斥,因为渲染的时候主线程可能通过dom操作渲染结果,所以主线程必须被阻塞
之前傻傻的分不清楚单线程多线程,同步异步。其实很简单
异步的判断标准:是否阻塞,同步阻塞,异步不阻塞。
单线程的判断标准:一次是否只做一件事。
JS引擎一次只做一件事。遇到异步任务并不会阻塞后面的同步任务(不等待)。所以我们说JS是异步 单线程的。需要注意的是JS引擎其实并不提供异步的支持,异步支持主要依赖于运行环境(浏览器或Node.js)。
var start = new Date(); while(new Date() - start < 100000) { // delay 10 sec ; }
上面代码在chrome控制台输入可以手动阻塞当前页面的js主线程10s。然后我们在当前页面输入console.log(1),当前页面无反应,在另外的页面输入console.log(1)直接打印
说明浏览器每个页面都会单独起一个进程,页面1的主线程被阻塞并不会影响影响页面2的主线程
之前在Stackoverflow看了一个答案,感觉还比较靠谱
JavaScript Engine:parse your code and convert it to runnable commands
JavaScript Runtime Environment :provide some objects to javascript so that it can interact with the outside world.
For example, the Chrome Browser and node.js use the same Engine - V8, but their Runtimes are different: in Chrome you have the window, DOM objects etc, while node gives you require, Buffers and processes.
通俗的讲,上面这张图,左边你可以看成JS引擎,右边你可以看成JS运行环境
之前已经说了,JS在设计之初选择单线程,是以为单线程简单,可控。
但是单线程存在一个问题,部分任务比如Ajax请求数据,如果设计成同步的,后面的任务将都去等待Ajax请求完,这个性能是不能接受的。
所以浏览器内核(?个人推测,暂时没有找到相关资料
)将任务分为同步任务和异步任务,所有同步任务放到主线程上执行,形成一个执行栈(execution context stack)。所以异步任务放到其他异步线程上去执行。
当异步任务执行完以后,相关回调函数会放入到消息队列(也有叫callback queue、task queue)中。
主线程同步任务执行完,每个一段事件会检查消息队列一次,有回调函数就会执行,如此往复就成为Eventloop
个人的理解 :JS引擎是同步的,浏览器通过eventloop这种机制实现了异步
看一下How JavaScript works 怎么描述这个过程的
So, for example, when your JavaScript program makes an Ajax request to fetch some data from the server, you set up the “response” code in a function (the “callback”), and the JS Engine tells the hosting environment:
“Hey, I’m going tosuspend
execution for now, but whenever you finish with that network request, and you have some data, please call this function back.”
The browser
is then set up tolisten
for the response from the network, and when it has something to return to you,it will schedule the callback function to be executed by inserting it into the event loop
.
面试喜欢考宏任务(macrotask),微任务(microtask)。那么我们就来讲一讲macrotask和microtask是个啥子
宏任务又成为task。可以理解是每次执行栈执行的代码就是一个task
,task1->渲染->task1
microtask,可以理解是在当前
task 执行结束后立即执行的任务,所以microtask有归属性,只在对应的task执行完后立即执行.task1->microtask1->渲染->task2->microtask2->渲染...
macrotask:主代码块,setTimeout,setInterval等(可以看到,事件队列中的每一个事件都是一个macrotask)microtask:Promise,process.nextTick等
求下面代码的结果
console.log('1'); setTimeout(function() { //回调2 new Promise(function(resolve) { console.log('2'); resolve(); }).then(function() { console.log('3') }) console.log('4'); },2000) new Promise(function(resolve) { console.log('5'); resolve(); }).then(function() { console.log('6') }) setTimeout(function() { //回调1 new Promise(function(resolve) { console.log('7'); resolve(); }).then(function() { console.log('8') }) setTimeout(function(){ //回调3 console.log('9') },2000) },1000) //(156) (78) (243) (9)
解析:
task1: 输出1 5
----> microtask1 输出6
--(执行栈空)-->render---->eventloop1秒以后
callback queue里面加入回调1
被eventloop捕获,同步任务入栈,异步任务给settiomeout线程(也就是回调3的那个异步任务)
task2: 输出7
----> microtask2 输出8
--(执行栈空)-->render---->eventloop2秒以后
callback queue里面加入回调2
被eventloop捕获,同步任务入栈
task3: 输出2 4
----> microtask3 输出3
--(执行栈空)-->render---->eventloop3秒以后
callback queue里面加入回调3
被eventloop捕获,同步任务入栈
task4: 输出9
--(执行栈空)-->render---->eventloop...
let fs = require('fs'); fs.readFile('./1.js','utf-8',(err,data)=>{ // fs.readFile('./2.js','utf-8',(err,data)=>{ // fs.readFile('./3.js','utf-8',(err,data)=>{ // }) }) })
缺点是容易形成回调地狱,不能return
const fs = require('fs'); const readFile(i) = new Promise(function(){ fs.readFile(`./${i}.js`,'utf-8',(err,data)=>{ resolve(data) }) }) readFile(1) .then(readFile(2)) .then(readFile(3)) .....
async function read(){ //await后面必须跟一个promise, let a = await readFile('./1.txt'); console.log(a); let b = await readFile('./2.txt'); console.log(b); let c = await readFile('./3.txt'); console.log(c); return 'end'; }
以上是我看了多篇文章以后,结合自己的理解,对javascript异步单线程,以及运行机制做的一个总结。如果你感觉哪一部分有点问题,欢迎在评论区留言。
从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理
JavaScript 运行机制详解:再谈Event Loop
JavaScript异步机制详解
JavaScript 运行原理解析
What is the difference between JavaScript Engine and JavaScript Runtime Environment
并发模型与事件循环