介绍
@probe.gl/stats 是一个 npm 包，提供了统计 WebGL 应用性能的功能。使用该包，开发者可以获取有关应用程序性能和帧率的数据，使其更容易地找到性能问题并优化应用程序。
安装
你可以使用 npm 命令行工具，在你的项目里安装 @probe.gl/stats 包
- -- --- --- ------- --------------- ------
或者，你可以通过 CDN 直接引入这个包。
------- -------------- ------ ------- ---- ------------------------------------------- ----- ----- - --- -------- --- ---------
如何使用
1. 创建 Stats 实例
首先，你需要创建 Stats 实例。通过创建 Stats 实例，可以使用 Stats API 记录、计算和显示 FPS 和其它性能数据。
------ ------- ---- ------------------ ----- ----- - --- -------
2. 设置模式
Stats 组件支持三种模式：METRICS、VISIBILITY 和 FPS。
METRICS
该模式输出帧率、GPU 内核时间以及其他性能指标。这个模式用于你需要手动监视性能指标时。
------------------------
FPS
该模式仅输出 FPS。
--------------------
VISIBILITY
当窗口失焦或浏览器标签被隐藏时，该模式会暂停集成的控件的更新，以减少资源使用。当窗口获焦或浏览器标签重新变为可见时，该控件恢复更新。
---------------------------
3. 开始和停止记录帧率
stats.recordFrame() 方法在每帧之前调用即可启动性能的监视。通过调用 stats.stop() 方法可以停止记录帧率。
-------- -------- - -------------------- --- - -------- ------- - -------------- - ------ -------------------- - -------- ------ - ------------- -
4. 定时统计数据
为了将记录的性能数据呈现给开发者，你需要在你的应用程序中定期调用 stats.getMetrics() 方法。该方法返回一个包含各种性能指标的对象。
-------- ---------- - ----- ------- - ------------------ --------------------- --- -
5. 设置度量器（Metric）
Stats 库有一些内置的度量器，可以用于度量计算渲染时间、帧率和内存占用等。
--------------------------------- -- ------ -------------- ----- ----------------- -- ------ -------------- ------------------ -- -------
用户可以自定义度量器来监测个性化指标，通过添加 Metric Definition 可以给控件增加度量器。Metric Definition 是一个对象，包含了如何度量数据的方法，然后使用 Metrics.add(metricDefinition) 函数将控件添加一个度量器。
----- ----------------- - -
----- ------- -------
-- ------ --- -------------- ------ ----
--------- ------------ -- -
-- ------ --- -------------- ------ ---- -- --- --- ---- --- ----
----- ----------- - --
------ ------------
-
--
-----------------------------现在，你可以在 metrics 对象上检索 newly-defined vertexCountMetric，然后在用户界面中显示它。
----- ------- - ------------------- --------------------------- ---------
示例代码
下面是一个完整的示例代码，帮助你快速上手 @probe.gl/stats：
------ ------- ---- ------------------
-- ------ ----- --------
----- ----- - --- --------
-- --- ---- - -------
-------------------------
-- ------ ----- ------ ---------
-------- -------- -
--------------------
---
-
-- --- ------- ----
-------- ---------- -
----- ------- - -------------------
---------------------
---
-
-- --- - ------ ------
----- ----------------- - -
----- ------- -------
--------- ------------ -- -
----- ----------- - ----
------ ------------
-
--
-----------------------------
-- ---- ----- ---------
-------- ------ -
-------------
-结论
@probe.gl/stats 是非常实用的一款 webGL 应用性能监控工具，能够帮助开发者更快地找到性能问题并进行优化，使代码更为高效。跟随本文的步骤，你可以轻松地使用并理解 @probe.gl/stats 这个 npm 包，在你的项目中应用调试，提升应用性能和用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f202e36403f2923b035c646