js 进程和线程(高阶)

点击打开视频讲解:https://www.bilibili.com/video/BV1Ea411D7VR/?vd_source=66e2692cc471862d6c3f85dc4b9ea5dd

进程和线程 概念

进程:程序的一次执行,它占有一片独有的内存空间
线程:是进程内的一个独立执行单元,是程序执行的一个完整流程,是CPU的最小的调度单元

单线程和多线程 概念

单线程:一个进程内有一个线程
多线程:一个进程内有多个线程

关于进程的相关知识

应用程序必须运行在某个进程的某个线程上
一个进程中至少有一个运行的线程:主线程,进程启动后自动创建
一个进程中也可以同时运行多个线程,即程序是多线程运行的
一个进程内的数据可以供其中的多个线程直接共享
多个进程之间的数据是不能直接共享的
线程池:保存多个线程对象的容器,实现线程对象的反复利用

线程和进程的优缺点

多线程的优点:(1)有效提升CPU的利用率;
多线程的缺点:(1)创建多线程开销;(2)线程间切换开销;(3)死锁与状态同步
单线程优点:顺序编程简单易懂 (js单线程运行 )
多线程缺点:效率低 (h5中Web Workers可以多线程运行)

浏览器运行是单线程还是多线程?

浏览器运行是多进程还是但进程? 有的是单进程(火狐 IE)多进程(chrome 新版IE)

定时器的回调函数是在分线程执行的吗?

在主线程执行的 js是单线程执行的

浏览器进程

浏览器作为一个计算机应用程序,如果打开浏览器默认进入一个空白页,相当于新起了一个浏览器的
主进程和GPU进程,如果再打开一个标签页,则又创建了一个渲染进程。
调出chrome的任务管理器(shift+esc或在标签栏空白处点右键),可以看到:
201904251257364.jpg
  • 浏览器是多进程的
  • 浏览器之所以能够运行,是因为系统给它的进程分配了资源(cpu、内存)
  • 浏览器每打开一个Tab页,就相当于创建了一个独立的浏览器进程。

浏览器多进程的优点

避免单个页面崩溃影响整个浏览器
避免第三方插件崩溃影响整个浏览器
多进程充分利用多核优势
方便使用沙盒模型隔离插件等进程,提高浏览器安全性
简单的说,浏览器多进程避免了一个页面或一个插件的崩溃导致整个浏览器的崩溃,
大大改善了用户体验。

PS:“沙盒”技术的实践运用流程是:让疑似病毒文件的可疑行为在虚拟的“沙盒”里充分表演,“沙盒”会记下它的每一个动作;当疑似病毒充分暴露了其病毒属性后,“沙盒”就会执行“回滚”机制:将病毒的痕迹和动作抹去,恢复系统到正常状态。如果您还不懂,那说的再简单一些。想象一下,在一个装满了平整细沙的盒子里,我们可以尽情随意地在上面作画、涂写,无论画的好坏,最后轻轻一抹,沙盒又回到了原来的平整状态。沙盒的魅力就在于他允许你出错,还可以给你改正的机会。

浏览器多进程的缺点

浏览器多进程提高用户体验的同时是要付出代价的,那就是对系统资源的消耗加大,特别是内存
的消耗。

浏览器有哪些进程

Browser进程

浏览器的主进程(负责协调、主控),只有一个,相当于浏览器的大脑,作用有:
    负责浏览器界面显示,与用户交互,如前进,后退等;
    负责各个页面的管理,创建和销毁其他进程;
    将渲染线程得到的内存中的位图渲染到用户界面上;
    网络资源的管理,下载等。

第三方插件进程

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

GPU进程

最多一个,负责3D绘制,只有当该页面使用了硬件加速才会使用它,来渲染页面。否则的话,
不使用这个进程,而是用Browser进程来渲染页面。

浏览器渲染进程(Renderer进程)

也称浏览器内核、Renderer进程(内部是多线程的),默认每个Tab页面一个进程,互不影响。主要作用为页面渲染,脚本执行,事件处理,任务队列轮询等。
浏览器有时会将多个渲染进程合并(譬如打开多个空白标签页后,会发现多个空白标签页被合并成了一个进程)。


222.jpg

前端重点:渲染进程(浏览器内核)

现在我们再来捋一下进程和线程,浏览器是多进程的,每打开一个tab页相当于创建了一个渲染进程,
每个渲染进程是又多线程的。
页面的渲染,JS的执行,事件的循环,都在渲染进程中进行。
渲染进程中的主要常驻线程

GUI渲染线程

负责渲染浏览器界面,解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等。
当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。

JS引擎线程

也称为JS内核,负责处理Javascript脚本程序。(例如V8引擎)
JS引擎线程负责解析Javascript脚本,运行代码。
JS引擎一直等待着任务队列中任务的到来,然后加以处理,浏览器无论什么时候都只有一个JS线程
在运行JS程序,JS是单线程的。

PS:GUI渲染线程与JS引擎线程是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行;如果JS执行的时间过长,会导致页面渲染被阻塞。

事件触发线程

接受浏览器里面的操作事件响应。如在监听到鼠标、键盘等事件的时候, 如果有事件处理函数,就将对应的任务压入任务队列(添加到待处理队列的队尾),等待JS引擎的处理。
事件触发线程管理着一个任务队列。

定时触发器线程

setInternal与setTimeout所在线程
浏览器定时计数器并不是由JavaScript引擎计数的,(因为JavaScript引擎是单线程的, 如果处于
阻塞线程状态就会影响记计时的准确)
因此通过单独线程来计时并触发定时(计时完毕后,添加到事件队列中,等待JS引擎空闲后执行)
注意,W3C在HTML标准中规定,规定要求setTimeout中低于4ms的时间间隔算为4ms。

异步http请求线程

在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将这个回调再放入事件
队列中。再由JavaScript引擎执行。

Browser进程和渲染进程的通信过程

就像前文中那样新打开谷歌浏览器,并打开任务管理器,可以看到:任务管理器中出现了三个进程,来了解一下浏览器的主进程和渲染进程是怎样通信的:

Browser进程收到用户请求(输入网址并回车),首先需要获取页面内容(譬如通过网络下载资源),
随后将该任务通过RendererHost接口传递给Render进程。

Renderer进程的Renderer接口收到消息,简单解释后,交给渲染线程,然后开始渲染。
    渲染线程接收请求,加载网页并渲染网页,这其中可能需要Browser进程获取资源和需要GPU
    进程来帮助渲染;
    可能会有JS线程操作DOM(这样可能会造成回流并重绘);
    最后Render进程将结果传递给Browser进程;
    
Browser进程接收到结果并将结果绘制出来
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,142评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,298评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,068评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,081评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,099评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,071评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,990评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,832评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,274评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,488评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,649评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,378评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,979评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,625评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,643评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,545评论 2 352

推荐阅读更多精彩内容