简介
weallbehave 是一个用于前端性能监控的 npm 包，它可以帮助开发者实时监控前端页面在用户浏览器中的渲染速度、资源加载时间、JavaScript 执行性能等方面的情况，以便及时优化和改善页面性能。
安装
npm install --save weallbehave
使用方法
初始化
在代码中引入 weallbehave 并初始化：
import { WeAllBehave } from 'weallbehave'
const web = new WeAllBehave({
id: 'your-project-id',
url: 'http://your-backend.com/receiver'
})这个项目需要在 Weallbehave 注册后获取 id 和 url 参数。其中 id 参数是项目唯一标识符，url 参数是数据上报接口地址。
开始监控
在合适的位置调用 web.start() 即可开始监控：
web.start()
监控数据
weallbehave 监控了以下数据：
- 页面渲染时间：即白屏时间（白屏时间是指从打开页面到页面有东西显示出来的时间，这里的时间是指 TTFB 时间）；
- 首次渲染时间：即页面内容第一次渲染完成的时间；
- 首次可交互时间：即页面内容渲染完成后，用户可以进行交互的时间；
- 资源加载耗时：包括 HTML、CSS、JavaScript、图片等资源的加载时间；
- JavaScript 执行性能：包括 JavaScript 运行时间和 CPU 占用率。
使用示例：
web.on('data', (data) => {
console.log(data)
})停止监控
调用 web.stop() 可以停止监控：
web.stop()
示例代码
-- -------------------- ---- ------- ------ - ----------- - ---- ------------- ----- --- - --- ------------- --- ------------------ ---- ---------------------------------- -- -------------- ------ -- - ----------------- -- ----------- ------------- -- - ---------- -- -----
总结
weallbehave 是一款非常实用的前端性能监控工具，可以帮助我们更加准确地了解页面性能情况，并及时优化和改善页面性能。它的使用也非常简单，只需要引入并初始化即可开始监控。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/40012