从移动设备测量 Web 应用程序的性能

Question

想要从我的 android 和 iOS 设备测量移动设备（在 Microsoft PowerApps 中设计）的 Web 应用程序的性能。基本上，我对 UI 性能 KPI 和页面之间的响应时间更感兴趣。

想要从没有模拟器的设备上执行此操作。是否有任何可以安装在移动设备上的开源平台来实现这一点，对此有何建议或解决方法？

找不到任何类似的帖子。

Answer 1

衡量关键的网络生命体征

有一个很棒的library by Google to monitor web vitals。它可以让您实时监控，甚至可以将信息传输到 Google Analytics 或您自己的服务器。

此监视器

Cumulative Layout Shift (CLS)
First Input Delay (FID)
Largest Contentful Paint (LCP)
First Contentful Paint (FCP)
Time to First Byte (TTFB)

衡量其他指标

至于其他指标，它们可以（几乎）都来自window.performance。

这为您提供了计算加载时间等所需的所有信息。(taken from this answer)：

connectEnd                 Time when server connection is finished.
connectStart               Time just before server connection begins.
domComplete                Time just before document readiness completes.
domContentLoadedEventEnd   Time after DOMContentLoaded event completes.
domContentLoadedEventStart Time just before DOMContentLoaded starts.
domInteractive             Time just before readiness set to interactive.
domLoading                 Time just before readiness set to loading.
domainLookupEnd            Time after domain name lookup.
domainLookupStart          Time just before domain name lookup.
fetchStart                 Time when the resource starts being fetched.
loadEventEnd               Time when the load event is complete.
loadEventStart             Time just before the load event is fired.
navigationStart            Time after the previous document begins unload.
redirectCount              Number of redirects since the last non-redirect.
redirectEnd                Time after last redirect response ends.
redirectStart              Time of fetch that initiated a redirect.
requestStart               Time just before a server request.
responseEnd                Time after the end of a response or connection.
responseStart              Time just before the start of a response.
timing                     Reference to a performance timing object.
navigation                 Reference to performance navigation object.
performance                Reference to performance object for a window.
type                       Type of the last non-redirect navigation event.
unloadEventEnd             Time after the previous document is unloaded.
unloadEventStart           Time just before the unload event is fired.

两个比较难计算的

以上两项你唯一不能计算的就是Total Blocking Time (TBT)和Time To Interactive (TTI)。

为此，您需要使用 PerformanceObserver 并查找 First Contentful Paint 和 Time To Interactive 之间的所有长任务（大于 50 毫秒）。

互动时间同样复杂，您必须对此进行一些研究 (maybe start here)，因为它很难实施，而且我不会费心在实时统计数据中跟踪它。

或者你也可以适应this polyfill for TTI