浏览器输入地址到渲染的过程

CPU、GPU、内存和多进程架构

CPU： 处理各种数学运算，各种任务调度。 GPU：处理图像渲染，以及利用 GPU 加快图像生成和使动画流畅。 进程：启动一个应用，系统会启动一个进程，浏览可以包含多个进程。 线程： 应用通过线程来帮助程序执行各种任务，一个进程可以包含多个线程。 内存：操作系统为应用提供私有的内存空间用于保存各种状态，进程停止，内存就会释放。

进程与进程之间的通信

通过私密通信 (IPC) 来实现。

浏览器顶层进程

  • Browser Process : 地址栏、书签、返回 前进按钮, 处理网络请求和文件访问。
  • Renderer Process： 控制浏览器渲染。
  • GPU Process：处理浏览器渲染
  • Plugin Process： 控制网站使用的所有插件，例如 Flash。

Chrome 中多进程架构

  • 每个标签页都有自己的渲染进程。
  • 每个进程都有自己独立的私有内存空间。

浏览器处理导航

当用户按下回车后，浏览器的任务由浏览器进程接管，

  1. 处理输入
    • UI线程检查输入，判断搜索关键词还是请求访问网站。
  2. 开始导航
    • UI线程发起网络调用请求，网络线程执行协议，通过DNS查找域名IP，通过TSL建立连接。
  3. 响应内容
    • 服务器根据请求头信息响应内容（ Content-Type），执行完成，网络线程通知UI线程数据准备完毕。
  4. 渲染网页
    • UI线程找到渲染进程来渲染网页
  5. 导航完成，文档加载

渲染进程工作原理

浏览器进程接收完数据后，渲染进程内部负责一系列渲染操作。

  • 解析：解析数据构建DOM，加载外部子资源（图片、CSS、JS）。
  • 提示浏览器如何加载资源： 通过script、link标签的async、defer，rel属性决定资源渲染顺序。
  • 样式计算（Style calculation）：根据CSS规则确定每个元素的样式，生成计算样式，DevTools可以查看计算样式。
  • 布局 (Layout)： 根据 CSS 和 JS 获取元素布局和位置，渲染成本高。
  • 绘制（Paint）：根据z-index等属性获取元素绘制顺序，渲染成本高。
  • 合成（Compositing）： 将各个元素图层通过合成器线程合成页面图像，渲染成本低。