中小学学校网站建设,网站维护目标,汕头网站专业制作,怎么分析网站建设的优缺点1、为什么会有事件循环机制#xff1f; JavaScript是一种单线程的语言#xff0c;这意味着它一次只能执行一个任务。然后#xff0c;Web应用通常需要处理多个任务#xff0c;比如用户输入#xff0c;网络请求#xff0c;渲染页面等。如果所有的任务都按照同步的方式执行 JavaScript是一种单线程的语言这意味着它一次只能执行一个任务。然后Web应用通常需要处理多个任务比如用户输入网络请求渲染页面等。如果所有的任务都按照同步的方式执行可能会导致阻塞页面用户体验不佳。 为了解决这个问题javascript引入了事件循环机制。事件循环是一种机制用于管理和调度不同来源的任务执行。这个机制运行jsvascript在执行一部操作时不会阻塞整个应用程序的执行。 2、事件循环的关键组成部分
执行栈Execution Stack JavaScript 引擎使用执行栈来管理代码的执行。当调用函数时会将该函数推入执行栈并在执行完毕后从栈中弹出。任务队列Task Queue 在事件循环中除了执行栈外还存在任务队列。当发生异步事件如定时器结束、事件触发等时会将对应的回调函数放入任务队列中。事件循环Event Loop JavaScript 引擎在执行栈为空时会不断地从任务队列中取出任务推入执行栈中执行。这个过程不断重复形成了事件循环。 这个机制允许 JavaScript 在执行异步任务时通过将回调函数放入任务队列中在执行栈为空时再去执行这些任务从而实现异步执行而不会阻塞整个程序。 3、事件循环执行步骤
先执行所有的同步任务会有序依次向下执行的例如console,条件判断语句循环语句等等。执行异步任务里的微任务队列将解析到的微任务依次添加到微任务队列的后排在执行时按顺序依次执行先进先执行先出去例如Process.$nextTickpromise实例的then方法await关键字执行异步任务里的宏任务队列宏任务队列的执行是没有顺序之分的哪个任务先调用完成就执行哪个任务(比如有一个5秒的定时器先加入进来的但是有后加入进来一个2秒的定时器那么2秒的定时器先调用完成就先执行所以是无序的)事件处理函数定时器(setTimeout, setInterval)ajax请求script标签
4、例子
//1、同步任务会立即执行马上输出
console.log(script start);// 2、异步任务-》宏任务推入宏任务队列中[事件2] 执行完全部同步任务和微任务队列后才会执行
setTimeout(function() {console.log(setTimeout---0);
}, 0);// 3、异步任务-》宏任务推入宏任务队列中[事件2、事件3]执行完全部同步任务和微任务队列后才会执行
setTimeout(function() {// 31、同步任务会立即执行马上输出console.log(setTimeout---200);// 32、异步任务-》宏任务推入宏任务队列中[事件32]执行完全部同步任务和微任务队列后才会执行setTimeout(function() {console.log(inner-setTimeout---0);});// 33、异步任务-》微任务推入微任务队列中[事件33]执行完全部同步任务后才会执行Promise.resolve().then(function() {console.log(promise5);});
}, 200);// 4、异步任务-》微任务推入微任务队列中[事件4]执行完全部同步任务后才会执行
Promise.resolve().then(function() {console.log(promise1);}).then(function() {console.log(promise2);});// 5、异步任务-》微任务推入微任务队列中[事件4、事件5]执行完全部同步任务后才会执行
Promise.resolve().then(function() {console.log(promise3);
});// 6、同步任务会立即执行马上输出
console.log(script end);// 执行完所有同步任务后会输出 script start - script end
// 接着执行异步任务的微任务队列[事件4、事件5](按顺序执行)会输出promise1 - promise2 - promise3
// 接着执行异步任务的宏任务队列[事件2、事件3](无顺序执行谁执行的快就输入哪个)会输出setTimeout---0 - setTimeout---200 - promise5 - inner-setTimeout---0// 结果
script start
script end
promise1
promise2
promise3
setTimeout---0
setTimeout----200
promise5
inner-setTImeout0----0
