前端百题斩【029】——原来浏览器中存在五类进程

写该系列文章的初衷是“让每位前端工程师掌握高频知识点,为工作助力”。这是前端百题斩的第29斩,希望朋友们关注公众号“执鸢者”,用知识武装自己的头脑。

浏览器已经从单进程浏览器阶段进化到多进程浏览器阶段,那么浏览器的多进程指的是哪些进程呢?下面一起来看看。

image-20210704103509805.png
img
  1. 浏览器进程

打开浏览器后只有一个,主要负责界面显示、用户交互、子进程关闭,除此之外,还会提供存储等功能。

  1. 渲染进程

其主要作用是页面渲染、脚本执行、事件处理等,默认情况下,Chrome会为每个Tab标签创建一个渲染进程(注意:出于安全考虑,渲染进程都运行在沙箱模式下)。对于渲染进程其是由多线程组成,多线程包含以下几个:

(1)GUI渲染线程

主要负责渲染浏览器界面,解析HTML、CSS、构建DOM树和RenderObject树,布局和绘制等。当界面需要重绘或重排时,该线程就会执行。

(2)JS引擎线程

主要负责解析并执行JS代码。

(注意:JS引擎线程和GUI渲染线程是互斥关系,当JS引擎线程执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎空闲时立即执行,所以JS执行的时间过程,就会造成页面的渲染不连贯,导致页面渲染加载阻塞)

(3)事件触发线程

用来控制事件循环,当js引擎执行代码时,会将对应的任务(例如Ajax任务、鼠标点击……)添加到事件线程中,当事件被触发时,事件线程会把事件添加到待处理事件队列的队尾,等待js引擎的处理。

(4)定时触发器线程

setInterval和setTimeout所在的线程,浏览器定时计数器并不是由JavaScript引擎计数的,通过单独的线程来计时并触发定时。(W3C在HTML标准中规定,setTimeout中低于4ms的时间间隔算4ms)

(5)异步http请求线程

用于处理请求XMLHttpRequest,在连接后是通过浏览器新开一个线程请求。

  1. GPU进程

GPU进程只有一个。GPU使用初衷是为了实现3D CSS的效果,知识随着网页、Chrome的UI界面都选择采用GPU来绘制,使得GPU成为浏览器的普遍需求,最后,Chrome在其多进程架构上也引入了GPU进程。

  1. 网络进程

只有一个,主要负责页面的网络资源加载。

  1. 插件进程

每个类型的插件对应着一个进程,主要负责插件的运行。因为插件易崩溃,所以需要通过插件进程来隔离,以保证插件进程崩溃不会对浏览器和页面造成影响。

1.如果觉得这篇文章还不错,来个分享、点赞、在看三连吧,让更多的人也看到~

2.关注公众号执鸢者,领取学习资料,定期为你推送原创深度好文

3.关注公众号进群,里面大佬多多,一起向他们学习

1. 前端百题斩[001]——typeof和instanceof

2. 前端百题斩【002】——js中6种变量声明方式

3. 前端百题斩【003-004】——从基本类型、引用类型到包装对象

4. 前端百题斩【005】—— js中9种遍历对象的方法

5. 前端百题斩【006】——js中三类字符串转数字的方式

6. 前端百题斩【007】——js中必须知道的四种数据类型判断方法

7. 前端百题斩【008-009】——从JavaScript的代码执行过程到函数执行过程

8. 前端百题斩【010】——通俗易懂的JavaScript执行上下文

9. 前端百题斩【011】——通俗易懂的变量对象

10. 前端百题斩【012】——js中作用域及作用域链的真面目

11. 前端百题斩【013】——用“闭包”问题征服面试官

12. 前端百题斩【014】——js中的这些“this”指向都值得了解

13. 前端百题斩【015】——快速手撕call、apply、bind

14. 前端百题斩【016】——原型、构造函数和实例之间的奇妙关系

15. 前端百题斩【017】——一基础、二主线、双机制理解原型链

16. 前端百题斩【018】——从验证点到手撕new操作符

17. 前端百题斩【019】——数组中方法原理早知道

18. 前端百题斩【020】——竟然有五种方式实现flat方法

19. 前端百题斩【021】——通俗易懂的防抖与节流

20. 前端百题斩【022】——开拓思路之三种方式实现字符串转驼峰

21. 前端百题斩【023】——赋值、浅拷贝、深拷贝大PK

22. 前端百题斩【024】——我从浏览器控制台看到了五种存储方式

23. 前端百题斩【025】——原来跨域也是可以进行分类的

24. 前端百题斩【026】——浏览器出让安全性造就JSONP

25. 前端百题斩【027】——解决跨域的常用利器CORS全解

26. 前端百题斩【028】——浏览器中的请求们

27. 一文搞定Diff算法

28. 百度、小红书三面,均遇“赛马”问题

29. 十五张图带你彻底搞懂从URL到页面展示发生的故事

30. 一文搞懂Cookie、Storage、IndexedDB

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值