js执行机制

JS执行机制

• JS引擎线程（解释执行JS代码、用户是输入、网络请求）
• GUI线程（绘制用户界面、与JS主线程是互斥的）
• http网络请求线程（处理用户的get、post等请求，等返回结果后将回调函数推入任务队列）
• 定时触发器线程（setTimeout、setlnterval等待时间结束后把执行函数推入任务队列中）
• 浏览器事件处理线程（将cilick、mouse等交互事件发生后将这些事件放入事件队列中）

JS引擎线程和GUI线程-互斥

• JS可以操作DOM元素，进而会影响到GUI的渲染结果，因此JS引擎线程与GUI渲染线程是互斥的。也就是说当JS引擎线程处于运行状态时，GUI渲染线程将处于冻结状态

JS执行机制-单线程

• 单线程-同一事件只能做一件事
• javascript是基于单线程运行的，同时又是可以异步执行的，一般来说这种既是单线程又是异步的语言都是基于事件来驱动的，恰好浏览器就给javascript提供了这么一个环境

大数据操作怎么办

• 单线程计算能力有限，大量数据需要计算渲染的话，我们可以配合后端进行操作SSR技术

function foo (ot){
    function bar (it){
        console.log(it)
    }
    bar(20)
    console.log(ot)
}
foo(10)

同步任务

1. 代码没有执行的时候，执行栈为空栈
2. foo函数执行时，创建了一个帧，这帧中包含了形参、局部变量（预编译过程），然后把这一帧压入栈中
3. 然后执行foo函数内代码，执行bar函数
4. 创建新帧，同样有形参、局部变量、压入栈中
5. bar函数执行完毕，弹出栈
6. foo执行完毕，弹出栈
7. 执行栈为空
   执行栈其实相当于js的主线程

$.ajax({
    url : 'localhost:/js/dome.json',
    data : {},
    success : function(data){
        console.log(data)
    }
});
console.log('run')

异步任务

1. Ajax进入Event Table,注册回调函数success
2. 执行console.log('run)
3. ajax实现完成http网络请求线程把任务放入Event Queue中
4. 主线程（调用栈）入去任务下执行success函数