笔记之浏览器工作原理与实践（1）

小小小芒果
2,638 阅读7分钟

本文是对李兵老师的《浏览器工作原理与实践》课程的记录与整理。

Xind还在整理中。。

由于篇幅限制，《浏览器工作原理与实践》分为几篇笔记。（掘金字数限制头秃。。。）

课程地址：浏览器工作原理与实践

一、 宏观视角下的浏览器

1. Chrome 多进程架构

chrome 基于 Chromium 开发

线程 VS 进程

  • 线程是不能单独存在的，它是由进程来启动和管理的。
  • 一个进程就是一个程序的运行实例。启动程序时，操作环境创建内存，这样的运行环境叫进程。
  • 线程依附进程，进程中使用多线程并行处理能提升运算小效率
  • 四个特点
    1. 进程中任意线程执行出错，都会导致整个进程崩溃
    2. 线程之间共享进程中的数据
    3. 当一个进程关闭之后，操作系统会回收进程所占用的内存
    4. 进程之间的内容相互隔离。可以使用 IPC 通信（IPC负责进程间通信）

单进程浏览器时代

单进程：「单进程浏览器是指浏览器的所有功能模块都是运行在同一个进程里」

  • 架构 页面进程（包含页面渲染，JavaScript 环境，插件）
  • 特点
    • 不稳定
    • 不流畅
    • 不安全：例如页面脚本可以通过浏览器漏洞获取系统权限

多进程浏览器时代

  • 1.早期架构（通过 IPC）

    早期Chrome进程架构图
    • 浏览器主进程（下载资源，管理 IPC，显示渲染进程生成的图片）
    • 插件进程
    • 渲染进程（解析，渲染，JavaScript 执行，合成网页图片），运行沙箱中不能读写硬盘数据，不能获取操作系统权限
    • 如何解决问题
      • 进程隔离->解决不稳定
      • JavaScript 只阻塞当前渲染进程
      • 安全沙箱 ->解决不安全

  • 当前正在使用的多线程架构

    最新Chrome架构
    • 浏览器主进程：界面显示. 用户交互. 子进程管理. 存储
    • 网络进程
    • 网络资源加载
    • GPU 进程
    • 渲染进程
      • 排版引擎 Blink
      • JavaScript 引擎 V8
    • 插件进程

  • 未来面向服务架构 未来架构

    • 渲染进程
    • 插件继承
    • 浏览器主进程
    • UI 进程
    • 文件进程
    • GPU 进程
    • 设备进程
    • 网络进程
    • Video 进程等等。。

补充

  • 页面崩溃的原因
    • 单进程（卡死）
    • 多进程
      • 同一站点任意卡死，整个崩溃
  • chrome 进程管理器
    • iframe 是单独进程
    • 同一站点是公用渲染进程

2. 协议

在衡量 Web 页面性能的时候有一个重要的指标叫“「FP（First Paint）」”，是「指从页面加载到首次开始绘制的时长」。

简化传输模型
简化传输模型

1. IP：将数据包送达目的主机（网络层）

  • 数据包在互联网上传输。要符合网际协议（Internet Protocol 简称 IP）
  • 计算机地址称为 IP 协议，访问任何网站实际上是你的计算机向另外一台计算机请求
  • 网络层：数据包+IP 头，负责把数据包送达目的主机

2. UDP：将数据包送达应用程序（传输层）

  • 将数据包交给具体程序，用户数据包协议（UserDAtagram Protocol 简称 UDP）
  • UDP 最重要的端口号，UDP 通过端口号将数据包分发给正确的程序
  • 传输层：数据包+UDP 头
  • 会丢包，传输速度快，适合视频

3. TCP：数据完整送达应用程序（传输层）

一个TCP连接生命周期
一个TCP连接生命周期
  • TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的. 可靠的. 基于字节流的传输层通信协议
  • 机制
    • 重传机制：丢包
    • 数据包排序：大文件时数据包会拆分小数据包时保证顺序
  • 建立连接
    • 三次握手
  • 传输数据
    • 接收端需要对每个数据包进行确认操作
  • 断开连接
    • 四次挥手

TCP 为了保证数据传输的可靠性，牺牲了数据包的传输速度，因为“三次握手”和“数据包校验机制”等把传输过程中的数据包的数量提高了一倍。

3. Http 请求流程

HTTP请求流程
HTTP请求流程

  1. 构建请求

    GET /index.html HTTP1.1

  2. 查找缓存

    浏览器命中缓存时，会拦截请求，返回副本

  3. 准备 IP 地址和端口（DNS）

    • DNS 域名系统，返回 IP
    • DNS 数据缓存

  4. 等待 TCP 队列

    Chrome 机制：只能建立 6 个连接

  5. 建立 TCP 连接

  6. 发送 HTTP 请求（同时发送）

    • 请求行
      • 请求方法
      • 请求 URI
      • HTTP 版本协议
    • 请求头

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

    • 返回请求
      • 响应行
      • 响应头
      • 响应体
    • 断开连接
      • connection:Keep=Alive保持 TCP 连接可以省去下次请求建立连接时间，提升加载速度
    • 重定向
      • 301

两个问题

  • 1、站点第二打开速度很快

    • DNS 缓存
    • 页面资源缓存 缓存

  • 2、登录态保持（cookie）

    cookie流程
    cookie流程

4. 从输入 URL 到页面展示发生了什么

「用户发出 URL 请求到页面开始解析的这个过程，就叫做导航」。

完整流程
完整流程

  1. 用户输入

    • 输入内容

      使用浏览器默认搜索引擎，合成新的带搜索关键字 URL

    • 请求 URL

      自动加上协议，「回车后标签图片进入加载状态」，页面不会立即更换，等待文档提交阶段，页面内容才会变化

  2. URL 请求过程（IPC 通信）

    • 本地缓存，有直接返回资源给浏览器
    • 没有缓存，进入 DNS 解析，DNS 缓存，如果是 HTTPS，还需要建立 TSL 连接
    • 建立 TCP/IP 连接，浏览器构建请求行和请求头，Cookie
      • 重定向（永久重定向）：在导航过程中，如果服务器响应行的状态码包含了 301. 302 一类的跳转信息，浏览器会跳转到新的地址继续导航；如果响应行是 200，那么表示浏览器可以继续处理该请求。
      • 响应数据类型处理 Content-Type：告诉浏览器返回的响应体数据的类型
        • text/html ：返回 HTML 资源，会继续进行导航流程
        • application/octet-strea：返回字节流类型，通常情况下浏览器按照下载类型处理，同时该 URL 请求导航流程就会结束
        • application/json json ：格式数据

  3. 准备渲染进程

    • 同一站点，复用父页面渲染

      • 同一站点（same-site）：具体地讲，我们将“同一站点”定义为根域名（例如，geekbang.org）加上协议（例如，https:// 或者 http://），还包含了该根域名下的所有子域名和不同的端口
https://time.geekbang.org
https://www.geekbang.org
https://www.geekbang.org:8080
  • 新的页面单独渲染进程

  1. 提交文档（URL 请求响应体数据）

    导航完成状态
    导航完成状态
    • 提交文档消息是浏览器发出，渲染流程接受到信息后，会和网络进程建立传输数据「管道」
    • 文档数据传输完成后，渲染流程会返回「确认提交」的纤细给浏览器进程
    • 浏览器进程收到确认提交后，会「更新浏览器界面状态」（安全状态. 地址栏的 URL. 前进后退的历史状态），并更新 web 页面（这会是白屏）

  2. 渲染阶段

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