浏览器进程和线程

浏览器进程和线程

进程与线程

面试题

• 进程与线程的区别
• 进程之间的通信方式
• 浏览器的标签页是进程还是线程
• 多标签之间如何通信

进程与线程

• 进程是资源分配的最小单位，进程是程序执行的一次记录，进程之间相互独立。
• 线程是cpu调度的最小单位，一个进程可以由一个或者多个线程组成，一个进程下的线程之间共享进程的内存空间。

进程间的通信方式

• 管道通信
• 消息队列
• 共享内存
• socket

浏览器的多进程架构

浏览器的五大进程

• 浏览器主进程：主要负责浏览器的界面显示、用户交互、子进程的管理、存储管理等
• 网络进程：负责页面网络资源的加载（静态资源、动态资源等）
• GPU进程：负责界面的3D效果等渲染、加速渲染过程。
• 插件进程：主要负责插件的运行，由于浏览器的插件容易崩溃，这样可以保证插件不会影响浏览器和页面展示。
• 渲染进程：负责将html、css、js语言渲染到页面，转换成用户可以交互的网页。渲染进程主要由js引擎线程、GUI渲染线程、计时器线程、异步http请求线程、事件触发线程这五大线程组成。

渲染进程

• JS引擎线程：负责处理js脚本语言，执行js脚本代码。依靠任务队列来进行js代码的执行，该线程一直等待任务队列中任务的到来，然后进行处理。
• GUI渲染线程：主要解析html、css，构建渲染树，布局和绘制等。
• 异步http网络请求线程：负责异步请求，XMLHttpRequest在连通后，通过浏览器新建一个线程请求，状态变化时，将回调函数放入事件队列，等待JS执行。
• 计时器线程：负责管理定时器，定时器结束后将回调函数放入事件队列，等待JS执行。
• 事件触发线程：负责触发事件管理，控制事件循环，当一个事件被触发时，该线程将事件添加到处理队列的队尾，等待JS线程执行。事件可以是定时任务、鼠标点击、AJAX异步请求等。

浏览器的标签页是一个进程，各标签页之间都是独立的内存空间，互不影响。

浏览器多标签之间通信（进程之间通信）

方法	范围	优缺点
localStorage	同一浏览器的同源窗口可以通过storage事件监听localStorage的变化	缺点：存储大小为5M，只能共享同一浏览器下的同源窗口
websocket	用在与服务器建立了websocket的页面。当pageA中有数据变化，向服务器端发送一条消息，服务器端再将这条消息发送给pageB，实现两个页面通信。	理论上可以实现任何数据的跨域共享，但是需要服务器配合，会增加服务器的压力

JS的多线程webWorker

js的代码执行是单线程的，但是可以开启webworker多线程。

webworker是多线程解决方案，在独立于主线程的后台运行，可以用来处理比较耗时的复杂计算，不能用来处理DOM，DOM的处理还是用js单线程执行。
用处：在独立的线程中处理耗时的运算，避免JS引擎线程阻塞视图的渲染。
特点：

• 没有可以操作DOM的API，不能修改DOM，主要用于计算。
• 独立于主线程的线程，不能与主线程直接通信，通过postMessage消息通信。
• 同源限制：webworker运行的脚本必须与主线程的脚本文件同源，否则存在跨域问题。

postMessage通信

• 主线程通过postMessage通知worker线程。
• worker线程用onMessage接收消息，然后做后续计算，完成后依然用postMessage通知主线程。
• 主线程通过onMessage来监听消息。