一个页面的速度由什么来决定？
- 资源传输时间（TCP连接时间 + 响应时间）
- DOM渲染时间
- 查看方法： window.performance 可以查看所有的时间，内存使用情况
可以从以下三个方面优化速度：
- 优化服务器连接时间，响应时间
- 查看服务器连接时间，可以使用window.performance 来查看
- 减少传输的内容体积和切片
- 传输内容压缩，使用分页 / 懒加载
- 缓存： 将内容缓存在起来，减少请求
- cookie
- 全局变量存储
- sessionStorage， localStorage
几种缓存的比较
| 特性 | cookie | sessionStorage | localStorage |
|---|---|---|---|
| 数据生命周期 | 一般由服务器生成，可以设置失效时间。若在浏览器端生成cookie，默认是关闭浏览器就失效 | 仅在当前会话中有效，关闭页面/关闭浏览器后被清除 | 除非手动清除浏览器缓存，否则永久保存 |
| 存放数据大小 | 很小，只有4K左右，一般用作存储登录状态 | 一般为5M | 一般为5M |
| 与服务器端通信 | 每次都会携带在HTTP请求头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端（浏览器）中保存，不参与和服务器的通信 | 仅在客户端（浏览器）中保存，不参与和服务器的通信 |
https://juejin.im/post/6844904112450994189
image.png
阶段性指标
| 字段 | 描述 | 计算方式 | 备注 |
|---|---|---|---|
| unload | 前一个页面卸载耗时 | unloadEventEnd - unloadEventStart | 前一个页面卸载时可能监听了 unload 做些数据收集，会影响页面跳转 |
| redirect | 重定向耗时 | redirectEnd - redirectStart | 过多重定向影响性能 |
| appCache | 缓存耗时 | domainLookupStart - fetchStart | |
| dns | DNS 解析耗时 | domainLookupEnd - domainLookupStart | |
| tcp | TCP 连接耗时 | connectEnd - connectStart | |
| ssl | SSL 安全连接耗时 | connectEnd - secureConnectionStart | 只在 HTTPS 下有效 |
| ttfb | Time to First Byte（TTFB），网络请求耗时 | responseStart - requestStart | |
| response | 数据传输耗时 | responseEnd - responseStart | |
| dom | 可交互 DOM 解析耗时 | domInteractive - responseEnd | Interactive content |
| dom2 | 剩余 DOM 解析耗时 | domContentLoadedEventStart - domInteractive | DOMContentLoaded 所有DOM元素都加载完毕(除了 async script) |
| DCL | DOMContentLoaded 事件耗时 | domContentLoadedEventEnd - domContentLoadedEventStart | document.addEventListener('DOMContentLoaded', cb) |
| resources | 资源加载耗时 | loadEventStart - domContentLoadedEventEnd | 完整DOM(DOMContentLoaded)到资源加载完毕(window.onLoad)时间 |
| onLoad | onLoad事件耗时 | loadEventEnd - loadEventStart |
