js多个计时器的相互干扰_JS的机制有哪些?

js多个计时器的相互干扰_JS的机制有哪些?_第1张图片

有很多刚开始接触JS的同学会被任务队列 执行栈 微任务 宏任务这些高大上点的名次搞的很懵

接下来,我们来细致的梳理一遍你就可以清晰的了解它们了

什么是进程

我们都知道,CPU是计算机的核心,承担所有的计算任务

官网说法,进程是CPU资源分配的最小单位

js多个计时器的相互干扰_JS的机制有哪些?_第2张图片

字面意思就是进行中的程序,我将它理解为一个可以独立运行且拥有自己的资源空间的任务程序

进程包括运行中的程序和程序所使用到的内存和系统资源

中央处理器可以有许多进程,我们的电脑每一次打开软件都会产生一个或多个进程,为什么电脑运行多个进程的原因就是 CPU为每个进程分配了资源空间,但一个 CPU一次就有这么多资源,越多的进程被分配越多,每个进程之间是相互独立的,当 CPU运行一个进程时,其他进程处于非运行状态, CPU利用时间片轮调度算法实现同时运行多个进程。

什么是线程

线程是CPU调度的最小单位。线程是基于进程的程序运行单元。通俗点解释说,线程是程序中的一个执行流,一个进程可以有多个线程。

一个进程中只有一个执行流叫做单线程,即当一个程序被执行时,所采取的程序路径是按连续顺序排列的,前者必须处理好,后者才能执行。

在进程中有多个执行进程被称为多线程,也就是说,在进程中可以同时有多个不同的线程执行不同的任务,也就是允许一个进程创建多个并行线程来完成各自的任务。

区别

操作系统分配资源的最小单位是进程,而线程是程序执行的最小单位。流程由一个或多个线程组成,线程可以被理解为流程中代码的不同执行路径。

各进程之间是独立的,但是在同一个进程下,各个线程之间共享程序的内存空间(包括片段、数据集、堆等)和某些进程级资源(例如打开文件和信号)。

调度和切换:与进程上下文切换相比,线程上下文切换更快。

多进程和多线程

多进程:多进程是指如果允许两个或多个进程同时在同一计算机系统中运行。多个流程带来的好处显而易见。比如在网易云听歌的时候可以打开编辑器打代码,编辑器和网易云的流程不会有干扰。

多线程:多线程意味着程序有多个执行程序,即一个程序可以同时执行多个不同的程序来执行不同的任务,也就是说,单个程序可以创建多个并行程序来完成各自的任务。

JS为什么是单线程

js多个计时器的相互干扰_JS的机制有哪些?_第3张图片

与 js用途相关的单线程。作为一种浏览器脚本语言, JavaScript主要用来与用户交互和操作 DOM。所以,它只能是单线程,否则将导致复杂的同步问题。举例来说,假设 JavaScript有两个线程,一个线程将内容添加到某个 DOM节点,另一个线程将其删除,这时浏览器应该优先考虑哪个线程?

还有人说js有工作课程。是的,为了利用多核心CPU的计算能力,HTML5提出了Webworker标准,允许JavaScript脚本制作多种教程,但子教程完全由主教程控制,无法操作DOM。因此,这个标准没有改变JavaScript的线程质量。过程和线程后,看浏览器的分析,浏览器之间也有大致相同。时间不够想专业学习前端,然后从事前端开发的同学可以点击下方链接。

专业前端培训班​www.91soker.com

浏览器包含哪些进程

  • 浏览器进程浏览器的主要进程(负责协调和主控),其中只有一个进程负责显示浏览器界面和与用户交互。例如,前向和后向负责管理每一页,在内存中创建和销毁其他进程获得的位图,将它们绘制到用户界面,管理和下载网络资源等。
  • 第三方插件进程 每种类型的插件对应一个进程,当使用该插件时才创建。
  • GPU进程 该进程也只有一个,用于3D绘制等等
  • 渲染进程(重)通常被称为浏览器内核(渲染器进程,内部有多线程)。每个选项卡页面都有一个呈现过程,不会相互影响。其主要功能有页面渲染、脚本执行、事件处理等。

为什么浏览器要多进程

我们假设浏览器是单进程,那么某个Tab页崩溃了,就影响了整个浏览器,体验有多差

同理如果插件崩溃了也会影响整个浏览器。

当然多进程还有其它的诸多优势,不过多阐述。

浏览器进程有很多,每个进程又有很多线程,都会占用内存。

这也意味着内存等资源消耗会很大,有点拿空间换时间的意思。

到此可不只是为了让我们理解为何Chrome运行时间长了电脑会卡。

简述渲染进程Renderer

页面的渲染、JS的执行、事件的循环都在渲染过程中执行,因此必须重点理解渲染过程的渲染过程是多线程,看渲染过程中常用的主要线程。

js多个计时器的相互干扰_JS的机制有哪些?_第4张图片

渲染进程Renderer的主要线程

GUI渲染线程

  • 负责渲染浏览器界面,解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等 解析html代码(HTML代码本质是字符串)转化为浏览器认识的节点,生成DOM树,也就是DOM Tree 解析css,生成CSSOM(CSS规则树) 把DOM Tree 和CSSOM结合,生成Rendering Tree(渲染树)。
  • 当我们修改了一些元素的颜色或者背景色,页面就会重绘(Repaint)。
  • 当我们修改元素的尺寸,页面就会回流(Reflow)。
  • 当页面需要Repaing和Reflow时GUI线程执行,绘制页面。
  • 回流(Reflow)比重绘(Repaint)的成本要高,我们要尽量避免Reflow和Repaint。
  • 当JS引擎执行时,GUI渲染线程和JS引擎线程相互斥责,GUI线程悬挂(相当于冻结),GUI更新保存在队列中,等待JS引擎空闲时立即执行。

JS引擎线程

  • 一个 JS引擎线程就是负责处理 Javascript脚本程序的 JS内核(如V8引擎)。
  • 该 JS引擎线程负责分析 Javascript脚本并在其上运行。
  • JS引擎一直在等待任务队列中的任务到达并对其进行处理。与此同时,浏览器中只能有一个运行 JS程序的 JS引擎线程,因此 JS是一个 Tab页面(渲染进程)单线程运行,任何时候都只能有一个运行 JS程序的 JS线程。

js多个计时器的相互干扰_JS的机制有哪些?_第5张图片

GUI渲染线与JS引擎线相互排斥,JS引擎线堵塞GUI渲染线,我们经常遇到的JS执行时间过长,页面渲染不一致,页面渲染加载堵塞(加载缓慢)

以上就是关于JS的分享,谢谢大家阅读,如想了解更多前端方面的内容,欢迎关注知乎专栏——前端大本营。

你可能感兴趣的:(js多个计时器的相互干扰)