waterfall 妙用

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

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

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

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

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

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

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

相关推荐
珍宝商店1 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown1 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip2 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿3 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.4 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰4 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息4 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
卷Java5 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
gihigo19985 小时前
在CentOS上配置SVN至Web目录的自动同步
前端·svn·centos
珍宝商店5 小时前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript