performance - 从移动设备测量 Web 应用程序的性能
问题描述
想要从我的 android 和 iOS 设备测量移动设备(在 Microsoft PowerApps 中设计)的 Web 应用程序的性能。基本上,我对 UI 性能 KPI 和页面之间的响应时间更感兴趣。
想要从没有模拟器的设备上执行此操作。是否有任何可以安装在移动设备上的开源平台来实现这一点,对此有何建议或任何解决方法?
找不到类似的帖子。
解决方案
衡量关键的网络生命力
谷歌有一个很棒的库来监控网络生命体征。它可以让您实时监控,甚至可以将信息传输到 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
.
这为您提供了计算加载时间等所需的所有信息(取自此答案):
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 毫秒)。
互动时间同样复杂,您必须对此进行一些研究(也许从这里开始),因为它很难实施,而且我不会费心在实时统计数据上跟踪它。
或者你可以只为 TTI 调整这个 polyfill
推荐阅读
- javascript - React app superagent 在生产中返回 html 而不是 json
- android - 当我在 android 中应用安全 args 插件(应用插件:“androidx.navigation.safeargs.kotlin”)时,显示以下错误
- go - windows机器上设置GOPATH值的问题
- javascript - 使用 6 个条件对对象数组进行排序
- python - 如何在同一个 repl.it 项目中运行两个 Flask discord.py 机器人?
- postgresql - 使用 Docker 创建 postgres 容器时出错
- python - IPTCInfo 关键字错误 - 未显示所有关键字
- node.js - 如何在不使用 child_process 的情况下使用 nodejs 运行 shell 命令?
- javascript - Express JS - 在服务器中添加路由来处理 POST 请求
- .htaccess - 当文件夹与 .html 文件同名时,删除 URL 中的 .html 扩展名