前言
在进行前端开发时，优化性能是非常重要的一项任务。为了更快地找到项目中的性能问题，并及时解决，我们需要使用一些工具。而 npm 包 tm-perfomance-check 就是其中一种非常优秀的工具。下面就让我们来详细介绍它的使用教程。
什么是 tm-perfomance-check
tm-perfomance-check 是一款基于 Puppeteer 的性能分析工具。它能够分析网站的性能指标，并生成 HTML 报告，方便我们查看分析结果。
安装
可以通过 npm 安装 tm-perfomance-check：
$ npm install -g tm-performance-check
安装完成后，你可以在命令行中使用 tm-performance-check 命令。
如何使用
使用 tm-perfomance-check 的流程非常简单，只需要执行以下两个步骤：
1. 编写测试脚本
我们需要编写一个测试脚本，告诉 Puppeteer 应该去哪个网页进行性能测试，并记录下需要测试的性能指标。
例如，我们要测试百度网站的加载速度和渲染速度，我们可以编写以下脚本：
-- -------------------- ---- ------- ----- -------------- - ------------------------- ----- - -------- ----------- --------- - - -------------------------------- ----- --- - ------------------------ ------ -- -- - ----- ------- - ----- --------------------- --------- ----- --- ----- ---- - ----- ----------------- ----- --------------- ----- ----------------- ----- ------------------ - ---------------- ----------------- ---------------------------------------- ----- ---------------- -----
2. 运行测试脚本
运行测试脚本时，需要指定 tm-perfomance-check 生成的 HTML 报告的存放路径。
例如，我们可以将指令改为：
$ tm-performance-check ./test.js --report path/to/report/
运行成功后，tm-perfomance-check 将会自动打开生成的 HTML 报告，你可以在里面查看你的测试结果。
性能指标
当你运行 tm-perfomance-check 时，它会帮你记录以下性能指标：
- 时间轴
- 是否含有分段渲染
- First Paint
- First Contentful Paint
- Time to Interactive
- DOM Content Loaded
- Load Event
你可以在测试脚本中自由选择需要记录的性能指标。
总结
以上就是关于 npm 包 tm-perfomance-check 的使用教程。希望这篇文章能够帮助到你在前端性能优化方面有所启迪。如果你对这个工具还有其他问题，可以去项目的 GitHub 页面 https://github.com/webperfmatters/tm-performance-check 进行学习和探讨。
示例代码
-- -------------------- ---- ------- ----- -------------- - ------------------------- ----- - -------- ----------- --------- - - -------------------------------- ----- --- - ------------------------ ------ -- -- - ----- ------- - ----- --------------------- --------- ----- --- ----- ---- - ----- ----------------- ----- --------------- ----- ----------------- ----- ------------------ - ---------------- ----------------- ---------------------------------------- ----- ---------------- -----
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728981e8991b448e8c01