浏览器工作原理与实践学习笔记（一）宏观视角下的浏览器

一、Chrome架构

进程和线程

计算机中的并行处理就是同一时刻处理多个任务

1.定义

一个进程就是一个程序的运行实例

2.进程和线程之间的关系

（1）进程中的任意一线程执行出错，都会导致整个进程的崩溃
（2）线程之间共享进程中数据
（3）当一个进程关闭之后，操作系统会回收进程占用的所有内存
（4）进程之间的内容相互隔离

3.早期浏览器

早期的浏览器都是单进程浏览器，所有的操作都在浏览器主进程中进行，多个功能模块运行在一个进程里，是导致单进程浏览器不稳定、不流畅和不安全的一个主要因素。

4.现代浏览器

现在浏览多是多进程浏览器，以Chrome浏览器为例，主要包含以下几个进程
（1）浏览器进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。
（2）渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页。
（3）GPU 进程。 绘制浏览器UI和网页内容。
（4）网络进程。主要负责页面的网络资源加载。
（5）插件进程。主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

5.多进程带来的问题

（1）更高的资源占用
（2）更负责的体系架构

二、TCP协议

1.IP（网际）协议

通过IP地址信息把数据包送达目的主机

2.UDP(用户数据包）协议

通过端口号把数据包发送给正确的程序

3.TCP(传输控制）协议

一种面向连接的、可靠的、基于字节流的传输层通信协议

（1）使用UDP传输数据的问题
数据包在传输的过程中容易丢失
大文件会被拆分成很多小的数据包来传输，这些小的数据包会经过不同的路由，并在不同的时间到达接收端，而UDP协议并不知道如何组装这些数据包，从而包这些数据包还原成完整的文件。
（2）TCP协议的特点
对于数据包丢失的情况，TCP提供重传机制
TCP引入了数据包排序机制，用来保证把乱序的数据包组合成一个完整的文件

三、HTTP请求流程

HTTP协议是一种允许浏览器向服务器获取资源的协议，是Web的基础

1.浏览器端发起 HTTP 请求流程

（1）构建请求
首先，浏览器构建请求行信息，构建好后，浏览器准备发起网络请求
（2）查找缓存
在真正发起网络请求之前，浏览器会在浏览器缓存中查询是否有要请求的文件。
（3）准备IP地址和端口
浏览器首先会请求DNS返回对应域名的IP，如果已经被浏览器DNS缓存过了，会直接返回对应IP，否则会去向DNS服务器查询。再拿到IP地址之后，获取URL中的端口号，否则默认是HTTP协议的80端口
（4）等待TCP队列
在Chrome浏览器下，同一域名同时最多只能建立6个TCP连接，超出的TCP连接会进入派对等待状态，直至进行中的请求完成。
（5）建立TCP连接
在HTTP工作开始之前，浏览器首先通过TCP与服务器建立连接
（6）发送HTTP请求
在连接建立完成之后，浏览器向服务器发送HTTP请求。
首先发送请求行，其中包含了请求方法、请求URI和HTTP协议，
再发送请求行命令之后，还要以请求头形式发送一下其他的信息，如浏览器的基础信息、Cookie等
如果使用Post方法，还需要通过请求体发送数据

2.服务器处理HTTP请求流程

（1）返回请求
当服务器处理完请求之后，将处理结果返回给浏览器
首先，返回响应行，包含协议版本和状态码，
发送完响应头之后，服务器就可以继续发送响应体的数据。
（2）断开连接
通常，一旦服务器向客户单反悔了请求数据，它就要关闭TCP连接。但是如果响应头中加入了keep-alive，则该连接将会被保持下去

四、导航流程

• 首先，浏览器进程接收到用户输入的URL请求，浏览器进程便将该URL转发给网络进程
• 然后，在网络进程中发起真正的URL请求
• 接着网络进程接收到了响应头数据，便解析响应头数据，并将数据转发给浏览器进程
• 浏览器进程接收到网络进程的响应头数据后，发送“提交导航”
• 渲染进程接收到“提交导航“的消息后，便开始准备接收HTML数据，接收数据的方式是直接和网络进程建立数据通道
• 最后渲染进程会向浏览器进程“确认提交”，这是告诉浏览器进程：“已经准备好接收和解析页面数据了”
• 浏览器进程接收到渲染进程“提交文档”的消息之后，便开始移除之前旧的文档，然后更新浏览器进程中的页面状态。
• 从输入URL到页面展示的过程中发生了什么

1.用户输入

当用户在地址栏中输入一个查询关键字时，地址栏会判断输入的关键字是搜索内容，还是请求的URL。

（1）如果是搜索内容，地址栏会使用默认的搜索引擎来合成新的带搜索关键字的URL。
（2）否则如果判断输入内容符合URL规则，那么地址栏会根据规则，把这段内容加上协议，合成完整的URL。

ps.在用户输入关键字并键入了回车之后，页面将会被替换成新的页面，但在这个过程发生之前，浏览器还给了当前页面一次执行beforeunload事件的机会。如果没有监听该事件或者同意了跳转事件的进行，将会继续执行该流程。

2.URL请求过程

（1）首先，网络进程会查找本地缓存是否缓存了该资源。如果有缓存资源，那么直接返回资源给浏览器进程。如果在缓存中没有查找到资源，那么直接进入网络请求流程。
（2）请求前的第一步是要进行 DNS 解析，以获取请求域名的服务器 IP 地址。如果请求协议是 HTTPS，那么还需要建立 TLS 连接。
（3）接下来就是利用 IP 地址和服务器建立 TCP 连接。连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。
（4）服务器接收到请求信息后，会根据请求信息生成响应数据（包括响应行、响应头和响应体等信息），并发给网络进程。等网络进程接收了响应行和响应头之后，就开始解析响应头的内容了。
（5）重定向，如果放回的状态码是301或者302，那么说明服务器需要浏览器重定向到其他URL。这时网络进程会从响应头的 Location 字段里面读取重定向的地址，然后再发起新的 HTTP 或者 HTTPS 请求，一切又重头开始了。
（6）否则，若为200，浏览器继续进行处理，首先处理返回的文件类型，通过响应头中的Content-type。
（7）确定文件类型后，准备渲染进程
ps.通常情况下，浏览器为一个标签页分配一个渲染进程。若两个标签页属于同一站点（使用相同的协议和根域名），则两个标签页共享同一个线程。
（8）提交文档，浏览器进程将网络进程接收到的HTML数据提交给渲染进程。

• 首先当浏览器进程接收到网络进程的响应头数据之后，便向渲染进程发起“提交文档”的消息
• 渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”；
• 等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程；
• 浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面。

（9）渲染阶段，一旦文档被提交，渲染进程便开始页面解析和子资源加载。

五、渲染流程

1.基本流程

（1）渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。
（2）渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。
（3）创建布局树，并计算元素的布局信息。
（4）对布局树进行分层，并生成分层树。
（5）为每个图层生成绘制列表，并将其提交到合成线程。
（6）合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
（7）合成线程发送绘制图块命令 DrawQuad 给浏览器进程。浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

2.重排、重绘和合成

（1）重排，如果修改了元素的几何位置属性，例如改变元素的宽度、高度等，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫重排。，重排需要更新完整的渲染流水线，所以开销也是最大的。
（2）重绘，如果修改了元素的背景颜色，那么布局阶段将不会被执行，因为并没有引起几何位置的变换，所以就直接进入了绘制阶段，然后执行之后的一系列子阶段，这个过程就叫重绘。相较于重排操作，重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。
（3）合成，如果更改了一个既不要布局也不要绘制的属性，渲染引擎将跳过布局和绘制，只执行后续的合成操作，我们把这个过程叫做合成。相对于重绘和重排，合成能大大提升绘制效率。