过程

用户在地址栏输入内容，浏览器进程检查内容
- 地址栏会判断输入的是搜索内容，还是URL。
- 若是搜索内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的URL
- 若是符合规则的URL，那么地址栏会根据规则组装协议，合成为完整的URL
准备卸载网页
- 输入内容并回车后，将触发beforeunload事件：这里可以进行数据清理、询问用户是否需要离开等，此时可中断导航
- 用户同意继续或没有beforeunload事件，浏览器进程将标签页图标改为加载转圈状态。此时图中页面显示的依然是之前打开的页面内容，并没替换为新页面

浏览器进程通过IPC(进程间通信)，把URL发给网络进程
网络进程查看该URL是否有本地缓存，如果有就返回给浏览器进程
如果没有，网络进程向服务器发起HTTP请求
- 进行DNS解析，获取IP地址（首先在本地DNS缓存里查找）。默认端口80，如果是HTTPS请求还需建立TLS连接
- 利用IP地址和端口建立TCP连接(HTTP1.1同域名只能建立6个TCP连接)
- 构建请求行、请求头、请求体并发送HTTP请求
  请求头包括浏览器的一些基础信息告诉服务器。比如包含了浏览器所使用的操作系统、浏览器内核等信息，以及当前请求的域名信息、浏览器端的Cookie信息
  请求行包括请求方法、请求URI和HTTP版本协议
  请求体是使用POST等方法时需要传输的数据
服务器响应后，网络进程接受数据并解析其内容
- 可以通过 curl 命令来查看服务端响应。 curl -i https://xxxx
网络进程解析返回数据
- 检查状态码，若是301、302一类跳转状态，则从location中读取地址，重新请求
- 200处理：检查Content-Type,如果是application/octet-stream等字节流类型，则提交给浏览器进程的下载管理器，同时该URL请求的导航流程就此结束，不再进行后续渲染。如果是text/html则通知浏览器进程
准备渲染进程
- 通常情况下，打开新页面都会使用单独的渲染进程；
- 如果从A页面打开B页面，且A和B都属于同一站点的话，那么B页面复用A页面的渲染进程
进入提交文档阶段
- 浏览器进程接收到网络进程的响应头数据之后，发送“提交文档”消息到渲染进程；
- 渲染进程接收到消息后，便开始准备接收HTML数据，和网络进程建立数据管道
- 渲染进程向浏览器进程“确认提交”，告诉浏览器进程：“已经准备好了”
- 浏览器进程接收到消息后，便开始移除之前旧的文档，然后更新浏览器界面状态，包括了安全状态(网站是否安全标记)、地址栏的URL(新的)、前进后退的历史状态(不是之前的转圈状态)，并更新Web页面(开始变白，不再显示旧页面)，网站标签图标变为转圈状态
进入渲染阶段
渲染进程开始从网络进程中读取数据，开始解析数据，进行页面解析与渲染
渲染进程加载完网页，通知浏览器进程，此时TAB标签图标会变为新网站图标
断开链接：若不是持久连接，则断开TCP连接通道

Question

为什么很多网页第二次打开速度会很快?

第二次页面打开很快，主要原因是第一次加载页面过程中，缓存了一些数据：DNS缓存和页面资源缓存
DNS缓存主要就是在浏览器本地把对应的IP和域名关联起来
页面资源缓存涉及到强缓存、弱缓存等，与Cache-Control中的Max-age参数、If-None-Match参数等相关

如何保持登录状态?

通常服务器校验通过后，通过Set-Cookie将登录凭证传给浏览器，浏览器会存到cookie里，下次请求会读取之前保存的Cookie数据，并把数据写进请求头里的Cookie字段里。服务器在收到HTTP请求头数据之后，就会查找请求头里面的“Cookie”字段信息，并判断该用户是已登录状态，然后生成含有该用户信息的页面数据，并把生成的数据发送给浏览器

导航是指哪部分?

用户发出URL请求到渲染进程开始解析数据的这个过程，就叫做导航

提交文档是什么?

提交文档是指浏览器进程将网络进程接收到的HTML返回数据提交给渲染进程：

当浏览器进程接收到网络进程的响应头数据之后，便向渲染进程发起“提交文档”的消息；
渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”；
等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程；
浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的URL、前进后退的历史状态，并更新Web页面。

预告

下一章讲解渲染具体过程

求求你面试官，快问我“从输入URL到网页渲染发生了什么“

过程

Question

预告