从输入URL到页面展示，这中间发生了什么？

• 解析URL
• 浏览器本地缓存
• DNS解析
• 建立TCP/IP连接
• 发送HTTP请求
• 服务器处理请求并返回HTTP报文
• 浏览器根据深度遍历的方式把html节点遍历构建DOM树
• 遇到CSS外链，异步加载解析CSS，构建CSS规则树
• 遇到script标签，如果是普通JS标签则同步加载并执行，阻塞页面渲染，如果标签上有defer / async属性则异步加载JS资源
• 将dom树和CSS DOM树构造成render树

我们可以概括为三个阶段，分别是用户输入阶段，URL请求阶段，准备渲染进程阶段。

用户输入阶段

一、用户输入url并回车，浏览器进程检查url，组装协议，构成完整的url，根据这些信息生成http请求数据包。

URL 请求过程

一、浏览器进程通过进程间通信（IPC）把URL请求发送给网络进程。

二、网络进程接收到URL请求后检查本地缓存是否缓存了该请求资源

• 如果有则将该资源返回给浏览器进程
• 如果没有，网络进程向web服务器发起http请求（网络请求），请求流程如下：
  • 进行DNS解析，获取服务器ip地址
  • 利用ip地址和服务器建立tcp连接（三次握手，四次挥手）
  • 构建请求头信息
  • 发送请求头信息
  • 服务器响应后，网络进程接收响应头和响应信息，并解析响应内容

三、网络进程解析响应流程：

• 检查状态码，如果是301/302，则需要重定向，从Location自动中读取地址，重新进行第3步
• 200 状态码响应处理，检查响应类型Content-Type，如果是字节流类型，则将该请求提交给下载管理器，该导航流程结束，不再进行后续的渲染 如果是html则通知浏览器进程准备渲染进程准备进行渲染。

准备渲染进程

准备渲染进程：对文档进行页面解析和子资源加载

一、HTML 通过HTML解析器转成DOM Tree

二、CSS按照CSS规则和CSS解析器转成CSSOM TREE，两个tree结合，形成render tree（不包含HTML的具体元素和元素要画的具体位置）

三、通过Layout计算出每个元素具体的宽高颜色位置，结合起来，开始绘制，最后显示在屏幕中新页面显示出来