美文网首页大前端开发
浏览器的线程和进程

浏览器的线程和进程

作者: 遇侎粒_duyuqin | 来源:发表于2019-07-25 11:16 被阅读21次

前言

学习真的是一个很奇妙的过程。
本意是学习状态管理工具Redux,其中涉及到Promise异步编程知识,发现不太熟悉,于是决定先学学Promise相关知识。
Promise文档中,提及了传统的异步编程解决方案,感觉略显模糊,那就先回顾下传统的异步编程解决方案吧。
传统异步编程解决方案中涉及了定时器,好像没研究过定时器的原理,一不做,二不休,决定先把定时器的原理搞清楚再回去学习上面的知识。
然鹅,还没结束,定时器的原理建立在js引擎线程上!!!
所以,这篇文章,记录的是浏览器的线程和进程相关知识。[捂脸/]


奇妙的学习.jpg

浏览器线程与进程

线程和进程的概念此处不再赘述,直击主题-浏览器的线程与进程。
以谷歌浏览器为例,打开浏览器,然后shift+Esc或者(Chrome的更多工具 -> 任务管理器),打开chrome的任务管理器:

浏览器进程.png 如图,呈现出浏览器的4种进程,依次用红色方框分隔:
1、浏览器进程(Browser进程)
浏览器的主进程,负责协调、主控,只有一个(无论打开几个tab或几个弹窗),主要作用:
  • 负责浏览器界面显示,与用户交互,如前进,后退等;
  • 负责各个页面的管理,创建和销毁其他进程;
  • 将Renderer进程得到的内存中的Bitmap,绘制到用户界面上;
  • 网络资源的管理,下载等;

2、CPU进程
用于3D绘制等,可禁用掉,只有一个。

3、第三方插件进程
每种类型的插件对应一个进程,仅当使用该插件时才创建。

4、浏览器渲染进程
浏览器渲染进程(Renderer进程),即通常所说的浏览器内核,主要作用:页面渲染、脚本执行、事件处理等。每一个标签页的打开都会创建一个Renderer进程,且互不影响。默认一个标签页一个Renderer进程,但是,有时候浏览器会将多个进程合并(暂时没查到合并的依据),比如打开多个空白标签页:

浏览器进程合并

浏览器为什么是多进程?

对于简单的网页,一个进程处理多个网页是可行的。
但是把很多复杂的网页放进一个进程,浏览器面临在健壮性,响应速度,安全性方面的挑战。如果一个tab页崩溃,将导致同进程的其他页面崩溃,极其影响用户体验。
另外进程之间是不共享资源和地址空间的,所以不会存在太多的安全问题。
当然,多进程相对于单进程,内存等资源消耗更大,有点空间换时间的意思。这大概也是浏览器中存在多个tab页共用一个进程的情况的原因吧。

浏览器渲染进程(Renderer进程,浏览器内核)

作为前端开发,最关心的自然是页面渲染、脚本执行、事件处理等过程,这就不得不介绍Renderer进程。
首先,Renderer进程包含以下5种线程:
1、GUI渲染线程

  • 负责渲染浏览器界面,解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等;
  • 当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行;
  • 注意:GUI渲染线程与JS引擎线程是互斥的,当JS引擎执行时GUI线程会被挂起(相当于被冻结了),GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

2、JS引擎线程

  • JS引擎线程也称为JS内核,负责处理Javascript脚本程序,解析Javascript脚本,运行代码;
  • JS引擎一直等待着任务队列中任务的到来,然后加以处理,一个Tab页(renderer进程)中无论什么时候都只有一个JS线程在运行JS程序;
  • 注意:GUI渲染线程与JS引擎线程的互斥关系,所以如果JS执行的时间过长,会造成页面的渲染不连贯,导致页面渲染加载阻塞。

3、事件触发线程

  • 归属于浏览器而不是JS引擎,用来控制事件循环(可以理解,JS引擎自己都忙不过来,需要浏览器另开线程协助);
  • 当JS引擎执行代码块如setTimeOut时(也可是来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等),会将对应任务添加到事件触发线程中;
  • 当对应的事件符合触发条件被触发时,该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理;
  • 注意:由于JS的单线程关系,所以这些待处理队列中的事件都得排队等待JS引擎处理(当JS引擎空闲时才会去执行);

