JavaScript 重点 —— js的执行机制
引入 相关面试问题(他们都是同一个问题):
(1) JavaScript 中执行机制是什么?
(2) 解析JavaScript中的事件循环?
(3)简单描述一下什么是EventLoop?
前言
关于JavaScript : 它是一门单线程的编程语言,所有的任务需要排队得以执行,前一个任务未结束或者出错,那么后面的任务均得不到执行.如果前一个任务因为耗时太长,则影响后面的任务执行,这样使得JS执行效率过低,所以JS将所有的任务进行了分类处理
1.透过现象看本质
JavaScript 执行机制别名事件循环（EventLoop）,该机制是js代码解释执行过程中的的一种执行规则.
2.规则文字详情
(1) 总结 :
在JS中， 任务分为同步任务和异步任务. 所有的任务放在执行栈（JS主线程）中按照顺序执行，在执行过程中遇到同步任务,则立刻执行.若遇到异步任务,则将其放置到宿主环境中。如果在宿主环境中的异步任务达到了执行的条件,则将所要执行的回调函数放入任务队列中,待所有的同步任务执行完毕.主线程会查看任务队列中是否有要执行的异步任务。如果有就从队列头部依次将任务调到到主线程中执行.
(2)分解:抽象的理解同步任务和异步任务
同步任务:
同步任务的代码: console.log() 变量赋值 …
案例: 排队打饭,如果前面的任务不结束,后面的任务不会执行,不存在插队.
异步任务:
同步任务的代码: 事件回调函数 定时器 vue数据变化导致的DOM更新 …
案例: 可以插队,当满足执行的条件,即可被放到任务队列中,等待被执行!比如:5星级饭店的厨师为了效率不必按照顾客点餐顺序做菜
注意:所有的任务都需要在JS主线程中才能够执行!
3.代码详解
<body>
<button id="btn">A</button>
<script>
let btn = document.querySelector('#btn')
let a = 7
setTimeout(() => {
console.log("定时器是异步任务");
}, 0)
btn.addEventListener('click', function () {
console.log('按钮点击事件也是异步任务');
})
console.log(a);
</script>
</body>
4.画图理解代码(彻底理解JS的执行机制)
444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
