waterfall 妙用

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

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

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

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

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

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

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

相关推荐
mldong2 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排2 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby60613 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角4 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!4 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰4 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi6 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen6 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马7 小时前
AI源码分析:拆解模型底层实现逻辑
前端
IT_陈寒7 小时前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端