01宏观视角下的浏览器
Chrome的多进程架构
进程和线程
-
一个进程就是一个程序的运行实例。启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，这样的一个运行环境叫进程。
-
多线程可以并行处理任务，但线程是不能单独存在的，它是由进程来启动和管理的
并行处理：同一时刻处理多个任务，使用并行处理能大大提升性能
-
关系: 线程是依附于进程的，而进程中使用多线程并行处理能提升运算效率. 1. 进程中的任意一线程执行出错，都会导致整个进程的崩溃。
2. 当一个进程关闭之后，操作系统会回收所占用的内存。
3. 进程之间的内容相互隔离。
4. 线程之间共享进程中的数据。
多进程浏览器时代
- Chrome 进程架构
最新的 Chrome 浏览器包括：1 个浏览器主进程、1个GPU 进程、1个网络（NetWork）进程、多个渲染进程和多个插件进程。
-
功能:
-
浏览器主进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等
-
网络进程。面向渲染进程和浏览器进程等提供网络下载功能。
-
渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页。
因为渲染进程的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对系统进行攻击，所以运行在渲染进程里面的代码是不被信任的，
让渲染进程运行在安全沙箱里，就是为了保证系统的安全。和JavaScript引擎 V8 都是运行在该进程中。默认情况下，Chrome会为每个Tab标签创建一个渲染进程。
-
GPU 进程。 绘制UI界面
-
插件进程。主要是负责插件的运行(非必需
< 仅仅打开了1个页面会有4个进程？因为打开1个页面至少需要1个网络进程+1个浏览器进程+1个GPU进程以及 1 个渲染进程。 -
不足
- 更高的资源占用
- 更复杂的体系架构
-
未来面向服务的架构SOA
- 目标：构建一个更内聚、松耦合、易于维护和扩展的系统
Web 世界中的 TCP/IP 是如何工作的
FP（First Paint-衡量 Web 页面性能的重要指标
fp:从页面加载到首次开始绘制的时长
影响因素： 网络加载速度
数据的传输过程
-
- IP：把数据包送达目的主机
- IP:网际协议
IP 地址:计算机的地址,IP通过IP地址信息把数据包发送给指定的电脑
-
- UDP：把数据包送达具体应用
- UDP：用户数据包协议
端口号：UDP通过端口号把数据包分发给正确的程序
优缺点：UDP不能保证数据可靠性，但是传输速度却非常快
-
- TCP：保证了数据完整地传输
- TCP：面向连接的、可靠的、基于字节流的传输层通信协议
面向连接是指在数据通信开始之前先做好两端之间的准备工作。
- 完整的TCP连接过程( 牺牲速度换可靠性
- “建立连接” -> 三次握手
- “传输数据” -> 接收端需要对每个数据包进行确认操作,发送确认数据包给发送端
- “断开连接” -> 四次挥手
HTTP请求流程
HTTP
- HTTP是一种允许浏览器向服务器获取资源的协议，是 Web 的基础
浏览器端发起HTTP请求流程
.
-
- 构建请求 -构建请求行信息
-
- 查找缓存 -先在浏览器缓存中查询->查找成功,拦截请求、返回该资源并直接结束请求/查找失败,进入网络请求过程->缓解服务器端压力，提升性能
-
- 准备IP地址和端口。
浏览器请求DNS，返回域名对应的IP。先查找DNS缓存
获取端口号 http80端口
- 准备IP地址和端口。
-
- 等待TCP队列
Chrome机制规定同一个域名同时最多建立6个TCP连接，
- 等待TCP队列
-
- 建立TCP连接
-
- 发送HTTP请求
浏览器就可以和服务器进行通信了
首先浏览器会向服务器发送请求行，包括了请求方法、请求URI和 HTTP版本协议。
之后，还要以请求头形式发送其他一些信息，把浏览器的一些基础信息告诉服务器。
- 发送HTTP请求
服务器端处理HTTP请求流程
.
1. 返回请求
首先服务器会返回响应行，包括协议版本和状态码；
也会随同响应向浏览器发送响应头。包含了服务器自身的一些信息，比如服务器生成返回数据的时间；
发送响应体的数据，通常，响应体就包含了 HTML 的实际内容。
2. 断开连接
如果浏览器或者服务器在其头信息中加入了：Connection:Keep-Alive，浏览器就可以继续通过同一个 TCP 连接发送请求
> 保持TCP连接可以省去下次请求时需要建立连接的时间，提升资源加载速度
3. 重定向(另一种情况
.
为什么很多站点第二次打开速度会很快？
主要原因是第一次加载页面过程中，在本地缓存了一些耗时的资源。
浏览器缓存直接使用本地副本来回应请求，不会产生真实的网络请求从而节省了时间。同时，DNS数据也被浏览器缓存了，这又省去了DNS查询环节。
- 会被缓存的数据：DNS缓存和浏览器资源缓存
- 浏览器设置是否缓存：通过HTTP响应头中的Cache-Control字段
需要通过Cache-Control中的 Max-age参数设置缓存过期时长
- 缓存策略：
- 强缓存：缓存未过期->直接返回缓存资源)
- 协商缓存：缓存过期->请求服务器->缓存资源是否更新-返回304取缓存/200+资源
登录状态是如何保持的？
通过使用Cookie来实现的。
1.如果服务器端发送的响应头内有Set-Cookie字段，那么浏览器就会将该字段的内容保持到本地。
2.当下次客户端再往该服务器发送请求时，自动在请求头中加Cookie 值
3.服务器端发现客户端发送过来的 Cookie 后，会去检查验证，最后得到该用户的状态信息。
从输入URL到页面展示
- 用户输入
地址栏判断是搜索内容/请求的URL
搜索内容-> 使用默认的搜索引擎合成新的URL
url -> 加上协议,合成为完整的URL - URL请求过程
浏览器进程把url发送给网络进程,
首先,网络进程会查找本地缓存是否缓存了该资源->直接返回资源给浏览器进程/直接进入网络请求流程,进行DNS解析，获取请求域名的IP地址。
接下来就是利用 IP 地址和服务器建立 TCP 连接。浏览器端向服务器发送构建的请求信息。
服务器接收到请求信息后，会根据请求信息生成响应数据，并发给网络进程。
网络进程解析响应头的内容。
- 服务器可以根据响应头来控制浏览器的行为
1)重定向。如果返回的状态码是301/302，会从响应头的 Location 字段里面读取重定向的地址，发起新的 HTTP 或HTTPS 请求
2)响应数据类型处理。如果响应行是200，那么表示浏览器可以继续处理该请求，通过HTTP头的Content-Type字段区分响应体数据的类型，显示响应体内容text/html-> HTML格式,浏览器则会继续进行导航流程;
application/octet-stream->字节流下载类型,请求会被提交给下载管理器 - 准备渲染进程
Chrome默认采用每个标签对应一个渲染进程,如果多页面属于同一站点的话，那么多个页面会同时使用一个渲染进程
> 同一站点:相同协议和根域名
- 提交文档
- URL请求的响应体数据。
渲染进程会和网络进程建立传输数据的“管道”。完成后返回“确认提交”的消息给浏览器进程;浏览器进程就会更新浏览器界面状态 - 渲染阶段
渲染进程便开始页面解析和子资源加载,一旦页面生成完成，渲染进程会发送一个消息给浏览器进程,浏览器进行绘制显示
使用同一个渲染进程需要满足两个条件：
首先 A 标签页和 B 标签页属于同一站点，
其次 A 标签页和 B 标签页需要有连接关系(链接中加入 rel=noopener 属性，)
渲染过程
渲染进程 HTML文件 转换-> DOM树结构
样式计算、
渲染引擎 CSS样式表 转换-> styleSheets ,*计算DOM节点的样式*
布局
创建布局树(只包含可见元素) -> *计算布局信息,保存在布局树中*
分层、
将布局树分层 -> 生成图层树
- 创建新层的条件-元素有了层叠上下文的属性(透明,定位)或者需要被剪裁
绘制、
为每个图层生成绘制列表-提交至合成线程
光栅化
合成线程将图层->分成图块;在光栅化线程池中将图块->转换成位图
合成显示
合成线程发送绘制图块命令->浏览器进程接收命令生成页面->显示在显示器上
重排重绘合成
更新元素的几何位置属性,浏览器会触发重新布局--重排
- 重排需要更新完整的渲染流水线，所以开销也是最大的
更新元素的绘制属性,浏览器会触发重新绘制--重排
- 重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。
更改一个不改变布局绘制的属性,渲染引擎将跳过布局和绘制，只执行后续的合成操作 --合成
- 相对于重绘和重排，合成能大大提升绘制效率,如动画操作transform
