进程和线程
- 进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小单位)
- 线程是cpu调度的最小单位(线程是建立在进程的基础上的一次程序运行单位,一个进程中可以有多个线程)
进程之间互相独立。线程是不能单独存在的,它是由进程来启动和管理的。
一个进程就是一个程序的运行实例。详细解释就是,启动一个程序的时候,操作系统会为该程序创建一块内存,用来存放代码、运行中的数据和一个执行任务的主线程,我们把这样的一个运行环境叫进程。线程是依附于进程的,而进程中使用多线程并行处理能提升运算效率。
进程和线程的关系
- 进程中任意一个线程执行出错,都会导致整个进程的崩溃
- 线程之间共享进程中的数据
- 当一个进程关闭之后,操作系统会回收进程所占用的内存
- 进程之间的内容相互隔离
一个进程如果崩溃了,或者挂起了,是不会影响到其他进程的。如果进程之间需要进行数据的通信,就需要使用用于进程间通信(IPC)的机制
浏览器是多进程的
一般每打开一个Tab页,就相当于创建了一个独立的浏览器进程。但有时会进行进程合并。
浏览器的四大进程
- Browser进程:浏览器的主进程(负责协调、主控)只有一个
- 负责浏览器界面显示,与用户交互。如前进,后退等
- 负责各个页面的管理,创建和销毁其他进程
- 将
Renderer
进程得到的内存中的Bitmap,绘制到用户界面上 - 网络资源的管理,下载等
- 第三方插件进程:一个插件对应一个进程,当使用该插件时才创建
- GPU进程:最多一个,用于3D绘制等
- 浏览器渲染进程(
Renderer
进程,内部是多线程的)。默认每个Tab页面一个进程,互不影响。- 页面渲染,脚本执行,事件处理等。排版引擎 Blink 和
JavaScript
引擎 V8 都是运行在该进程中 - 出于安全考虑,渲染进程都是运行在沙箱模式下
- 页面渲染,脚本执行,事件处理等。排版引擎 Blink 和
另外,在最新的Chrome中,主进程中的网络线程被独立出来,成为一个单独的进程。该进程主要负责页面的网络资源加载。
关于浏览器渲染进程
- GUI渲染线程
- 负责渲染浏览器界面,解析HTML,CSS,构建DOM树和
RenderObject
树,布局和绘制等。 - 当界面需要重绘(
Repaint
)或由于某种操作引发回流(Reflow
)时,该线程就会执行 - 注意,GUI渲染线程与JS引擎线程是互斥的,当JS引擎执行时GUI线程会被挂起(相当于被冻结了),GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
- JS引擎线程
- 也称为JS内核,负责处理
Javascript
脚本程序。(例如V8引擎) - JS引擎线程负责解析
Javascript
脚本,运行代码。 - JS引擎一直等待着任务队列中任务的到来,然后加以处理,一个Tab页(
renderer
进程)中无论什么时候都只有一个JS线程在运行JS程序 - 同样注意,GUI渲染线程与JS引擎线程是互斥的,所以如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞
- 事件触发线程
- 归属于浏览器而不是JS引擎,用来控制事件循环(可以理解,JS引擎自己都忙不过来,需要浏览器另开线程协助)
- 当JS引擎执行代码块如
setTimeOut
时(也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等),会将对应任务添加到事件线程中 - 当对应的事件符合触发条件被触发时,该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理
注意,由于JS的单线程关系,所以这些待处理队列中的事件都得排队等待JS引擎处理(当JS引擎空闲时才会去执行)。
- 定时触发器线程
- 传说中的
setInterval
与setTimeout
所在线程 - 浏览器定时计数器并不是由
JavaScript
引擎计数的,(因为JavaScript
引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确) - 因此通过单独线程来计时并触发定时(计时完毕后,添加到事件队列中,等待JS引擎空闲后执行)
注意,W3C在HTML标准中规定,规定要求setTimeout
中低于4ms的时间间隔算为4ms。
- 异步http请求线程
- 在
XMLHttpRequest
在连接后是通过浏览器新开一个线程请求 - 将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将这个回调再放入事件队列中。再由
JavaScript
引擎执行。
关于WebWorker
- 创建
Worker
时,JS引擎向浏览器申请开一个子线程(子线程是浏览器开的,完全受主线程控制,而且不能操作DOM),这个子线程属于Render进程 - JS引擎线程与
worker
线程间通过特定的方式通信(postMessage
API,需要通过序列化对象来与线程交互特定的数据) WebWorker
只属于某个页面,不会和其他页面的Render
进程(浏览器内核进程)共享
Worker
可以理解是浏览器给JS引擎开的外挂,专门用来解决那些大量计算问题。
关于SharedWorker
SharedWorker
是浏览器所有页面共享的,不能采用与Worker
同样的方式实现,因为它不隶属于某个Render
进程,可以为多个Render
进程共享使用。
SharedWorker
由独立的进程管理。
关于硬件加速
即生成复合图层。在GPU中,各个复合图层是单独绘制的,会不影响。因此创建复合图层可以减少另一图层上的重绘和回流。
大量使用复合图层会使资源消耗过度,页面反而变卡。
注意点:
webkit CSS3中,如果这个元素添加了硬件加速,并且index层级比较低,那么在这个元素的后面其它元素(层级比这个元素高的,或者相同的,并且
relative
或absolute
属性相同的),会默认变为复合层渲染,如果处理不当会极大的影响性能
因此使用硬件加速时,尽可能地使用index
。
方式:
- 最常用的方式:
translate3d
、translateZ
opacity
属性/过渡动画(需要动画执行的过程中才会创建合成层,动画没有开始或结束后元素还会回到之前的状态)- will-chang属性(这个比较偏僻),一般配合
opacity
与translate
使用(而且经测试,除了上述可以引发硬件加速的属性外,其它属性并不会变成复合层) <video>``<iframe>``<canvas>``<webgl>
等元素- 其它,譬如以前的
flash
插件