【亲测免费】 Stats.js 教程 - 监控Web应用性能

2026-01-16 10:40:16作者：董斯意

1. 项目目录结构及介绍

Stats.js 是一个轻量级的JavaScript库，用于监控Web应用程序的帧率（FPS）和其他性能指标。该项目的目录结构非常简单：

stats.js/
├── src/           # 源代码目录
│   └── stats.js   # 主要的源码文件
├── build/         # 构建后的文件存放目录
│   ├── stats.min.js  # 压缩后的生产版本
│   └── stats.js     # 未压缩的开发版本
└── index.html      # 示例页面

src/: 包含原始的JavaScript源代码。
build/: 存放构建后的文件，其中stats.min.js是适用于生产环境的压缩版，stats.js是未压缩的开发版。
index.html: 提供了一个简单的示例，展示如何在实际项目中集成和使用Stats.js。

2. 项目的启动文件介绍

Stats.js 没有传统意义上的“启动”文件，因为它是一个库，而不是一个可执行的应用程序。不过，你可以通过在HTML中引入stats.js来开始使用它。例如，在你的HTML文件中添加以下代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Stats.js 示例</title>
    <script src="path/to/stats.min.js"></script>
</head>
<body>
    <!-- 在这里创建一个用于显示统计信息的div元素 -->
    <div id="stats"></div>

    <script>
        // 创建一个Stats实例
        var stats = new Stats();
        // 将其附加到网页上的某个元素
        stats.setMode(0); // 0: fps, 1: ms
        document.getElementById('stats').appendChild(stats.dom);

        // 更新函数将在每一帧调用
        function update() {
            requestAnimationFrame(update);
            stats.update();
        }

        // 开始动画循环
        update();
    </script>
</body>
</html>