美文网首页
2020-01-27 学习笔记——JS运行机制

2020-01-27 学习笔记——JS运行机制

作者: 小旎子_8327 | 来源:发表于2020-01-27 13:42 被阅读0次

线程和进程有什么区别

进程是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
来源:掘金

相关文章

  • 2020-01-27 学习笔记——JS运行机制

    线程和进程有什么区别 进程是CPU资源分配的最小单位,线程是CPU调度的最小单位一个进程可以有多个线程进程之间相互...

  • JavaScript 运行机制 & EventLoop

    JavaScript 运行机制 & EventLoop 看阮老师博客和自己的理解,记录的学习笔记,js的单线程和 ...

  • 最全js运行机制

    js运行机制

  • js new 运行机制

    js手札--js中new到底做了些啥JS核心系列:理解 new 的运行机制深入理解 Javascript 运行机制及原型

  • 浅析Vue.nextTick()原理

    1、为什么用Vue.nextTick() 首先来了解一下JS的运行机制。 JS运行机制(Event Loop) J...

  • JS引擎运行机制

    JS引擎运行机制 -- 原地址(自己学习记录): https://juejin.im/post/5a6547d0f...

  • 运行机制,宏任务 与 微任务

    运行机制: JS 的本质是单线程执行 事件队列:同步任务,异步任务() 运行机制 1,JS 的本质是单线程执行 单...

  • vue 内部运行机制

    阅读 剖析 Vue.js 内部运行机制,自己做点小笔记,方便自己可以随时翻看,大家喜欢这篇文章,也可以去点击看原作...

  • 前端知识点

    JS 1. 事件循环 「硬核JS」一次搞懂JS运行机制[https://juejin.cn/post/684490...

  • js运行机制

    js运行机制 在日常面试求职中,不免会做几道面试题,这面试题中往往会遇到js执行输出顺序,而这运行机制是我们每个前...

网友评论

      本文标题:2020-01-27 学习笔记——JS运行机制

      本文链接:https://www.haomeiwen.com/subject/ehnsthtx.html