V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
PageSpeed 相关文档
为 NGINX 编译 PageSpeed 支持
ngx_pagespeed
Configuring mod_pagespeed Filters
加载性能测试工具
WebPagetest
Gomez
vevlins
V2EX  ›  前端优化

spa 应用白屏时间有什么好的测量方法?

  •  
  •   vevlins · 2020-02-26 14:56:21 +08:00 · 2679 次点击
    这是一个创建于 1717 天前的主题,其中的信息可能已经有所发展或是发生改变。
    1. 很多监控 sdk 使用的 domcontentloaded 等传统事件对 spa 来说根本没意义,又不是后端直出。

    2. 用 lighthouse 等测量 fcp 又有些不稳定,cli 和 chrome 插件两种方式差别很大,我看 issue 中维护者有提到当浏览器刚启动时会有一些准备工作,导致 lighthouse 每次新启动一个浏览器实例再测试网站有很多额外的消耗。

    3. 后来用 puppeteer 的 waitForSelector 监测内容区块,发现第一次访问效果会很差,后面几次降低,即使开启隐身模式禁用缓存也是如此,我怀疑 chrome 第一次访问做了一些预热工作,比如 tcp 连接、各层面的 cache。

    所以白屏时间到底应该怎么算,才能得到一个稳定的能够代表用户真实、随机访问下的指标?

    2 条回复    2022-06-26 22:27:19 +08:00
    momocraft
        1
    momocraft  
       2020-02-26 15:08:10 +08:00   ❤️ 1
    可以测量 PerformanceTiming 的 navigationStart 到 render 完成的时间

    另外预热,cache 这些东西,用真正的用户设备测一样会发生。
    liushuigs
        2
    liushuigs  
       2022-06-26 22:27:19 +08:00
    最准确地是自己打断点日志,统计各日志之间的时间差,得到 FCP 。想拿到域名解析、首页资源加载等时间,则需要供用 window.performance 接口。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5264 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 09:24 · PVG 17:24 · LAX 01:24 · JFK 04:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.