Home>Article>Web Front-end> An in-depth analysis of execution context and execution mechanism in JavaScript
This article will introduce you to threads and processes, and understand the execution context and execution mechanism inJavaScript. I hope it will be helpful to you!
About the execution context, execution stack, and execution mechanism (synchronous tasks, asynchronous tasks, microtasks, macrotasks, and event loops) injsThe interview is a high-frequency test point, and some friends may be confused when asked, so the author will summarize it today, hoping it can be helpful to you in front of the screen. [Related recommendations:javascript learning tutorial]
talk about the execution context andjsexecution injsBefore the mechanism, let’s talk about threads and processes
In official termsThreadisCPUThe smallest unit of scheduling.
In official termsProcessisCPUResource allocation the smallest unit.
Threadis a program run based onprocessUnit, a popular explanationThreadis an execution flow in the program. Aprocesscan have one or morethreads.
There is only one execution flow in aprocesscalledsingle thread, that is, when the program is executed, the program paths taken are arranged in consecutive order, and the previous ones must be processed Okay, the rest will be executed.
Multiple execution streams in aprocessare calledmultithreads, that is, multiple differentthreadscan be run simultaneously in one program. To perform different tasks, that is to say, a single program is allowed to create multiplethreadsexecuted in parallel to complete their respective tasks.
The author will give a simple example below. For example, if we openqqMusicto listen to music,qqMusiccan be understood as a process. InqqMusic# In ## we can download while listening to music. This is multi-threading. Listening to music is a thread and downloading is a thread. If we openvscodeagain to write code, it will be another process.
newkeyword and theThreadclass or its subclass to create a thread object, the thread object is in the new state. state. It remains in this state until the programstart()this thread.
start()method, the thread enters the ready state. The thread in the ready state is in the ready queue and can be run immediately as long as it obtains the right to useCPU.
CPUresource, it can executerun(), and the thread is in the running state. . The thread in the running state is the most complex, it can become blocked, ready and dead.
sleep (sleep),suspend (suspend),wait (wait)and other methods, after losing the occupied resources, the thread will enter the blocking state from the running state. The ready state can be re-entered after the sleep time has expired or device resources have been obtained. It can be divided into three types:
wait()method to enter the waiting blocking state.
synchronizedsynchronization lock (because the synchronization lock is occupied by other threads).
I/Orequest was made by calling the thread'ssleep()orjoin(), the thread will enter the blocking state. When thesleep()status times out,join()waits for the thread to terminate or times out, orI/Ois processed, the thread re-enters the ready state.
JSis single-threaded.JSAs a browser scripting language, its main purpose is to interact with users and operateDOM. This determines that it can only be single-threaded, otherwise it will cause very complex synchronization problems. For example, supposeJavaScripthas two threads at the same time. One thread adds content to a certainDOMnode, and the other thread deletes the node. At this time, which thread should the browser use as the allow?
When theJSengine parses an executable code fragment (usually When it is the function calling stage), some preparatory work before execution will be done first. This"preparation work"is called"execution context (referred to asEC)"Or it can also be calledexecution environment.
javascriptThere are three types of execution context, namely:
Global execution contextThis is the default or most basic execution context. There will only be one global context in a program, which will exist during the execution of the entirejavascriptscript's life cycle. The bottom of the stack will not be destroyed by stack popping. The global context will generate a global object (taking the browser environment as an example, this global object iswindow), and bind thethisvalue to this global object.
Function execution contextWhenever a function is called, a new function execution context is created (regardless of whether the function is called repeatedly).
Eval function execution contextThe code executed inside theevalfunction will also have its own execution context, but because it is not often Useeval, so no analysis is done here.
We mentioned earlier thatjswill create an execution context when running, but the execution context needs to be stored, so what is used to store it? You need to use the stack data structure.
The stack is a first-in, last-out data structure.
So in summaryThe execution context used to store the execution context created when the code is running is the execution stack.
When executing a piece of code, theJSengine will first create an execution stack to store the execution context.
ThenJSthe engine will create a global execution context andpushto the execution stack. In this processJSthe engine will create a global execution context for this code All variables in allocate memory and assign an initial value (undefined). After the creation is completed, theJSengine will enter the execution phase. In this process, theJSengine will execute the code line by line, that is Assign values (real values) to the variables that have been allocated memory one by one.
If there is a call tofunctionin this code, then theJSengine will create a function execution context andpushto the execution stack , its creation and execution process is the same as the global execution context.
When an execution stack is completed, the execution context will be popped from the stack, and then it will enter the next execution context.
The author will give an example below. If there is the following code in our program
console.log("Global Execution Context start"); function first() { console.log("first function"); second(); console.log("Again first function"); } function second() { console.log("second function"); } first(); console.log("Global Execution Context end");
Let’s briefly analyze the above example
First of all An execution stack will be created
Then a global context will be created and the execution contextpushwill be added to the execution stack
Start execution, outputGlobal Execution Context start
Encounter thefirstmethod, execute the method, create a function execution context andpushTo the execution stack
Executefirstexecution context, outputfirst function
secondmethod, execute the method, create a function execution context andpushto the execution stack
secondExecution context, outputsecond function
secondThe execution context is completed, popped from the stack, and enters the next execution ContextfirstExecution context
firstExecution context continues execution, outputAgain first function
firstAfter the execution of the execution context is completed, it is popped from the stack and enters the next execution context. Global execution context
Global Execution Context end
好了。说完执行上下文和执行栈我们再来说说js的执行机制
说到js的执行机制，我们就需要了解js中同步任务和异步任务、宏任务和微任务了。
在js中，任务分为同步任务和异步任务，那什么是同步任务什么是异步任务呢？
同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。
异步任务指的是，不进入主线程、而进入"任务队列"的任务(任务队列中的任务与主线程并列执行)，只有当主线程空闲了并且"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。由于是队列存储所以满足先进先出规则。常见的异步任务有我们的setInterval、setTimeout、promise.then等。
前面介绍了同步任务和异步任务，下面我们来说说事件循环。
同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，只有前一个任务执行完毕，才能执行后一个任务。异步任务不进入主线程而是进入Event Table并注册函数。
当指定的事情完成时，Event Table会将这个函数移入Event Queue。Event Queue是队列数据结构，所以满足先进先出规则。
主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
上述过程会不断重复，也就是常说的Event Loop(事件循环)。
我们用一张图来总结下
下面笔者简单来介绍个例子
function test1() { console.log("log1"); setTimeout(() => { console.log("setTimeout 1000"); }, 1000); setTimeout(() => { console.log("setTimeout 100"); }, 100); console.log("log2"); } test1(); // log1、log2、setTimeout 100、setTimeout 1000
我们知道在js中会优先执行同步任务再执行异步任务，所以上面的例子会先输出log1、log2
同步任务执行完后会执行异步任务，所以延迟100毫秒的回调函数会优先执行输出setTimeout 100
延迟1000毫秒的回调函数会后执行输出setTimeout 1000
上面的例子比较简单，相信只要你看懂了上面笔者说的同步异步任务做出来是没什么问题的。那下面笔者再举一个例子小伙伴们看看会输出啥呢？
function test2() { console.log("log1"); setTimeout(() => { console.log("setTimeout 1000"); }, 1000); setTimeout(() => { console.log("setTimeout 100"); }, 100); new Promise((resolve, reject) => { console.log("new promise"); resolve(); }).then(() => { console.log("promise.then"); }); console.log("log2"); } test2();
要解决上面的问题光知道同步和异步任务是不够的，我们还得知道宏任务和微任务。
在js中，任务被分为两种，一种叫宏任务MacroTask，一种叫微任务MicroTask。
常见的宏任务MacroTask有
主代码块
setTimeout()
setInterval()
setImmediate() - Node
requestAnimationFrame() - 浏览器
常见的微任务MicroTask有
Promise.then()
process.nextTick() - Node
所以在上面的例子中就涉及到宏任务和微任务了，那宏任务微任务的执行顺序是怎么样的呢？
首先，整体的script(作为第一个宏任务)开始执行的时候，会把所有代码分为同步任务、异步任务两部分，同步任务会直接进入主线程依次执行，异步任务会进入异步队列然后再分为宏任务和微任务。
宏任务进入到Event Table中，并在里面注册回调函数，每当指定的事件完成时，Event Table会将这个函数移到Event Queue中
微任务也会进入到另一个Event Table中，并在里面注册回调函数，每当指定的事件完成时，Event Table会将这个函数移到Event Queue中
当主线程内的任务执行完毕，主线程为空时，会检查微任务的Event Queue，如果有任务，就全部执行，如果没有就执行下一个宏任务
我们用一张图来总结下
读懂了异步里面的宏任务和微任务上面的例子我们就可以轻易的得到答案了。
我们知道在js中会优先执行同步任务再执行异步任务，所以上面的例子会先输出log1、new promise、log2。这里需要注意new promise里面是同步的
主代码块作为宏任务执行完后会执行此宏任务所产生的所有微任务，所以会输出promise.then
所有微任务执行完毕后会再执行一个宏任务，延迟100毫秒的回调函数会优先执行输出setTimeout 100
此宏任务没有产生微任务，所以没有微任务需要执行
继续执行下一个宏任务，延迟1000毫秒的回调函数会优执行输出setTimeout 1000
所以test2方法执行后会依次输出log1、new promise、log2、promise.then、setTimeout 100、setTimeout 1000
关于
js执行到底是先宏任务再微任务还是先微任务再宏任务网上的文章各有说辞。笔者的理解是如果把整个js代码块当做宏任务的时候我们的js执行顺序是先宏任务后微任务的。
正所谓百看不如一练，下面笔者举两个例子如果你都能做对那你算是掌握了js执行机制这一块的知识了。
例子1
function test3() { console.log(1); setTimeout(function () { console.log(2); new Promise(function (resolve) { console.log(3); resolve(); }).then(function () { console.log(4); }); console.log(5); }, 1000); new Promise(function (resolve) { console.log(6); resolve(); }).then(function () { console.log(7); setTimeout(function () { console.log(8); }); }); setTimeout(function () { console.log(9); new Promise(function (resolve) { console.log(10); resolve(); }).then(function () { console.log(11); }); }, 100); console.log(12); } test3();
我们来具体分析下
首先js整体代码块作为一个宏任务最开始执行，依次输出1、6、12。
整体代码块宏任务执行完毕后产生了一个微任务和两个宏任务，所以宏任务队列有两个宏任务，微任务队列有一个微任务。
宏任务执行完毕后会执行此宏任务所产生的的所有微任务。因为只有一个微任务，所以会输出7。此微任务又产生了一个宏任务，所以宏任务队列目前有三个宏任务。
三个宏任务里面没有设置延迟的最先执行，所以输出8，此宏任务没有产生微任务，所以没有微任务要执行，继续执行下一个宏任务。
延迟100毫秒的宏任务执行，输出9、10，并产生了一个微任务，所以微任务队列目前有一个微任务
宏任务执行完毕后会执行该宏任务所产生的所有微任务，所以会执行微任务队列的所有微任务，输出11
延迟1000毫秒的宏任务执行输出2、3、5，并产生了一个微任务，所以微任务队列目前有一个微任务
宏任务执行完毕后会执行该宏任务所产生的所有微任务，所以会执行微任务队列的所有微任务，输出4
所以上面代码例子会依次输出1、6、12、7、8、9、10、11、2、3、5、4，小伙伴们是否做对了呢？
例子2
我们把上面的例子1稍作修改，引入async和await
async function test4() { console.log(1); setTimeout(function () { console.log(2); new Promise(function (resolve) { console.log(3); resolve(); }).then(function () { console.log(4); }); console.log(5); }, 1000); new Promise(function (resolve) { console.log(6); resolve(); }).then(function () { console.log(7); setTimeout(function () { console.log(8); }); }); const result = await async1(); console.log(result); setTimeout(function () { console.log(9); new Promise(function (resolve) { console.log(10); resolve(); }).then(function () { console.log(11); }); }, 100); console.log(12); } async function async1() { console.log(13) return Promise.resolve("Promise.resolve"); } test4();
上面这里例子会输出什么呢？这里我们弄懂async和await题目就迎刃而解了。
我们知道async和await其实是Promise的语法糖，这里我们只需要知道await后面就相当于Promise.then。所以上面的例子我们可以理解成如下代码
function test4() { console.log(1); setTimeout(function () { console.log(2); new Promise(function (resolve) { console.log(3); resolve(); }).then(function () { console.log(4); }); console.log(5); }, 1000); new Promise(function (resolve) { console.log(6); resolve(); }).then(function () { console.log(7); setTimeout(function () { console.log(8); }); }); new Promise(function (resolve) { console.log(13); return resolve("Promise.resolve"); }).then((result) => { console.log(result); setTimeout(function () { console.log(9); new Promise(function (resolve) { console.log(10); resolve(); }).then(function () { console.log(11); }); }, 100); console.log(12); }); } test4();
看到上面的代码是不是就能轻易得出结果呢？
首先js整体代码块作为一个宏任务最开始执行，依次输出1、6、13。
整体代码块宏任务执行完毕后产生了两个微任务和一个宏任务，所以宏任务队列有一个宏任务，微任务队列有两个微任务。
宏任务执行完毕后会执行此宏任务所产生的的所有微任务。所以会输出7、Promise.resolve、12。此微任务又产生了两个宏任务，所以宏任务队列目前有三个宏任务。
三个宏任务里面没有设置延迟的最先执行，所以输出8，此宏任务没有产生微任务，所以没有微任务要执行，继续执行下一个宏任务。
延迟100毫秒的宏任务执行，输出9、10，并产生了一个微任务，所以微任务队列目前有一个微任务
宏任务执行完毕后会执行该宏任务所产生的所有微任务，所以会执行微任务队列的所有微任务，输出11
延迟1000毫秒的宏任务执行输出2、3、5，并产生了一个微任务，所以微任务队列目前有一个微任务
宏任务执行完毕后会执行该宏任务所产生的所有微任务，所以会执行微任务队列的所有微任务，输出4
所以上面代码例子会依次输出1、6、13、7、Promise.resolve、12、8、9、10、11、2、3、5、4，小伙伴们是否做对了呢？
关于setTimeout(fn)可能很多小伙伴还是不太理解，这不明明没设置延迟时间吗，不应该立即就执行吗？
setTimeout(fn)我们可以理解成setTimeout(fn,0)，其实是同一个意思。
我们知道js分同步任务和异步任务，setTimeout(fn)就是属于异步任务，所以这里就算你没设置延迟时间，他也会进入异步队列，需要等到主线程空闲的时候才会执行。
笔者这里再提一嘴，你觉得我们在setTimeout后面设置的延迟时间，js就一定会按我们的延迟时间执行吗，我觉得并不见得。我们设置的时间只是该回调函数可以被执行了，但是主线程有没有空还是另外一回事，我们可以举个简单的例子。
function test5() { setTimeout(function () { console.log("setTimeout"); }, 100); let i = 0; while (true) { i++; } } test5();
上面的例子一定会在100毫秒后输出setTimeout吗，并不会，因为我们的主线程进入了死循环，并没有空去执行异步队列的任务。
GUI渲染在这里说有些小伙伴可能不太理解，后面笔者会出关于浏览器的文章会再详细介绍，这里只是简单了解下即可。
由于JS引擎线程和GUI渲染线程是互斥的关系，浏览器为了能够使宏任务和DOM任务有序的进行，会在一个宏任务执行结果后，在下一个宏任务执行前，GUI渲染线程开始工作，对页面进行渲染。
所以宏任务、微任务、GUI渲染之间的关系如下
宏任务 -> 微任务 -> GUI渲染 -> 宏任务 -> ...
【相关视频教程推荐：web前端】
The above is the detailed content of An in-depth analysis of execution context and execution mechanism in JavaScript. For more information, please follow other related articles on the PHP Chinese website!