用户发出URL请求 到 页面开始解析的过程,叫做导航
0. 用户输入
首先，浏览器判断地址栏 输入的是 URL规则 数据 还是 搜索内容
是 符合 URL规则 的内容，拼上协议；
是 搜索内容，调用默认搜索引擎。
beforeunloaded
用户输入内容并回车，代表当前页面即将被替换为新的页面
此时 当前页面 还会最后调用 beforeunloaded 接口，beforeunloaded 允许页面退出之前做数据清理操作,或 询问用户是否离开当前页面
可通过beforeunloaded 来取消导航,让浏览器不再执行任何后续操作
接下来便进入了 真正的页面资源请求过程.
浏览器进程 通过 进程通讯(IPC) 把URL请求 发送至网络进程
网络进程发起真正的URL请求
1. HTTP请求流程
HTTP是一种允许浏览器向服务器获取资源的的协议，是Web的基础，通常由浏览器发起
构建请求行信息
GET /index.html HTTP1.1查找浏览器缓存是否有请求的文件
当浏览器发现自己已有缓存，会拦截请求，返回资源的副本，并结束请求DNS寻址(Domain Name System)
当浏览器发现自己已有缓存，会直接返回IP等待TCP队列
chrome有个机制，同一域名最多同时建立6个TCP连接TCP连接
通过IP和端口号(用户输入，默认80),三次握手
如果是HTTPS协议还会增加 SSL/TSL的握手过程发送HTTP请求
首先，向服务器发送 请求行，包括 请求方法 请求URI 和 HTTP版本协议
其次，发送 请求头，包括浏览器的一些基础信息，操作系统 浏览器版本 cookie 等服务端响应浏览器，返回 响应数据
首先，返回 响应行HTTP/1.1 200 ok
随后，返回 响应头，包含服务器自身一些信息，返回数据的时间 发牛的数据类型 服务器要在客户端保存的cookie等信息
最后，服务器可以继续发送 响应体 的数据，通常包含是HTML的实际内容断开连接
通常,服务器返回了请求数据，就会关闭TCP连接，如果浏览器 或服务器在其头中加入了Connection:keep-Alive,
那么TCP连接将保持打开，省去下次请求时建立连接的时间，提升资源加载速度，比如Web和页面内的图片来自同一Web站点。重定向
返回状态码301时，重定向至Location:''网站,常见http请求重定向为https请求
本地缓存
服务器返回HTTP响应头时，通过设置
Cache-Control来设置是否缓存该资源Cache-Control:Max-age=2000
浏览器发送HTTP请求时,如果缓存过期,会在 请求头 加上If-None-Match:"4f80f-13c-3a1xb12a"
如果不需要更新,服务器会返回304状态码,如果需要更新,服务器会直接返回新资源
Cookie
服务器生成代表用户身份的字符串,写在响应头的Set-Cookie上Set-Cookie: UID=3431uad;
浏览器解析响应头,将UID=3431uad保存在本地,用户再次访问时,请求头带上Cookie: UID=3431uad;
数据处理
返回状态码为200时,
浏览器通过 响应头的Content-Type区分数据类型
如application/octet-stream 为字节流类型,通常浏览器按照下载类型来处理准备渲染进程
通常情况下, 一个页卡一个渲染进程
同一站点(same-site):协议 根域名 相同,则会共用一个渲染进程
这个策略称为 process-per-site-instance
此时 文档还在 网络进程 中提交文档
浏览器进程 将 网络进程 收到的HTML数据交给 渲染进程
(1)浏览器进程 收到 网络进程 的响应头数据,向刚刚建立的渲染进程发起 ‘提交文档’ 的消息
(2)渲染进程 收到 ‘提交文档’ 的消息,与 网络进程 建立数据传输管道
(3)渲染进程 数据接收完毕,返回 ‘确认提交’ 消息给 浏览器进程
(4)浏览器进程 收到 ‘确认提交’ 的消息,更新浏览器界面状态,包括 地址栏的URL 前进后退的历史状态 安全状态,并更新web页面
此时 导航 流程结束, 进入 渲染 阶段
页面渲染完成时, 渲染进程 会发送一个消息给浏览器进程,浏览器进程 停止标签图标上的加载动画
2. 首屏渲染
首屏渲染(FP:First Paint)指 从地址栏输入地址到首次绘制完成的时长
白屏渲染时间 地址栏输入网址后回车 - 浏览器出现第一个元素
首屏渲染时间 地址栏输入网址后回车 - 浏览器第一屏渲染完成
FP指标其中一个重要影响因素是 网络加载速度,另外就是页面优化,js优化了
记录首屏加载时间的方式
1.在页面最前端和最后端加Date.now()
2.监听首屏内加载最慢的图片(通常首屏加载最慢的就是图片和iframe)
3.Performance API,performance.timing对象
首屏渲染优化
使用额外<script>标签让浏览器并行下载部分JS库,
路由懒加载,
首屏loading图,
后端渲染
浏览器进程版URL请求流程
浏览器进程 ,收到用户输入的URL请求, 转发给
网络进程 ,网络进程发起真正的URL请求, 一段时间后
网络进程 ,接收到响应头数据,将数据 转发给
浏览器进程 ,接收到响应头数据后,发送 “提交导航(CommitNavigation)”消息给
渲染进程 ,开始准备接收HTML数据,直接和 网络进程 建立数据通道
渲染进程 ,初始化完毕,向 浏览器进程 发送消息”确认提交”
浏览器进程 ,接收到 渲染进程 的消息后,开始移除旧文档,更新自己的页面状态
用户发出URL请求到页面开始解析的这个过程,叫做导航.
HTTP 请求的过程
IP 负责把数据包送达目的主机。
UDP 负责把数据包送达具体应用。
TCP 保证了数据完整地传输，它的连接可分为三个阶段：建立连接、传输数据和断开连接。
IP UDP TCP
互联网实际上就是一套理念和协议组成的体系架构
IP(Internet Protocol) 网际协议
IP其实就是计算机地址 访问网站就是访问另一台计算机
数据包交给网络层,包上IP头,交给底层,通过物理网络传输给目标主机的网络层
UDP(User Datagram Protocol) 用户数据包协议
端口号,传输层识别端口号将此电脑的数据包分发给对应的程序
数据包(上层) +UDP头(传输层) +IP头(网络层) 再底层传输到目标主机,再解析
UDP有数据校验,但对于错误的数据包直接丢弃没有重发机制,且发送方无法得知数据是否送达,优点是传输快
TCP(Transmission Control Protocol) 传输控制协议
面向连接的 可靠的 基于字节流的传输层通信协议
优点:数据包丢失时,提供重传机制;有数据包排序机制,保证把乱序的数据包组合成完整文件
TCP连接
TCP连接生命周期包括 建立连接 传输数据 断开连接
首先,建立连接 三次握手 指客户端和服务器共需要发送三个数据包确认连接的建立
其次,数据传输 接收端需要再接收到每个数据包后返回确认数据包给发送端,
接收到数据包后会根据TCP头中的序号为其排序,组合成完整的数据
最后,断开连接 四次挥手
HTTP 和 TCP的关系
HTTP协议和TCP协议都是TCP/IP协议簇的子集。
HTTP协议属于应用层，TCP协议属于传输层，HTTP协议位于TCP协议的上层。
数据包(上层) +HTTP头(应用层) +TCP头(传输层) +IP头()
TCP在传输层发生丢包时,会要求重传,最后会在保证排好序数据完整的状态下,把数据传给HTTP层
先通过三次握手建立tcp链接，链接建立好之后，发送http请求行和http请求头给服务器，然后服务器返回响应行，响应头和响应体，最终完成后通过四次挥手断开tcp链接
websocket其实就是http的改造版本,增加了服务器向客户端主动发消息的功能
TCP是底层通讯协议，定义的是数据传输和连接方式的规范
HTTP是应用层协议，定义的是传输数据的内容的规范
HTTP协议中的数据是利用TCP协议传输的，所以支持HTTP也就一定支持TCP
HTTP支持的是www服务
而TCP/IP是协议
它是Internet国际互联网络的基础。TCP/IP是网络中使用的基本的通信协议。
TCP/IP实际上是一组协议，它包括上百个各种功能的协议，如：远程登录、文件传输和电子邮件等，而TCP协议和IP协议是保证数据完整传输的两个基本的重要协议。通常说TCP/IP是Internet协议族，而不单单是TCP和IP
总结
IP 负责送达目标主机 UDP负责送达具体应用
使用TCP的话则保证了数据的完整传输
