performance.timing

详细信息

排个序

这里的navigation Start 与 redirectStart 之间应该加一个beforeunload事件

那么从输入URL到页面加载的流程结合上篇与这篇文章就可以完整解决了

用户输入：地址栏判断是搜索内容还是请求URL

1.1 搜索内容：拼接URL地址
1.2 请求URL：符合URL规则并加上协议http/https
1.3 执行beforeonload的事件，给之前的页面退出之前一些操作
URL请求

2.1 浏览器主进程会把URL请求交给网络进程处理

2.2 网络进程会查找本地缓存是否有强缓存，如果有强缓存就直接读取缓存浏览器主进程
2.3 如果没有强缓存就开始DNS解析(浏览器DNS缓存，计算机本地DNS缓存)
2.4 根据DNS获取域名服务器对应的IP地址
2.5 利用IP地址和服务器建立TCP连接
2.6 TCP连接建立后开始构建请求行，请求头，请求体等信息，并把和域名相关的Cookie等数据附加到请求头中；Chrome中一个域名最多6个TCP连接，因此打开网络面板查看网络请求详情的时候有个queqe事件。
2.7 服务器收到请求后会生成相应数据，并发送给网络进程。
2.8 HTTP数据请求完毕后TCP四次挥手断开连接，如果请求头内有Connection:keep-alive并且服务器支持长连接，且返回Connetion:keep-alive那么表示此连接为长连接，便于下次访问时候复用。
2.9 网络进程开始解析响应内容
2.9.1 重定向：返回301/302最常见的是HTTP->HTTPS，同时响应头中有Location字段显示要转向的地址
2.9.2 如果不是重定向：网络进程解析请求头，根据Content-Type来进行:application/octet-stream字节流类型，请求被提交给浏览器的下载管理器处理，同时URL请求导航流程终止；text/html返回的是HTML格式，网络进程会将响应头信息传递给浏览器进程
2.9.3 Chrome会为页面分配一个渲染进程(Chrome的策略是从一个页面打开了另一个页面，而两个页面属于同一个站点，即根域名相同，那么就会复用父页面的渲染进程，两个页面站点不同就会开启一个新的渲染进程)
2.9.5 提交文档：1) 浏览器进程接收到网络进程的响应头数据后向渲染进程发起提交文档信息；2) 渲染进程收到消息后会和网络进程建立起传输数据的管道；3) 文档数据传输完毕之后，渲染进程发送确认提交消息给浏览器进程；4）浏览器进程在收到确认提交的消息后会更新浏览器界面状态，包括安全状态，地址栏的URL，前进后退的历史状态，并更新Web页面。
2.9.5 渲染阶段：文档提交之后，渲染进程开始解析页面和子资源加载。渲染完成之后向浏览器进程发消息，停止标签页上的加载动画。