答:JavaScript作为脚本语言,最初被设计用于浏览器。为了避免复杂的同步问题(做人嘛,还是简单点好,语言也一样),如果JavaScript同时有两个线程,一个线程中执行在某个DOM节点上添加内容,另一个线程执行删除这个节点,这时浏览器会……
所以JavaScript的单线程是这门语言的核心,未来也不会改变。
有人说,那HTML5的新特性Web Worker,可以创建多线程呀~
是的,为了解决不可避免的耗时操作(多重循环、复杂的运算),HTML5提出了Web Worker,它会在当前的js执行主线程中开辟出一个额外的线程来运行js文件,这个新的线程和js主线程之间不会互相影响,同时提供了数据交换的接口:postMessage和onMessage。
但是因为它创建的子线程完全受控于主线程,且位于外部文件中,无法访问DOM。所以它并没有改变js单线程的本质。
单线程就意味着,所有的任务都需要排队。
就像还不能自助点餐的时候你去肯德基需要排队,有的人没想好点什么或者点的东西很多,耗时就会长,那么后面的人也只好排队等待。有了自助点餐服务后,一切问题迎刃而解。
语言的设计和生活中的现实情况很像,IO设备(输入输出)很慢(比如Ajax),那么语言的设计者意识到这一点,就在主线程中挂起处于等待中的任务,先运行后面的任务,等IO设备有了结果,再把挂起的任务执行下去。
Event Loop
从上图中我们可以看到,在主线程运行时,会产生堆(heap)和栈(stack)。
堆中存的是我们声明的object类型的数据,栈中存的是基本数据类型以及函数执行时的运行空间。
栈中的代码会调用各种外部API,它们在任务队列中加入各种事件(onClick,onLoad,onDone),只要栈中的代码执行完毕(js引擎存在monitoring process进程,会持续不断的检查主线程执行栈是否为空),主线程就回去读取任务队列,在按顺序执行这些事件对应的回调函数。
也就是说主线程从任务队列中读取事件,这个过程是循环不断的,所以这种运行机制又成为Event Loop(事件循环)。
同步任务和异步任务
我们可以将任务分为同步任务和异步任务。
同步任务就是在主线程上排队执行的任务,只能执行完一个再执行下一个。
异步任务则不进入主线程,而是先在event table中注册函数,当满足触发条件后,才可以进入任务队列来执行。只有任务队列通知主线程说,我这边异步任务可以执行了,这个时候此任务才会进入主线程执行。
举个???
console.log(a);
setTimeout(
function () {
console.log(b);
},1000)
console.log©
// a
// b
// c
1.console.log(a)是同步任务,进入主线程执行,打印a。
2.setTimeout是异步任务,先被放入event table中注册,1000ms之后进入任务队列。
3.console.log©是同步任务,进入主线程执行,打印c。
当a,c被打印后,主线程去事件队列中找到setTimeout里的函数,并执行,打印b。
综上所述,b最持久~(扯个???)
宏任务和微任务
同步任务和异步任务的划分其实并不准确,准确的分类方式是宏任务(Macrotask)和微任务(Microtask)。
宏任务包括:
script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
微任务包括:
process.nextTick, Promise,
Object.observe(已废弃), MutationObserver(html5新特性)。
这种分类的执行方式就是,执行一个宏任务,过程中遇到微任务时,将其放到微任务的事件队列里,当前宏任务执行完成后,会查看微任务的事件队列,依次执行里面的微任务。如果还有宏任务的话,再重新开启宏任务……
再举个???
setTimeout(function() {
console.log(‘a’)
});
new Promise(function(resolve) {
console.log(‘b’);
for(var i =0; i <10000; i++) {
i ==99 && resolve();
}
}).then(function() {
console.log(‘c’)
});
console.log(‘d’);
// b
// d
// c
// a
1.首先执行script下的宏任务,遇到setTimeout,将其放入宏任务的队列里。
2.遇到Promise,new Promise直接执行,打印b。
3.遇到then方法,是微任务,将其放到微任务的队列里。
4.遇到console.log(‘d’),直接打印。
5.本轮宏任务执行完毕,查看微任务,发现then方法里的函数,打印c。
6.本轮event loop全部完成。
7.下一轮循环,先执行宏任务,发现宏任务队列中有一个setTimeout,打印a。
综上所述,不要说a是最持久的,如果你认为你彻底明白了,给你出道题,看看下面的代码中,谁最持久?
console.log(‘a’);
setTimeout(function() {
console.log(‘b’);
process.nextTick(function() {
console.log(‘c’);
})
new Promise(function(resolve) {
console.log(‘d’);
resolve();
}).then(function() {
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
文末
我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。
首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。
更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
前端面试题汇总
JavaScript
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
性能
linux
前端资料汇总
/img_convert/7796de226b373d068d8f5bef31e668ce.png)
性能
linux
前端资料汇总