I've created performance-mark-metadata.
This library provide performance.mark with custom meta data.
This library inspired by User Timing API Level 3 proposal.
This proposal will add details as metadata to performance.mark.
Currently, Performance.mark() API can not add metadata to marking.
- Modern browser and Node.js >= 8.5.0
- They are supported Performance.mark() API.
- Performance Timing API | Node.js v9.2.0 Documentation
Old browser need to Performance.mark() polyfill.
Install with npm:
npm install performance-mark-metadata
https://gist.github.com/a975fec9a1bcef1bf10e838c14db537a
Node.js 8.5.0 introduce perf_hooks module.
You can use this library by passing require("perf_hooks").performance to PerformanceMetadataMarker constructor arguments.
https://gist.github.com/8ff0ad4cc7db6dade239671bf8ca3be4
This example show actual usage.
You want to found performance problem on viewing the site.
You can analyze the problem by using performance-mark-metadata.
It is useful for Real user monitoring(RUM). In development, you can use browser's development tools, but it is difficult about RUM.
- Mark current Frame Per Seconds(FPS)
- Mark each action like "onClick"
Record FPS
https://gist.github.com/cdd6f7c565c96b90f05406b41cd8928a
and record action
https://gist.github.com/1424990b259606d427cefa177de5ff74
After that, you can get FPS and action logs.
https://gist.github.com/0b3a0694a3281787cf8b82651f0d3df3
You can get the log data and analyze the log data.
For example, visualize the log data by using C3.js.
You can found the relationship between "FPS" and "Heavy Task". As a result, You can found that the performance problem is caused by "Heavy Task".
- Example source code: performance-mark-metadata/docs/
- azu/performance-mark-metadata:
performance.markwith custom meta data.
Welcome to ⭐️ and Pull Request!