4、定时器触发线程

  • 即setInterval与setTimeout所在线程;
  • 浏览器定时计数器并不是由JS引擎计数的,因为JS引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确性;
  • 因此使用单独线程来计时并触发定时器,计时完毕后,添加到事件队列中,等待JS引擎空闲后执行,所以定时器中的任务在设定的时间点不一定能够准时执行,定时器只是在指定时间点将任务添加到事件队列中;
  • 注意:W3C在HTML标准中规定,定时器的定时时间不能小于4ms,如果是小于4ms,则默认为4ms。

5、异步http请求线程

  • XMLHttpRequest连接后通过浏览器新开一个线程请求;
  • 检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将回调函数放入事件队列中,等待JS引擎空闲后执行;

    综上所述,浏览器各进程线程关系大致如下图: 浏览器进程和线程关系图

JS为什么是单线程?

JavaScript的主要用途主要是用户互动,和操作DOM。线程之间资源共享,相互影响,如果JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时这两个节点会有很大冲突,为了避免这个冲突,所以决定了它只能是单线程,否则会带来很复杂的同步问题。此外HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程(GUI线程, 异步HTTP请求线程, 定时触发器线程...),但是子线程完全受主线程控制,这个新标准并没有改变JavaScript单线程的本质。

JS运行机制

接下来分析分析JS引擎的运行机制:

  • 主线程(我理解为JS引擎线程)运行时,形成一个执行栈;
  • 事件触发线程管理着一个任务队列,执行栈中的代码调用某些api时,它们会在任务队列中添加各种事件(当满足触发条件后,如ajax请求完毕,定时器到点时);
  • 执行栈中任务执行完毕(JS引擎线程空闲),系统读取任务队列,将任务添加到执行栈中,开始执行; 浏览器线程合作

图片较大,原图访问:浏览器线程合作

到此,基本上把浏览器的线程进程问题理清了。
本文借鉴了一些大神的博文,加之我自己的理解,有叙述或理解不准确之处,欢迎指正,感谢!

参考文章链接:
浏览器的运行机制—2.浏览器都包含哪些进程?
浏览器的多线程与js引擎的单线程
从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理

相关文章

  • 浏览器进程

    浏览器是多进程的. 浏览器的渲染进程是多线程的。js是阻塞单线程的。Browser进程:浏览器的主进程(负责协调,...

  • 浏览器为契机贯穿前端知识点-大纲

    浏览器工作原理分为以下几部分: 分析浏览器份额,种类,理解浏览器是多进程还是多线程的,有哪些常驻进程和常驻线程,如...

  • 进程-线程-事件循环

    19.1 进程和线程 19.2 浏览器中的Javascript线程 浏览器的每一个tab页面就会开启一个新的进程,...

  • js有趣的事件循环

    进程&线程 浏览器是多线程的,JS是单线程的(浏览器只分配一个线程来执行JS) 进程大线程小:一个进程中包含多个线...

  • Javascript的循环机制

    总结: 浏览器是多进程的; 其中一个进程是浏览器渲染进程;浏览器渲染进程包括多个线程; 其中一个线程是 JS引擎线...

  • 浏览器的进程、线程、Web Worker及Event Loop

    进程和线程 系统会为进程分配cpu和内存每个进程至少包含一个线程不同进程之间也可以通信,不过代价较大 浏览器是多进...

  • js运行机制

    进程与线程 进程是cpu资源分配的最小单位,进程可以包含多个线程。 浏览器就是多进程的,每打开的一个浏览器窗口就是...

  • 2019-04-29 JavaScript的事件队列

    浏览器的渲染进程 浏览器的渲染进程(默认每个Tab页面一个渲染进程,互不影响)是多线程的,这个进程有以下主要线程:...

  • 浏览器原理1:绘制原理

    [toc] 一、浏览器的常用进程 1.进程和线程的区别 线程可以共享地址空间和数据.而进程独享地址空间和数据. 线...

  • 解析浏览器打开网页过程

    浏览器是什么,浏览器是用户用来查看网页的软件程序,它是由多个进程构成,那么什么是进程?什么又是线程呢? 进程与线程...

网友评论

    本文标题:浏览器的线程和进程

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