0


高级java每日一道面试题-2024年9月08日-前端篇-JS的执行顺序是什么样的?

如果有遗漏,评论区告诉我进行补充

面试官: JS的执行顺序是什么样的?

我回答:

JavaScript 的执行顺序是由其特殊的执行环境所决定的。JS 的执行环境包括全局执行环境、函数执行环境和 eval 执行环境。在这些环境中,变量和函数声明会被提升(hoisting),而变量赋值和函数调用则按照代码出现的顺序执行。此外,异步操作如回调、Promise 和 async/await 也会影响执行顺序。

1. 调用栈(Call Stack)

调用栈是一种后进先出(LIFO)的数据结构,用于存储代码执行期间创建的所有执行上下文(Execution Context)。每当一个函数被调用时,一个新的执行上下文就会被创建并推入调用栈中。当函数执行完毕并返回结果时,其对应的执行上下文就会从调用栈中弹出。

1. 代码解析与提升(Hoisting)

在代码执行之前,JavaScript 引擎会对代码进行预解析,将所有的变量声明(var, let, const)和函数声明提升到当前作用域的顶部。但是,只有声明会被提升,初始化赋值不会被提升。

示例:
console.log(x);// 输出 undefinedvar x =5;

console.log(y);// 输出 ReferenceError: y is not definedlet y =10;
2. 同步代码执行

一旦提升完成后,JavaScript 将按照代码的书写顺序执行同步代码。这意味着,除了提升之外,所有的代码都是按照自上而下的顺序执行的。

示例:
functionsayHello(){
  console.log("Hello");}sayHello();// 输出 Hello

console.log("World");// 输出顺序:// Hello// World

2. 事件循环(Event Loop)

事件循环是JavaScript运行时环境的一部分,它负责监听和分发事件,执行回调函数等。事件循环使得JavaScript能够执行异步操作,如网络请求、定时器(setTimeout, setInterval)等。

JavaScript 的事件循环机制是异步操作的核心。事件循环不断检查是否有任务需要执行,如果有,则从任务队列中取出任务并执行。

事件循环涉及两种主要的任务队列:

  • 微任务(Microtasks):包括 Promisethen 回调、MutationObserver 等。
  • 宏任务(Macrotasks):包括 setTimeoutsetIntervalI/O、UI 渲染等。

微任务会在当前宏任务执行完成后立即执行,而宏任务则会放入下一个宏任务队列中等待执行。

示例:
console.log("Start");setTimeout(()=>{
  console.log("Timeout 1");},0);

Promise.resolve().then(()=>{
  console.log("Promise 1");setTimeout(()=>{
    console.log("Timeout 2");},0);

  Promise.resolve().then(()=>{
    console.log("Promise 2");});});setTimeout(()=>{
  console.log("Timeout 3");},0);

console.log("End");// 输出顺序:// Start// End// Promise 1// Promise 2// Timeout 1// Timeout 2// Timeout 3

在这个示例中,

Promise

then

回调是微任务,会在当前宏任务执行结束后立即执行。而

setTimeout

则是宏任务,会在当前宏任务执行结束后放入下一个宏任务队列中等待执行。

3. JavaScript执行顺序

JavaScript的执行顺序可以大致分为以下几个阶段:

a. 解析与执行
  • 全局执行上下文:当浏览器加载一个HTML页面时,会创建一个全局执行上下文,并将全局对象(在浏览器中是window对象)与之关联。全局执行上下文首先被推入调用栈。
  • 同步代码执行:页面上的<script>标签内的同步代码会按照它们出现的顺序执行。这些代码的执行会修改全局执行上下文中的变量和函数。
b. 异步操作
  • 事件监听和回调:当JavaScript遇到异步操作(如网络请求、定时器)时,它会将回调函数放入事件队列(Event Queue)中,然后继续执行调用栈中的下一个任务。
  • 事件循环:一旦调用栈为空,事件循环就会从事件队列中取出一个事件(实际上是回调函数),并将其对应的函数推入调用栈中执行。这个过程会一直重复,直到事件队列为空。 异步操作(如回调函数、Promise 和 async/await)会暂时挂起主线程的执行,直到异步操作完成。异步操作的结果通常会放入一个任务队列中,一旦主线程空闲时,就会从队列中取出并执行这些任务。
示例:
console.log("Start");setTimeout(()=>{
  console.log("Timeout");},0);

Promise.resolve().then(()=>{
  console.log("Promise");});

console.log("End");// 输出顺序:// Start// End// Promise// Timeout

在这个示例中,

setTimeout

Promise

都是异步操作,它们不会立即执行,而是会被放入任务队列中等待主线程空闲时执行。

c. 宏任务与微任务
  • 宏任务(MacroTask):包括整体代码script,setTimeout,setInterval,setImmediate,I/O,UI渲染等。
  • 微任务(MicroTask):Promise.then,MutationObserver等。

在执行完一个宏任务后,事件循环会查看并处理所有可用的微任务,然后再去处理下一个宏任务。这种机制确保了微任务总是比宏任务更早地执行。

示例

console.log('1');setTimeout(()=>{
    console.log('2');},0);

Promise.resolve().then(()=>{
    console.log('3');});

console.log('4');

执行顺序将是:

  1. '1'(同步代码)
  2. '4'(同步代码)
  3. '3'(微任务,Promise.then的回调)
  4. '2'(宏任务,setTimeout的回调)

这个顺序展示了JavaScript如何先处理完所有同步代码,然后处理微任务队列中的所有任务,最后才处理宏任务队列中的任务。

总结

JavaScript 的执行顺序主要包括以下几个阶段:

  1. 代码解析与提升(Hoisting):变量和函数声明会被提升到当前作用域的顶部。
  2. 同步代码执行:按照代码的书写顺序执行同步代码。
  3. 异步操作:异步操作会被暂时挂起,并放入任务队列中等待执行。
  4. 事件循环(Event Loop):不断检查任务队列,执行微任务和宏任务。

理解 JavaScript 的执行顺序对于编写高效的异步代码非常重要。通过掌握事件循环机制,可以更好地管理异步操作,避免不必要的性能瓶颈。

标签: 前端 java javascript

本文转载自: https://blog.csdn.net/qq_43071699/article/details/142182434
版权归原作者 java我跟你拼了 所有, 如有侵权,请联系我们删除。

“高级java每日一道面试题-2024年9月08日-前端篇-JS的执行顺序是什么样的?”的评论:

还没有评论