一个页面的速度由什么来决定?
- 资源传输时间(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 |
网友评论