2020-01-27 学习笔记——JS运行机制
线程和进程有什么区别
进程是CPU资源分配的最小单位，线程是CPU调度的最小单位
一个进程可以有多个线程
进程之间相互独立，多个线程可共享程序内的内存空间
线程上下文切换比进程上下文切换快得多
JS为什么是单线程
与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
为什么浏览器要多进程
我们假设浏览器是单进程，那么某个Tab页崩溃了，就影响了整个浏览器
浏览器包含哪些进程
- Browser进程
- 第三方插件进程
- GPU进程
- 渲染进程(重)
渲染进程Renderer(重)
-
GUI渲染线程
负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等
知识点： dom树、css规则树、render树，回流重绘，GUI渲染线程与JS引擎线程是互斥的 -
JS引擎线程
1.JS引擎线程就是JS内核，负责处理Javascript脚本程序
2.一个Tab页(renderer进程)中无论什么时候都只有一个JS线程在运行JS程序
GUI渲染线程与JS引擎线程是互斥的，js引擎线程会阻塞GUI渲染线程 -
事件触发线程
1.属于浏览器而不是JS引擎，用来控制事件循环，并且管理着一个事件队列(task queue)
2.当js执行碰到事件绑定和一些异步操作(如setTimeOut，也可来自浏览器内核的其他线程，如鼠标点击、AJAX异步请求等)，会走事件触发线程将对应的事件添加到对应的线程中(比如定时器操作，便把定时器事件添加到定时器线程)，等异步事件有了结果，便把他们的回调操作添加到事件队列，等待js引擎线程空闲时来处理。
3.当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理
4.因为JS是单线程，所以这些待处理队列中的事件都得排队等待JS引擎处理 -
定时触发器线程
1.setInterval与setTimeout所在线程
2.浏览器定时计数器并不是由JavaScript引擎计数的，因为JavaScript引擎是单线程的，如果处于阻塞线程状态就会影响记计时的准确, 所以通过单开一个线程计时并触发定时。计时完毕后，添加到事件触发线程的事件队列中，
等待JS引擎空闲后执行（此处有疑问，是定时触发器线程添加还是事件触发线程添加？已解决，计时完毕，定时触发器线程将回调函数交由事件触发线程，由事件触发线程将回调函数添加到任务队列里） -
异步http请求线程
1.在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
2.将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中再由JavaScript引擎执行
3.简单说就是当执行到一个http异步请求时，就把异步请求事件添加到异步请求线程，等收到响应(准确来说应该是http状态变化)，再把回调函数添加到事件队列，等待js引擎线程来执行
事件循环(Event Loop)初探
当js执行碰到事件绑定和一些异步操作，会走事件触发线程将对应的事件添加到对应的线程中，如定时触发线程，异步http请求线程。
定时触发线程只管理定时器且只关注定时不关心结果，定时结束就把回调扔给事件触发线程
异步http请求线程只管理http请求同样不关心结果，请求结束把回调扔给事件触发线程
事件触发线程只关心异步回调入事件队列
而我们JS引擎线程只会执行执行栈中的事件，执行栈中的代码执行完毕，就会读取事件队列中的事件并添加到执行栈中继续执行，这样反反复复就是我们所谓的事件循环(Event Loop)
宏任务(macrotask) & 微任务(microtask)
宏任务(macrotask)：
将每次执行栈执行的代码当做是一个宏任务
微任务(microtask)
我们已经知道宏任务结束后，会执行渲染，然后执行下一个宏任务， 而微任务可以理解成在当前宏任务执行后立即执行的任务。
知识点：
由于JS引擎线程和GUI渲染线程是互斥的关系，浏览器为了能够使宏任务和DOM任务有序的进行，会在一个宏任务执行结果后，在下一个宏任务执行前，GUI渲染线程开始工作，对页面进行渲染。当一个宏任务执行完，会在渲染前，将执行期间所产生的所有微任务都执行完
宏任务 -> 微任务 -> GUI渲染 -> 宏任务 -> ..
完整的Event Loop
image.png
参考
链接：https://juejin.im/post/5e22b391f265da3e204d8c14
作者：isboyjc
来源：掘金
