概念
FP（First Paint）
页面加载到首次开始绘制的时长，影响FP的因素很多，例如：网络加载速度
IP（Internet Protocol）
网络层协议，网络协议。计算机地址就是IP地址，访问网站实际上是主机对一台计算机（服务器）请求信息。当一台主机要向另一台主机发送请求时，在传输之前加上该主机的IP地址信息，这样在传输中才能正确寻址。
UDP（User Datagram Protocol）
传输层协议，用户数据包传输协议。UDP重要的信息是端口号，通过端口号可以把指定的数据包发送给指定的程序。
TCP（Transmisson Control Protocol）
传输层协议，传输控制协议。通过该协议，可以通过重传机制和数据包排序机制，把乱序传输过来的数据包组装成正确的数据。这是一个面向连接、可靠、基于字节流的协议。
HTTP（Hyper Text Transfer Protocol）
应用层协议，超文本传输协议。通常运行在TCP之上，它的功能是指定客户端发送什么信息以及希望收到什么样的响应。
beforeunload事件
钩子函数，在页面被替换成新页面之前，浏览器给当前页面一次执行beforeunload事件的机会，相当于dispose，在销毁前可以清除一些数据和操作。用户也可以通过beforeunload事件来进行确认是否取消导航。
Content-Type属性
服务器告诉浏览器返回的文件类型，例如：text/html、application/octet-stream（html文件类型、字节流类型）
同一站点
根域名+协议相同，端口和子域名不同算作同一站点
拓展
TCP连接
建立连接阶段，建立一个TCP连接，需要客户端与服务器通过三次握手，也就是相互发送三次数据包来确认连接建立。
传输数据阶段，接收端会在接收到数据后向发送端发送确认信息，倘若发送端没有收到确认信息，则会判断为数据包丢失，触发TCP的重传机制。接收端在收到很多小数据包后，会根据TCP头中的序号排序成完整的数据。
断开连接阶段，传输数据后，通过四次挥手来保证双方断开连接。
TCP为了保证数据传输的可靠性，牺牲了数据包的传输速度，因为这些机制会把数据包的数量提高一倍
浏览器发送HTTP请求流程
构建请求头
GET /index.html HTTP1.1
请求头会说明方法，HTTP版本号
查找缓存
浏览器会在本地查找是否存在缓存，如果有就会拦截请求，直接使用缓存渲染页面。
缓解了服务器压力，提高了客户端用户体验
如果查找失败，则会发送网络请求
准备IP和UDP信息头
准备IP：请求DNS服务器返回域名对应IP地址，浏览器存在DNS缓存服务，倘若本地有缓存，则使用缓存，没有则请求DNS服务器。
UDP信息头：准备好端口号信息。
等待TCP队列
一般浏览器只允许六个TCP连接，所以在建立TCP连接之前，需要等待TCP连接空出
建立TCP连接
三次握手，客户端发送一次请求，服务器建立连接返回建立信息，客户端再发送一次请求确认建立。
发送HTTP请求
建立TCP连接后就可以发送HTTP请求超文本和资源渲染页面。
HTTP请求，客户端先向服务器发送请求行，请求行包括了请求方法、请求URI和HTTP版本协议
发送请求行后，还会以请求头形式发送一定的信息，例如浏览器使用的操作系统、内核等，请求的域名信息、浏览器端的cookie信息等。
服务端处理HTTP请求流程
返回请求
服务器处理请求结束，会返回数据给浏览器，总共返回响应行、响应头、响应体。
断开连接
一般情况，服务器返回数据后就会关闭TCP连接。如果服务器或者客户端在头信息中加入了
Connection:Keep-Alive
该属性会保持TCP连接，省去下次请求建立TCP连接的时间，提升资源加载速度
重定向
有时响应行返回的状态码是301，则代表需要重定向，在响应头里有个Location属性，浏览器会再次发送请求向Location属性的域名。
二次打开页面更快
DNS缓存和页面资源缓存。浏览器通过服务器返回的响应头查看属性Cache-Control字段来设置是否缓存该资源。
Cache-Control:Max-age = 2000
该属性说明此缓存有效时间为2000s，2000s后就会失效，浏览器就需要再次向服务器发送请求
Etag属性
一般为资源实体的哈希值，当浏览器第一次发送HTTP请求时，服务器会返回一个Etag，并且在第二次发送请求时，客户端会在请求头加入一个属性If-None-Match，该属性的值就是Etag。服务器会对比本地和浏览器发送过来的Etag来确认缓存是否需要更新，相同则不需要，将If-None-Match设为false，返回304，不同则需要设置为true，返回200。Last-Modified属性表示相应资源在服务器最后修改时间
保持登录状态
浏览器在向服务器POST账号密码后，服务器收到数据，查询后台，验证是否正确，如果正确，则会在返回数据时，生成一段表示用户身份的字符串，并写到响应头的Set-Cookie属性里面。
Set-Cookie : UID = 3431uad;//例如这种情况
浏览器收到响应头后，发现里面有Set-Cookie属性，则会把属性信息保存本地。
当用户再次访问时，浏览器会发送HTTP请求，发送请求前，会检查本地是否有之前缓存的Cookie数据，倘若有，则会把cookie数据写入请求头的Cookie字段里面
Cookie:UID =3431uad;//例如这种情况
服务器收到请求头数据后，会查找请求头里面cookie字段对应的用户在后台是否是登录状态，然后生成含有该用户信息的页面数据，再把数据发送给浏览器
从输入URL到页面渲染
● 浏览器查找本地是否有即将请求的页面缓存，有就拦截请求，并且给If-None-Match上Etag属性，来判断是否缓存失效。没有就准备建立TCP连接。
● 浏览器获取用户输入的URL，解析成IP地址。查找DNS缓存，有就使用，没有就请求DNS根域名服务器，再到子域名服务器。如果请求是HTTPS，则还需要建立TLS连接。
● 等待TCP连接队列。
● 通过三次握手建立TCP连接，浏览器构建HTTP请求头、UDP端口号。查询本地是否有cookie，有就在请求头设置cookie属性来持久化登录。
● 发送HTTP请求HTML、CSS及JavaScript代码与渲染资源。
● 服务器接受到请求信息后，会根据信息生成响应数据。并把响应数据发送给网络进程。
● 浏览器中网络进程拿到服务器返回的响应头后，解析响应头后，将数据转发给浏览器进程。
● 浏览器进程接收到网络进城的响应头数据后，提交“提交导航”信息给渲染进程。
● 渲染进程接收到“提交导航”信息后，开始接受HTML数据，渲染进程此时与网络进城建立数据管道。
● 渲染进程接收到数据后，向浏览器进程“确认提交”，准备接受和解析页面数据。
● 浏览器收到“确认提交”申请后，移除旧文档，更新浏览器中的页面状态。包括安全状态、地址URL、前进后退的历史状态，并更新Web页面。
● 本地存储缓存，如果获得了Set-Cookie则本地存储。
用户发出URL请求到页面开始解析的过程被称作导航
渲染进程
同一站点的页面在同一个渲染进程中。
打开新页面会调用单独的渲染进程
当被打开的页面和原页面是同一站点，则会复用原页面的渲染进程
|