performance-mark-metadata
performance.mark
with custom meta data.
This library inspired by User Timing API Level 3.
This proposal will add details
as metadata to performance.mark
.
Supports
- 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
Install with npm:
npm install performance-mark-metadata
Usage
API
declare
PerformanceEntry is defined in User Timing API.
It is results of performance.getEntries()
, performance.getEntriesByName()
, and performance.getEntriesByType()
.
Example
;const marker = ;const metadata = details: key: "value" ;const markerName = "1";// mark with metadatamarker;performance;
Usage in Node.js
Node.js 8.5.0 introduce perf_hooks
module.
You pass require("perf_hooks").performance
to PerformanceMetadataMarker
constructor arguments.
;const nodePerformanceHook = ;const performance = nodePerformanceHookperformance;const marker = performance;marker;
UseCase
git clone https://github.com/azu/performance-mark-metadata.git
cd performance-mark-metadata/docs
npm install
open index.html
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 points
- Mark current Frame Per Seconds(FPS)
- Mark each action
Record FPS
const PerformanceMetadataMarker = ;const marker = ; const FpsEmitter = ;const fps = ;fps;
and record action
// heavy taskconst heavyTaskButton = document;heavyTaskButton
After that, you can get FPS and action logs.
const logData = performance;
Analytics
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".
Changelog
See Releases page.
Running tests
Install devDependencies and Run npm test
:
npm i -d && npm test
Contributing
Pull requests and stars are always welcome.
For bugs and feature requests, please create an issue.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Author
License
MIT © azu