从输入 URL 到页面展示过程

• 用户输入 url 回车
• 浏览器进程检查 url ，组装协议，构成完整的 url
• 浏览器进程通过 进程间通信（IPC）把 url 请求发送给网络进程
• 网络进程接收到 url 请求后检查本地缓存是否 缓存 了该请求资源，如果有则将该资源返回给浏览器进程（涉及强缓存判断）
• 如果没有，网络进程向 web 服务器发起 http 请求（网络请求），请求流程如下：
  • 进行 DNS 解析，获取服务器 ip地址 ，端口
  • 利用 ip 地址和服务器建立 tcp 连接
  • 构建请求头信息
  • 发送请求
  • 服务器响应后，网络进程接收响应头和响应信息，并解析响应内容
• 网络进程解析响应流程：
  • 检查状态码，301/302 则需重定向，从 Location 中读取地址，重新进行第 4 步，如果是 200，则继续处理请求。
  • 304 状态码：命中协商缓存，直接从本地缓存中读取内容。
  • 200 状态码：检查响应类型 Content-Type，如果是字节流类型，则将该请求提交给下载管理器，该请求流程结束，不再进行后续渲染，如果是 html 则通知浏览器进程准备渲染进程准备进行渲染。
• 准备渲染进程
  • 浏览器进程检查当前 url 是否和之前打开的渲染进程根域名是否相同，如果相同，则复用原来的进程，如果不同，则开启新的渲染进程
• 传输数据、更新状态
  • 渲染进程准备好后，浏览器向渲染进程发起 提交文档 的消息，渲染进程接收到消息和网络进程建立传输数据的 管道 。
  • 渲染进程接收到数据后，向浏览器发送 确认提交 。
  • 浏览器进程接收到确认消息后更新浏览器界面状态：安全、地址栏 url 、前进后退的历史状态、更新 web 页面。
• 更新 web 页面包含三个阶段：DOM生成、样式计算和布局
  • 浏览器不能直接理解 html 数据，所以第一步需要将其转换为浏览器能够理解的 DOM 树结构；
  • 生成 DOM 树后，还需要根据 css 样式表，来计算出 DOM 树所有节点的样式，更新 render 树；
  • 最后计算 DOM 元素的布局信息，使其都保存在布局树中；
  • 对布局树进行分层，生成分层树，生成绘制列表进行渲染。

分层与合成详见分层与合成