【知识体系 - 浏览器多进程架构】从输入url到页面展示发生了什么？

文火炖森菇
75 阅读4分钟

想必都知道这是一个常见的面试题。但是对于这部分知识点进行了解，对我们日常项目开发过程也是一个很大的促进作用。

【学习，是个持续的过程】

浏览器的多进程架构

  • 浏览器主进程。负责页面显示、用户交互、子进程管理、提供存储功能
  • 渲染进程。将HTML、CSS、JS转换为网页，排版引擎Blink和 JS引擎（V8） 都是运行在该进程中
  • GPU进程。最初是处理3D CSS，后来也承担绘制UI界面
  • 网络进程。发送网络请求，进行网络资源加载
  • 插件进程。负责插件的运行（因为插件易崩溃，需要插件进程进行隔离，保证插件进程崩溃不会影响到浏览器和页面）

Chrome浏览器包括：

  • 1个浏览器主进程 & 1个GPU进程 & 1个网络进程
  • 多个渲染进程 & 多个插件进程

从浏览器输入URL到页面渲染的过程，是由 浏览器架构中的各个进程之间的配合完成。

简洁版

  1. 浏览器主进程根据请求的URL，触发网络进程
  2. 网络进程向服务器发起网络请求
  3. 服务器交给后台处理，完成后进行数据响应
  4. 浏览器接收文件（HTML/CSS/JS/图像等），触发渲染进程
  5. 渲染进程对资源文件进行语法解析，建立内部数据结构（如DOM树）
  6. 渲染进程整合解析后的资源，完成页面渲染

详细简版

  1. 从 浏览器接收URL 到 开启网络请求线程（浏览器的机制、进程与线程）
  2. 从 开启网络线程 到 发出完整的HTTP请求（DNS寻址、TCP/IP协议）
  3. 从 服务器接收请求 到 对应后台接收请求（负载均衡、安全拦截、后台内部处理）
  4. 后台和前端的HTTP交互（HTTP的结构体、cookie）
  5. 缓存问题（浏览器的缓存机制）
  6. 浏览器接收到响应数据包的解析流程（浏览器的渲染机制）
  7. CSS的可视化模型（元素渲染规则、BFC、IFC）
  8. JS引擎解析过程（JS的解释阶段、预处理阶段、执行阶段生成执行上下文、VO、作用域链、回收机制）

详细版

  1. 浏览器接收URL
  2. 查找浏览器缓存
    • 资源未缓存，发起新请求
    • 资源缓存，查看过期时间
      • http1.0 => Expires - 对比客户端时间
      • http1.1 => Cache-Control:max-age=time - 对比服务器时间
  3. DNS解析
    • DNS域名解析获得IP地址。若请求协议是HTTPS，需要建立TLS连接
  4. 建立TCP连接（三次握手）
    • 利用IP地址和服务器建立TCP连接，然后向服务器发送请求
  5. 服务器响应
    • 服务器接收到请求信息后，根据信息生成响应行、响应头、响应体，发给网络进程进行响应头内容解析
  6. 浏览器渲染、
    • 解析html，构建DOM树
      • 经过 字节 -> 字符 -> 令牌 -> 节点对象 -> 对象模型
        • 字符编码：将HTML原始字节数据转换为文件指定编码的字符
        • 令牌化：浏览器根据HTML规范将字符串转换成各种令牌（如<html>、<body>、<p>这样的标签会被转化为令牌）
        • 生成节点对象：每个令牌被转换成定义其属性和规则的对象
        • 构建DOM树：将节点对象生成树形结构 - DOM树（树形结构可以诠释标签之间复杂的父子关系）
    举例说明 
    <html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="test.png"></div>
  </body>
</html>
    16ba6b127d150462~tplv-t2oaga2asx-zoom-in-crop-mark_4536_0_0_0.png

    • 解析css，构建CSSOM（style rules）

      • 浏览器解析遇到<link>标签时，浏览器开始解析CSS

      举例说明

      body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
    16ba73c57c1cd0c0~tplv-t2oaga2asx-zoom-in-crop-mark_4536_0_0_0.png
    • Render Tree
      • DOM树描述了文档的结构和内容，CSSOM树描述了对应文档的样式规则。结合DOM树和CSSOM树，构建渲染树（Render Tree） 16ba7478e6bf5ee2~tplv-t2oaga2asx-zoom-in-crop-mark_4536_0_0_0.png
    • Layout（布局）
      • 计算每个节点在浏览器窗口的确切位置
      • 从渲染树的根节点开始遍历，采用【盒子模型】模式来表示每个节点与其他节点之间的距离
    • Paint（绘制）
      • 将渲染树绘制成像素，时间跟CSS样式复杂度成正比
avatar
文章
阅读
粉丝