Web标准与前端开发之浏览器原理| 青训营笔记

557 阅读7分钟

这是我参与「第四届青训营 」笔记创作活动的第5天

写在前面:今天课程中老师推荐课下学习此篇博客,来深入了解浏览器的原理,所以打算写一些读书笔记,这也是对课堂内容的一个记录吧!此篇博客共分为四个部分,所以此篇笔记也会分为四个部分

这是深入理解现代浏览器的第一部分:

为了理解浏览器的运行环境需要去理解计算机的部件和功能

CPU、GPU、Memory、muti-process architecture(多进程架构)

  • 深入chrome browser 从一个高的层面去看底层
  • 第一篇博客的目的也是为了介绍常用的计算机术语和chrome的多进程架构

计算机的核心是CPU和GPU

1. CPU:center processing unit 中央处理单元

cpu就像是我们的大脑,它可以被描述为一个办公室,它可以one by one(逐步的)处理传进来的任务(无论是从计算还是到渲染) 他知道如何去响应请求。

在过去那个生产力和技术能力没那么发达的时候,计算机的芯片都是单核心的,多核心的出现是在20世纪初,但早在上世纪80年代,多核心的概念就已经出现了!

单核心就是一个芯片上只有一个核心,但是如今你总是能看到超过单核心的芯片了,他们为计算机提供了更高的算力。

2. GPU:Graphics Processing Unit 图形处理单元

是计算机中另一个重要的部分,他不像CPU那样,他更擅长在多核心中处理简单的任务。就像他的名字那样:用来处理图形的,快速的渲染和流畅的交互。

当你打开一个应用,CPU和GPU同时会进行工作,操作系统负责提供一个机制,去操作(mechanisms)applications run the CPU and GPU

执行程序在进程和线程(Executing program on process and thread)

1. Process:

  • 进程能被描述为applications的执行程序

2. Thread

  • 线程是住在进程内,用来处理进程中程序的任何部分,进程内的资源都是可以被共享的。

  1. 当你开启一个应用,一个进程就被创造出来了。程序可能创造多个线程去工作,这是一个可选项。在进程创建的同时,操作系统(Operating System)会为进程(process)分配一块内存用于保存应用的状态,这块内存是私有的一片空间。 应用关闭,进程结束,内存也会被Operating System所释放掉!

  2. 一个进程可以请求操作系统开启另一个进程去执行不同的任务,这个新进程会被分配新的内存空间。不同的进程是不允许资源共享的,但是可以使用IPC(inter process communication)去进行通信。实际上,有很多应用程序是按照此种方式进行设计的,他有个非常显著的有点:当某功能的进程宕机,它可以在不影响(不停止)该application其他进程(其他功能)的前提下进行restart。

image.png 使用IPC在进程间通信

浏览器的架构

不同的架构的实现细节是不同的,浏览器的建造没有一个特殊的标准,所以一个浏览器有可能和另一个浏览器完全不同! image.png

1. 单进程多线程

2. 多进程、少线程、IPC

该博客采用了Chrome的浏览器讲解(多进程):

chrome是采用进程和进程间的互相协调合作去处理application。对于渲染进程(Renderer process)来讲,他会创建出多个进程并分配给每个Tab(因为在Chrome上,每个Tab都会尽量的分配一个进程,它拥有独立的渲染进程)尽可能的,包括iframe。

image.png 图片也表明:有一个浏览器的主进程,还有其他的进程如Gpu进程,插件进程等

文字翻译:在渲染进程之下有多个层,这表明Chrome会建立(运行)多个渲染进程为了每个Tab页!

各个进程都做什么呢?

ProcessDo What
Browser控制应用的部分,如地址栏,前后退按钮,和一些不可见的,以及网络请求和文件访问(网络请求 依靠请求线程去实现)
Renderer控制Tab页内任何东西的展示
Plugin控制任何在网站上使用的插件,如VueTools等等
Gpu独立进程处理GPU任务,它被分开成不同的进程,因为它需要需要处理多个App的请求,并绘制在统一界面(surface)

image.png 实际上还有其他的进程运行在Browser上,如扩展进程(Extension Process)和辅助进程(Utility Process)

image.png

image.png

Chrome多进程架构的优点

  1. 由于Chrome是使用了多进程,并且为每个Tab都尽量的分配了独立的进程,如果突然有一个Tab页崩溃了,那么你只需要关闭这个Tab页即可,他不会影响到其他的Tab,这就是它的优点之一!
  2. 更加的私密化和沙箱化!同时也可以沙盒化的将功能分割到不同的进程中。

For example, the Chrome browser restricts arbitrary file access for processes that handle arbitrary user input like the renderer process. 例如,浏览器严格限制处理任意用户输入的进程(如渲染器进程)的任意文件访问 简言之就是浏览器会限制进程随意读取文件的能力。


值得优化的点

但是,由于进程都有自己的私有空间,所以他们经常包含相同的副本(例如都存在Javascript的解析引擎)。这意味着有更多的内存浪费,因为他们不能共享资源。为了节省内存,Chrome为进程的分配做了一个限制,它主要根据你的内存和CPU的算力决定。如果当浏览器运行吃力的时候,它会将多个Tab放进同一个进程!

Chrome 中的服务化(Servicification)

Chrome可能正在经历一次变革,将浏览器项目的每个部分作为一个服务去拆分为多个进程或者聚合(aggregate)为一个进程。

一个通用的想法就是:

  1. 当Chrome运行在一个强大的硬件之上,它可能会被分成每个不同的进程,以提供更强大的稳定性。
  2. 当运行在一个资源受限的设备上,Chrome会整合(consolidates)资源进一个进程,以节省内存空间。

图解:

即:

image.png

image.png

站点隔离(Isolation):

这是Chrome推出的新功能,它会为每个跨站的iframe分配新的渲染进程。

为什么要这样?

同源策略是网站安全模型,它确保一个站点不能在未接受同意的情况下接受来自另一个站点的内容,并且绕过此策略是进行安全攻击的主要目标。所以进程的隔离是最有效的方式去分割开站点,因为它是处于操作系统层面的隔离方式。

image.png

但是他并不是简单的进行了渲染进程的分配,他基本改变了iframe的通信方式,所以它的发布被工程师们成为重要的里程碑!

总结:

深入理解现代浏览器系列是非常重要的对于刚刚接触浏览器的原理的同学来讲!包括我自己(也是个菜菜),学完一遍总是记不住,即使我刚刚写完了这篇笔记!

那么再来简单的总结一下这系列的第一篇的主要内容

  1. 我们学习了CPU以及GPU在运行程序时候充当的角色
  2. 以及程序是如何运行在CPU和GPU之上的:由操作系统分配进程运行在硬件之上并提供可操作性。
  3. 进程和线程是什么
  4. 谷歌浏览器架构的介绍

那么这系列的第一部分就算是结束了!Bye!

博客地址:

# Inside look at modern web browser