在前端开发中，我们需要对网站性能进行统计和优化。这就需要一个统计工具。这里给大家推荐一款npm包——statsjs。
statsjs 是一个轻量级的 JavaScript 库，用于在浏览器和关键步骤中显示实时网站性能指标。它能够提供以下性能指标：
- FPS（每秒帧数）：即 Page Frames Per Second （页面每秒帧数），指的是在页面中每秒绘制多少帧。
- MS（每帧毫秒数）：即 Frame Time（每帧用时），指每帧渲染的平均时间，通常以毫秒计算。
- MB（内存使用）：即 Memory（内存占用），指在浏览器中使用的内存量。
(statsjs还支持其他参数，例如渲染时画面的渐变等)
接下来，我们就来一起学习如何使用这款工具来提高我们的网站性能！
安装
安装 statsjs 相对简单，我们只需要使用npm，在命令行中输入:
npm install stats-js --save
使用
1.引入 statsjs
在要使用的网页中引入以下文件：
<script src="https://cdn.bootcss.com/stats.js/r11/Stats.min.js"></script>
(statsjs也支持npm直接引入)
2.初始化 statsjs
-- -------------------- ---- ------- -- ----------- --- ----- - --- -------- -- ----------- -------------------------- --------- -- -- ------------ --------- --------- - --------------- ---------------------- ------- -- -----
3.测试代码
在任何动画已经存在的代码中添加statsjs是很简单的。我们只需在动画渲染的主循环内部引用stats.js，然后调用stats.update（）。这是一个使用stats.js示例的代码示例：
-- -------------------- ---- ------- --- ----- - --- -------- -- ----------------------- -------------------------- --------- -- -------- --------- - -------------- -- ------------ ------------ ---------------------- ------- -- - ---------------------- ------- --
stats.begin和stats.end 之间执行的代码将是您用于检测性能的主要部分。
如果您无法监控性能，您可以将statsjs从您的代码库中删除，即在主要循环中使用statsjs。否则，评估Performance 性能指标，以了解网站性能。所以，值得一提的是：stats.js不会影响页面性能。
这篇文章介绍了如何使用statsjs，并在例子中显示了一个场景。
statsjs是一个方便、实用的工具，可用于浏览器中的性能监测。它简单易用，可以让您更好、更快速地开发网站。为了更好地理解statsjs的功能，请尝试在线示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74193