stats.js 技术文档

1. 安装指南

通过 npm 安装

你可以通过 npm 来安装 stats.js，使用以下命令：

npm install stats.js

通过 CDN 引入

你也可以直接通过 CDN 引入 stats.js，在 HTML 文件中添加以下代码：

<script src="https://mrdoob.github.io/stats.js/build/stats.min.js"></script>

2. 项目的使用说明

stats.js 是一个用于监控 JavaScript 代码性能的工具，它提供了简单的信息框，帮助你实时监控代码的性能指标。

主要功能

• FPS：每秒渲染的帧数，数值越高越好。
• MS：渲染一帧所需的时间，单位为毫秒，数值越低越好。
• MB：分配的内存大小，单位为 MB。（需要在 Chrome 中使用 --enable-precise-memory-info 选项）
• CUSTOM：支持用户自定义的面板。

使用示例

以下是一个简单的使用示例，展示如何在网页中使用 stats.js 来监控代码性能：

var stats = new Stats();
stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild( stats.dom );

function animate() {

	stats.begin();

	// 需要监控的代码放在这里

	stats.end();

	requestAnimationFrame( animate );

}

requestAnimationFrame( animate );

书签工具

你还可以通过书签工具在任意网页中使用 stats.js，只需将以下代码保存为书签：

javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='https://mrdoob.github.io/stats.js/build/stats.min.js';document.head.appendChild(script);})()

3. 项目 API 使用文档

Stats 类

构造函数

var stats = new Stats();

创建一个新的 Stats 实例。

showPanel(type)

stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: custom

显示指定类型的面板：

• 0：FPS 面板
• 1：MS 面板
• 2：MB 面板
• 3+：自定义面板

begin()

stats.begin();

开始记录性能数据。

end()

stats.end();

结束记录性能数据，并更新面板显示。

update()

stats.update();

手动更新面板显示。

Panel 类

Panel 类用于创建自定义的面板。

构造函数

var panel = new Stats.Panel( name, color, bg );

• name：面板的名称。
• color：面板的前景色。
• bg：面板的背景色。

update(value, maxValue)

panel.update( value, maxValue );

更新面板的显示值。

4. 项目安装方式

通过 npm 安装

npm install stats.js

通过 CDN 引入

<script src="https://mrdoob.github.io/stats.js/build/stats.min.js"></script>

通过书签工具使用

将以下代码保存为书签，即可在任意网页中使用 stats.js：

javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='https://mrdoob.github.io/stats.js/build/stats.min.js';document.head.appendChild(script);})()

通过以上方式，你可以轻松地在项目中集成 stats.js，并实时监控代码的性能表现。