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