waterfall 妙用

平时在做性能优化的时候,针对于场景的网络请求,一般可以从

  • dns 解析
  • tcp 建立链接
  • tls 握手
  • 请求资源
  • 响应时间
  • 下载时间
  • 请求时序

这里我以请求时序为切入点,因为其余的分析,要结合实际项目场景,来定位分析,对于请求时序,首先可以分析出来整体的数据流向,以及各个请求的前后逻辑顺序.

我一开始遇到的场景是,由于首屏订阅以及请求数量较多,超出1.5秒了,所以通过waterfall定位会发现,由于前置请求一些请求时序晚,导致后续所依赖的后置请求全部延后,同时一些请求非并发处理,导致为串行请求,非常依赖之前的请求速度.

定位到问题后,处理方案就很清晰了

  1. 针对请求时序晚的问题,通过分析数据流,将耗时长,的请求,统一前置,避免它们影响到后续请求的速度
  2. 对于非并发请求,将同批次,同类请求,全部并发并限制到6个以内,因为chrome浏览器本身有并发限制.

我以掘金首页为例子 明显发现,第一张图中,第二段的请求,在前面请求完成后,才执行,但是我看这些请求其实并不完全依赖前面的请求,因此全部并发处理,也没有什么,其次第二张图,请求与请求之间,没有紧挨着,说明这些请求非常滞后,影响到了整个首屏加载速度,完全可以全部提前加载.

相关推荐
奋斗的小青年!!1 分钟前
Flutter在OpenHarmony上实现渐变文字动画的深度优化实践
前端·flutter·harmonyos·鸿蒙
梦6504 分钟前
Vue3 计算属性 (computed) 与监听属性 (watch)
前端·javascript·vue.js
六月June June19 分钟前
leaflet L.popup().setContent中挂载vue组件
前端·javascript·vue.js
首席拯救HMI官22 分钟前
【拯救HMI】HMI容错设计:如何减少操作失误并快速纠错?
大数据·运维·前端·javascript·网络·学习
m0_7482546628 分钟前
Vue.js 模板语法基础
前端·vue.js·flutter
PBitW36 分钟前
和AI浅聊了一下SEO —— 真神Astro
前端·seo
胆大如牛白展堂36 分钟前
自动刷新token登录
前端·设计模式
Charon_super36 分钟前
html语法笔记
前端·笔记·html
JeffreyTaiT37 分钟前
根据binlog恢复SQL
前端·mysql
Anita_Sun39 分钟前
Lodash 源码解读与原理分析 - Lodash 静态方法与原型方法
前端