浏览器常驻线程:
js引擎线程(解释执行代码,用户输入,网络请求)
GUI线程(绘制用户页面,与js主线程是互斥的(页面也有加载完不能进行操作))
异步线程:
http网络请求线程:处理用户的get,post等请求,等返回结果后将回调函数推入任务列队中
浏览器事件处理线程(将click,mouse等交互事件发生后将这些事放入任务队列中)
js执行机制:单线程
单线程:同一时间只能做一件事
疑问:为啥JS引擎是不多线程:
js设计出来就是为了与用户交互,处理DOM,假如js是多线程,同一时间一个线程需要修改DOM,另外一个线程想要删除DOM,问题就变得复杂了许多。浏览器不知道听谁的,如果引入‘“锁”的机制,这不就又回到被其他语言尴尬的困境了么
单线程的计算能力有限,大量的数据需要计算渲染的话,我们可以配合后端操作,如VUE和node.js的配合,也就是传说中的SSR技术
js是基于单线程运行的,同时又是可以异步执行的,一般来说这种即是单线程又是异步的语言都是基于事件来驱动的。恰好浏览器给js提供了这么一个环境。
同步任务:
function foo(){
console.log('foo')
function bar(){
console.log('bar')
}
bar()
}
foo()
0,代码没有执行的时候,执行栈为空。
1,foo函数执行时,创建一帧,这帧里包含了形参,局部变量(预编译过程),然后把这些压入栈中
2,然后执行foo内代码,执行bar函数
3,创建新帧,同样有形参,局部变量,压入栈中
4,bar函数执行完,弹出栈
5,foo函数执行完,弹出栈
6,栈为空
异步任务:
$.ajax({
url:'xxx',
data:{},
success:function(data){
console.log(data)
}
});
console.log('run')
举例ajax请求
0,ajax进入Event Table ,并注册回调函数success()
1,执行console.log('run')
2,ajax事件完成http网络请求,线程把任务放入Event Queue中
3,主线程(调用栈)读取任务下执行success函数
未完待续。。。。。。