前端优化方案--缓存

一个页面的速度由什么来决定？

• 资源传输时间（TCP连接时间 + 响应时间）
• DOM渲染时间
• 查看方法： window.performance 可以查看所有的时间，内存使用情况

可以从以下三个方面优化速度：

1. 优化服务器连接时间，响应时间
   • 查看服务器连接时间，可以使用window.performance 来查看
2. 减少传输的内容体积和切片
   • 传输内容压缩，使用分页 / 懒加载
3. 缓存： 将内容缓存在起来，减少请求
   • 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