游览器的进程和线程

进程和线程的区别

CPU

计算机的核心,其负责承担计算机的计算任务(可以比喻为一个工厂)。

进程

CPU资源分配的最小单位,是能拥有资源和独立运行的最小单位。(可以比喻为工厂车间,是一个工厂任务的环节)任一时刻,CPU总是运行一个进程,其他进程处于非运行状态。

线程

CPU调度的最小单位,是建立在进程基础上的一次程序运行单位,属于单个的程序执行流,是一个进程中代码的不同执行路线。(可以比喻为一个车间的工人组成的一个个任务小组,不同的执行流,协同完成一个任务)

总述

一个进程中可以拥有多个线程,同一进程下的各个线程之间共享程序的内存空间(包括代码段、数据集、堆等)及一些进程级的资源。虽然不同进程之间也可以通信,不过代价较大。(可以在电脑的任务管理器中查看进程)

浏览器是多进程的

概述

  1. 浏览器之所以能够运行,是因为系统给它的进程分配了资源(cpu和内存)。
  2. 每打开一个Tab页,就创建了一个独立的浏览器进程,每个进程相互独立。(可以在Chrome的任务管理器上验证tab页进程)

多进程的好处

  1. 不会因为一个tab页崩溃,导致其他tab页也被影响。
  2. 相对于线程,进程之间是不共享资源和地址空间的,所以也不会存在太多的安全问题。

包含的进程种类

  • Browser进程——浏览器的主进程,负责协调、主控,只有一个
  • 第三方插件进程——每种类型的插件对应一个进程,仅当使用该插件时才创建
  • GPU进程——最多一个,用于3D绘制等
  • 浏览器渲染进程——也就是浏览器内核

Browser进程与渲染进程的通信

  1. 如果打开任务管理器,然后打开一个浏览器,就可以看到任务管理器中出现了两个进程,一个是主控进程,一个则是打开Tab页的渲染进程
  2. 整个过程如下:
1.Browser进程收到用户请求,首先需要获取页面内容,随后将该任务通过RendererHost接口传递给Render进程。
2.Renderer进程的Renderer接口收到消息,简单解释后,交给渲染线程,然后开始渲染。
3.渲染线程接收请求,加载网页并渲染网页,这其中可能需要Browser进程获取资源和需要GPU进程来帮助渲染。
4.当然可能会有JS线程操作DOM(这样可能会造成回流并重绘)
5.最后Render进程将结果传递给Browser进程
6.Browser进程接收到结果并将结果绘制出来
  • 如图所示

游览器内核是多线程的

常驻线程

  • GUI 渲染线程——负责渲染浏览器界面,解析HTML,CSS
  • JavaScript引擎线程——负责处理Javascript脚本程序
  • 定时触发器线程——处理setInterval与setTimeout任务
  • 事件触发线程——处理事件消息,控制事件循环
  • 异步http请求线程——处理XMLHttpRequest异步请求

线程之间的关系

GUI渲染线程与JS引擎线程互斥

  1. 由于js可以DOM,如果在修改这些元素属性同时渲染界面(即JavaScript线程和UI线程同时运行),那么渲染线程前后获得的元素数据就可能不一致了。
  2. 因此为了防止渲染出现不可预期的结果,浏览器设置GUI渲染线程与JavaScript引擎为互斥的关系,当JavaScript引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到引擎线程空闲时立即被执行

js为什么会阻塞页面加载

  1. 由于GUI渲染线程与JavaScript执行线程是互斥的关系,当浏览器在执行JavaScript程序的时候,GUI渲染线程会被保存在一个队列中,直到JS程序执行完成,才会接着执行。
  2. 因此如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉

WebWorker与SharedWorker

  • WebWorker——运行在web后台的线程,相当于js引擎向浏览器申请开一个子线程,由浏览器所开的,完全受主线程控制,而且不能操作dom

  • SharedWorker——是浏览器所有页面共享的,不能采用与Worker同样的方式实现,因为它不隶属于某个Render进程,可以为多个Render进程共享使用

  • WebWorker与SharedWorker本质上就是进程和线程的区别,SharedWorker由独立的进程管理,WebWorker只是属于render进程下的一个线程

参考

posted @ 2018-10-22 13:13  戡玉  阅读(...)  评论(... 编辑 收藏