性能

输入 url 到页面的过程

1. 通过域名查找 ip 地址
2. 建立 TCP 连接
3. 发出 http、https 请求
4. 解析 html 文件和渲染页面

DNS 解析

在查找 ip 地址过程中，浏览器获取 url 的域名后会去查找规则来获取对应 IP：浏览器缓存-> 本地 DNS 服务器->路由器缓存-> 根 DNS 服务器->域服务器

如果在浏览器缓存没有查找到 ip 地址，浏览器会去本地 DNS 服务器发出请求，本地 DNS 服务器使用递归查询这个域名，没有则继续向上查询，后续查询放回的是服务器的地址，本地 DNS 服务器得到后这个地址后会去请求域名所在的服务器得到对应 ip 地址，同时会缓存这个关系。

往往一次访问后，二次访问会比第一次快上许多。这就是因为储存 DNS 缓存，毕竟查询 ip 过程也很费时间。

请求数据

https:// 请求使用 HTTP/2 http:// 请求使用 HTTP/1

http2.0

HTTP/2 基于 SPDY,其特性 ：二进制分帧、Header压缩、多路复用、服务器推送。

二进制分帧：

• 帧：作为 http2 中数据通信的最小单元
• 流：一个虚拟通道，可以进行双向消息传递

在 HTTP/2 中，同域名下所有通信都在单个连接上完成，该连接可以承载任意数量的双向数据流。每个数据流都以消息的形式发送，而消息又由一个或多个帧组成。多个帧之间可以乱序发送，根据帧首部的流标识可以重新组装。

多路复用：

多路复用，代替原来的序列和阻塞机制。所有就是请求的都是通过一个 TCP 连接并发完成。相比于 HTTP/1，HTTP/1 不需要使用 TCP 连接来实现多流并行。

Header 压缩：

减小 HTTP/1 请求头中携带太多的其他信息如：Cookie、描叙性信息等

• HTTP/2 在客户端和服务器端使用“首部表”来跟踪和存储之前发送的键－值对，对于相同的数据，不再通- 过每次请求和响应发送；
• 首部表在 HTTP/2 的连接存续期内始终存在，由客户端和服务器共同渐进地更新;
• 每个新的首部键－值对要么被追加到当前表的末尾，要么替换表中之前的值。

相比于 HTTP/1，HTTP/2 这些操作会让 HTTP/2 的性能得到极大提升。由于https://请求使用 http2.0，所以这种情况下，HTTP/2 是“安全”的。

强缓存和协商缓存

强缓存：二次访问网页在不过期的情况下不会发送请求，而是直接从客户端缓存中读取文件。放回状态码200。

http1.0 中Expires来设置资源过期时间，http1.1 中可设置Cache-Control字段实现。该字段值可设置：

• private 允许客户端缓存
• public 允许客户端和服务期缓存
• max-age=time 缓存资源会在 time 后过期，单位 秒
• no-cache 启用协商缓存
• no-store 不能缓存

协商缓存：每次请求后会得到 缓存标识，并把这个标识存储在客户端缓存中，每次请求时会把这个标识发送给服务器，服务器会判断这个标识是否过期，过期则发送新的标识和文件资源，否则放回304，浏览器读取客户端缓存。

http1.0 采用Last-Modified来设置缓存标识，单位为秒，会在请求头中以if-none-matched代替。http1.1 采用Etag来设置缓存标识，一个hash值，这个值由服务端生成，代表文件的唯一值，会在请求头中以if-modified-since代替。

提示

F5 或点击刷新类似协商缓存，Ctrl+F5 会重新请求。两者都会使得本地文件过期。

强缓存和协商有助于提高性能，避免重复请求数据。

页面相关

懒加载；将不是必须的资源延迟加载。

比如图片加载，非可视化区域的图片可以不必在第一次请求的时候就进行加载。只有当用户的可视化区域到了相关区域在发出请求加载图片。其他类型。

静态资源使用 CDN，减少回流和重绘等。