spa前端渲染项目,fp fcp这些统计还有意义不?

spa前端渲染项目,fp fcp这些统计还有意义不?

问题描述:

1. 现在都是单页面前端渲染,这些fp fcp统计还有意义不?怎么改进统计

fcp lcp指标计算出值的时候,页面上可能根本没有渲染出Ajax请求的数据,页面还是无效的状态对用户


2. 如何实现监控具体某个模块加载渲染完成的时间?比如首页第一屏某个关键模块渲染完成,这个作为统计指标,怎么去实现这个时间戳?

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,这些统计是有意义的,我们可以根据这些指标来分析从在浏览器中解析地址到DOM渲染整个流程中所消耗的时间,如果渲染过慢了可以根据这些指标定位到具体流程从而进行优化,“fcp lcp指标计算出值的时候,页面上可能根本没有渲染出Ajax请求的数据”这是因为fcp、lcp这些指标是同步的 ,ajax请求属于异步,浏览器中没有指标来监控异步事件,第二个问题,监控页面中某个模块渲染完成的事件可以参考曝光埋点事件通过IntersectionObserver监听元素加载渲染完成的时间,在第25周《前端监控平台之JS 库开发》的第五章 前端监控曝光和点击日志上报功能开发中 有详细的教学案例。

  • xthj 提问者 #1

    第二个问题有问题,用IntersectionObserver去观察思路看上去可以,但是目标dom都没渲染出来,咋去观察呢,想解决的问题是怎么第一时间知道目标dom已经渲染出来了,然后上报这个时间点有意义

    2022-06-23 23:35:14
  • 扬_灵 回复 提问者 xthj #2

    同学你好,IntersectionObserver中有threshold阀值参数,可以监听DOM是否渲染完成。

    2022-06-24 10:07:03
  • xthj 提问者 回复 扬_灵 #3

    还是没明白我意思,别忘了IntersectionObserver.observe的入参必须是元素,元素都还没渲染出来,这个IntersectionObserver.observe方法都没法调用,根本就没法去监听啊!

    2022-07-08 17:29:29
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师