chrome浏览器工作原理

Chrome中主要的进程有四个：

浏览器进程 (Browser Process)：负责浏览器的TAB的前进、后退、地址栏、书签栏的工作和处理浏览器的一些不可见的底层操作，比如网络请求和文件访问。

渲染进程 (Renderer Process)：负责一个Tab内的显示相关的工作，也称渲染引擎。

插件进程 (Plugin Process)：负责控制网页使用到的插件

GPU进程 (GPU Process)：负责处理整个应用程序的GPU任务

由于进程与进程之间内存空间独立，所以需要进程之间的通信需要使用新的方式——IPC通信

4个进程之间的关系：

当我们要浏览一个网页时，输入URL，浏览器进程向URL发送请求，获取到HTML内容后将其交给渲染进程，渲染进程解析HTML内容，解析中遇到新的网络资源再返回给浏览器进程加载，同时告知浏览器进程需要通知插件进程加载插件。解析完成后，渲染进程计算得到图像帧，将图像帧交给GUP进程，GUP进程将图像显示出来。

多进程架构的好处：

1.容错性高，渲染引擎容易崩溃，多进程的每个页面的渲染引擎互相之间不受影响；

2.安全性高，不同进程的权限不同，并为其提供沙盒运行环境，使其更加安全可靠；

3.响应速度快，单进程架构中各个任务互相竞争抢夺CPU资源，响应速度缓慢，多进程架构规避了这一点。

导航过程：

网页加载过程：

tab以外的大部分工作都是浏览器进程负责的，分为几个不同的工作线程：

UI线程：控制浏览器上的按钮以及输入框；

网络线程：处理网络请求，获取网络数据；

storage线程：控制文件的访问；

第一步：处理输入

在地址栏输入内容按下回车，UI线程会判断输入的内容是搜索关键词还是URL，并作出对应的处理；

第二步：开始导航

UI线程把对应任务交给网络线程，tab前的图标展示为加载中状态，网络线程进行DNS寻址，建立TLS连接等操作进行资源请求，如果服务器301重定向，则告知UI线程进行重定向再进行新的网络请求。

第三步：读取响应

网络线程接收到服务器的响应后解析HTTP报文，根据响应头中的Content-Type字段来确定响应主体的媒体类型，如果媒体类型是HTML文件，就将相应数据交给渲染进程进行接下来的工作，如果是zip等文件，就会把数据交给下载管理器。（与此同时，浏览器会进行Safe Browsing安全检查展示警告页和CORB检查确定敏感跨站数据不被发送至渲染进程）

第四步：查找渲染进程

上面的准备都完成之后，网络线程通知UI线程数据已经准备好了，此时UI线程会查找到一个UI进程进行网页渲染。（第二步开始的时候浏览器已经预先查找和启动了一个渲染进程）

第五步：提交导航

到了这一步，数据和渲染进程都准备好了，浏览器进程会向渲染进程发送IPC消息来确认导航，同时将准备好的数据发送给渲染进程，渲染进程接收到数据后，又发送IPC消息给浏览器进程，表示导航已经提交了，页面开始加载。这时导航栏会更新，安全提示符更新（小锁），访问历史列表（history tab)更新，即可通过前进和后退来切换该页面。

第六步：初始化加载完成

提交导航完成后，渲染进程开始记载资源及渲染页面，当页面渲染完成后（页面及内部的iframe都触发了onload事件），回想浏览器进程发送IPC消息，此时UI线程会停止tab中加载的图标。

网页渲染原理：

五个步骤：

第一步：处理 HTML 并构建 DOM 树。

引擎解析HTML，解析的结果会成为一颗DOM树，这颗DOM树将会作为下个阶段渲染树状图的输入以及成为网页和脚本的交互界面（js操作DOM）

当解析器到达script标签时，发生下面四件事情：

1.html解析器停止解析,

2.如果是外部脚本，就从外部网络获取脚本代码

3.将控制权交给js引擎，执行js代码

4.恢复html解析器的控制权

由于<script>标签是阻塞解析的，将脚本放在网页尾部会加速代码渲染。

defer和async属性也能有助于加载外部脚本。

defer使得脚本会在dom完整构建之后执行；

async标签使得脚本只有在完全available才执行，并且是以非阻塞的方式进行的

第二步：处理 CSS构建 CSSOM 树。

 css样式表是阻塞的，当cssom树建立好之后才会进行下一步的解析渲染。

通过以下手段可以减轻cssom带来的影响：

1.将script脚本放在页面底部

2.尽可能快的加载css样式表

3.将样式表按照media type和media query区分，这样有助于我们将css资源标记成非阻塞渲染的资源。

4.非阻塞的资源还是会被浏览器下载，只是优先级较低

第三步：将 DOM 与 CSSOM 合并成一个渲染树。

第四步：根据渲染树来布局，计算每个节点的位置。

布局(layout)：定位坐标和大小，是否换行，各种position, overflow, z-index属性

第五步：调用 GPU 绘制，合成图层，显示在屏幕上。

将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting

渲染性能优化：

Load 和 DOMContentLoaded 区别：

Load 事件触发代表页面中的 DOM，CSS，JS，图片已经全部加载完毕。

DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析，不需要等待 CSS，JS，图片加载

图层：

一般来说，可以把普通文档流看成一个图层。特定的属性可以生成一个新的图层。不同的图层渲染互不影响，所以对于某些频繁需要渲染的建议单独生成一个新图层，提高性能。但也不能生成过多的图层，会引起反作用。

以下几个属性可以生成新图层：

translate3d、translateZ

will-change

video、iframe

通过动画实现opacity动画转换

position: fixed

重绘和回流：

重绘是当前节点布局不发生变化但外观发生变化的，比如color的改变就是重绘

回流是布局或者几何属性需要改变。

（重绘和回流属于渲染的一部分，但这两个步骤对于性能影响颇大，

回流必定发生重绘，重绘不一定引发回流。回流成本很大，改变深层次的节点很可能导致父节点的一系列回流。）

下面几个动作会导致性能：

改变window大小；

改变字体；

添加或删除样式；

文字改变；

定位或者浮动；

盒子模型；

 

参考文献：

https://segmentfault.com/a/1190000022633988

https://www.jianshu.com/p/76bb929eae01