从移动设备测量 Web 应用程序的性能
Measure performance of web application from mobile
想通过我的 android 和 iOS 设备测量移动设备 Web 应用程序(在 Microsoft PowerApps 中设计)的性能。基本上,我对 UI 性能 KPI 和页面之间的响应时间更感兴趣。
想在没有模拟器的设备上执行此操作。是否有任何开源平台可以安装在移动设备上以实现此目的,对此有任何建议或解决方法吗?
找不到任何类似的 post。
衡量关键网络生命力
有一个很棒的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) and Time To Interactive (TTI).
为此,您将需要使用 PerformanceObserver 并查找在 First Contentful Paint 和 Time To Interactive 之间的所有长任务(大于 50 毫秒)。
互动时间同样复杂,您必须对此进行一些研究 (maybe start here),因为它很难实施,而且我也懒得在实时统计数据上跟踪它。
或者你可以调整 this polyfill for TTI
想通过我的 android 和 iOS 设备测量移动设备 Web 应用程序(在 Microsoft PowerApps 中设计)的性能。基本上,我对 UI 性能 KPI 和页面之间的响应时间更感兴趣。
想在没有模拟器的设备上执行此操作。是否有任何开源平台可以安装在移动设备上以实现此目的,对此有任何建议或解决方法吗?
找不到任何类似的 post。
衡量关键网络生命力
有一个很棒的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) and Time To Interactive (TTI).
为此,您将需要使用 PerformanceObserver 并查找在 First Contentful Paint 和 Time To Interactive 之间的所有长任务(大于 50 毫秒)。
互动时间同样复杂,您必须对此进行一些研究 (maybe start here),因为它很难实施,而且我也懒得在实时统计数据上跟踪它。
或者你可以调整 this polyfill for TTI