Stats.js 插件详解及示例（完全攻略）

文章目录

- 一、核心概览
- - [1. 核心功能](#1. 核心功能)
  - [2. 适用场景](#2. 适用场景)
- 二、安装方式
- - [1. npm 安装（推荐）](#1. npm 安装（推荐）)
  - [2. CDN 引入](#2. CDN 引入)
  - [3. 书签一键注入（无需改代码）](#3. 书签一键注入（无需改代码）)
- 三、基础使用（最简示例）
- - [1. 原生 JS 用法](#1. 原生 JS 用法)
  - [2. ES Module 用法（Vue/React/Three.js）](#2. ES Module 用法（Vue/React/Three.js）)
- [四、核心 API 详解](#四、核心 API 详解)
- - [1. 实例化与面板控制](#1. 实例化与面板控制)
  - [2. 计时方法（二选一）](#2. 计时方法（二选一）)
  - [3. DOM 与样式控制](#3. DOM 与样式控制)
- 五、高级用法
- - [1. 自定义监控面板（CUSTOM）](#1. 自定义监控面板（CUSTOM）)
  - [2. 多实例监控（分模块性能）](#2. 多实例监控（分模块性能）)
  - [3. 内存监控启用（Chrome）](#3. 内存监控启用（Chrome）)
- [六、Three.js 集成示例（实战）](#六、Three.js 集成示例（实战）)
- 七、常见问题与优化
- - [1. Stats 影响性能？](#1. Stats 影响性能？)
  - [2. 内存面板不显示？](#2. 内存面板不显示？)
  - [3. 面板位置被遮挡？](#3. 面板位置被遮挡？)
- 八、与同类工具对比
- 九、总结

Stats.js 是前端/ WebGL 领域最常用的轻量级性能监控库，由 Mr.doob 开发，可实时显示 FPS、单帧耗时、内存占用，并支持自定义面板，是 Three.js、游戏、动画项目的必备调试工具。

一、核心概览

1. 核心功能

FPS：每秒渲染帧数（越高越好）
MS：单帧渲染耗时（毫秒，越低越好）
MB ：内存占用（需 Chrome 启动参数 --enable-precise-memory-info）
CUSTOM：自定义监控面板（≥3）

2. 适用场景

Three.js / WebGL 3D 项目性能调试
Canvas 动画、游戏帧率监控
复杂前端页面渲染性能分析
快速定位代码执行耗时瓶颈

二、安装方式

1. npm 安装（推荐）

bash 复制代码

npm install stats.js --save
# 或 yarn
yarn add stats.js

2. CDN 引入

html 复制代码

<script src="https://cdn.jsdelivr.net/npm/stats.js/build/stats.min.js"></script>

3. 书签一键注入（无需改代码）

javascript 复制代码

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

三、基础使用（最简示例）

1. 原生 JS 用法

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>Stats.js 基础示例</title>
  <style>body{margin:0;overflow:hidden;}</style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/stats.js/build/stats.min.js"></script>
  <script>
    // 1. 创建实例
    const stats = new Stats();
    // 2. 选择面板：0=FPS, 1=MS, 2=MB, 3+=自定义
    stats.showPanel(0);
    // 3. 挂载到页面
    document.body.appendChild(stats.dom);

    // 4. 动画循环中监控
    function animate() {
      stats.begin(); // 开始计时
      // 👉 你的渲染/动画代码
      stats.end();   // 结束计时
      requestAnimationFrame(animate);
    }
    animate();
  </script>
</body>
</html>

2. ES Module 用法（Vue/React/Three.js）

javascript 复制代码

import Stats from 'stats.js';

const stats = new Stats();
stats.showPanel(1); // 显示 MS 面板
document.body.appendChild(stats.dom);

function renderLoop() {
  stats.begin();
  // Three.js 渲染 / 业务逻辑
  stats.end();
  requestAnimationFrame(renderLoop);
}
renderLoop();

四、核心 API 详解

1. 实例化与面板控制

javascript 复制代码

const stats = new Stats(); // 创建实例

// 切换显示面板
stats.showPanel(0); // FPS（默认）
stats.showPanel(1); // 单帧耗时（MS）
stats.showPanel(2); // 内存（MB）
stats.showPanel(3); // 自定义面板

2. 计时方法（二选一）

begin() + end() ：精确包裹监控代码段
javascript 复制代码
```
stats.begin();
// 被监控代码
stats.end();
```
update() ：简化写法（自动计算上一次调用至今耗时）
javascript 复制代码
```
stats.update();
```

3. DOM 与样式控制

javascript 复制代码

// 定位到右上角
stats.dom.style.position = 'fixed';
stats.dom.style.top = '0';
stats.dom.style.right = '0';
stats.dom.style.zIndex = 9999;

// 隐藏/显示
stats.dom.style.display = 'none'; // 隐藏
stats.dom.style.display = 'block'; // 显示

五、高级用法

1. 自定义监控面板（CUSTOM）

javascript 复制代码

const stats = new Stats();
// 添加自定义面板（索引3）
const customPanel = stats.addPanel(new Stats.Panel('CUSTOM', '#ff0', '#220'));

function animate() {
  stats.begin();
  
  // 模拟自定义指标（如 draw call 数）
  const drawCalls = Math.random() * 1000;
  customPanel.update(drawCalls); // 更新自定义值
  
  stats.end();
  requestAnimationFrame(animate);
}
animate();

2. 多实例监控（分模块性能）

javascript 复制代码

// 监控渲染
const statsRender = new Stats();
statsRender.showPanel(1);
statsRender.dom.style.top = '0px';
document.body.appendChild(statsRender.dom);

// 监控逻辑
const statsLogic = new Stats();
statsLogic.showPanel(0);
statsLogic.dom.style.top = '50px';
document.body.appendChild(statsLogic.dom);

function animate() {
  // 渲染阶段
  statsRender.begin();
  // 渲染代码
  statsRender.end();
  
  // 逻辑阶段
  statsLogic.begin();
  // 业务逻辑
  statsLogic.end();
  
  requestAnimationFrame(animate);
}

3. 内存监控启用（Chrome）

Windows：右键 Chrome 快捷方式 → 属性 → 目标末尾添加：
复制代码
```
--enable-precise-memory-info
```

Mac：终端启动：

bash 复制代码

open -a "Google Chrome" --args --enable-precise-memory-info

六、Three.js 集成示例（实战）

javascript 复制代码

import * as THREE from 'three';
import Stats from 'stats.js';

// 1. 初始化 Stats
const stats = new Stats();
stats.showPanel(0);
document.body.appendChild(stats.dom);

// 2. Three.js 场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 3. 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;

// 4. 带 Stats 的渲染循环
function animate() {
  stats.begin(); // 开始监控
  
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
  
  stats.end(); // 结束监控
  requestAnimationFrame(animate);
}
animate();

七、常见问题与优化

1. Stats 影响性能？

Stats.js 本身开销极低（<0.1ms/帧），生产环境可通过条件编译移除。

生产环境禁用示例：

javascript 复制代码

if (process.env.NODE_ENV === 'development') {
  document.body.appendChild(stats.dom);
}

2. 内存面板不显示？

必须启用 Chrome 精确内存参数 --enable-precise-memory-info。
仅支持 Chromium 内核浏览器。

3. 面板位置被遮挡？

设置高 z-index（如 9999），或固定定位到角落。

八、与同类工具对比

工具	特点	适用场景
Stats.js	轻量、无依赖、易集成	WebGL/Canvas/动画项目
Lighthouse	全链路性能审计	生产环境性能评估
Chrome DevTools	完整性能分析	深度调试、火焰图
stats-gl	WebGL 专用、GPU 监控	高性能 3D 项目

九、总结

Stats.js 是前端性能调试的"瑞士军刀"，5 行代码即可接入，实时掌握 FPS、耗时、内存三大核心指标，是 WebGL/Three.js 项目的标配工具。