Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
perf-marks
Advanced tools
Changelog
[1.8.0][] - 2020-02-16
isPerformanceObservableSupported
boolean for check if PerformanceObservable
is supported for the current browser/NodeJS versionimport * as PerfMarks from 'perf-marks';
...
// Checking if `PerformanceObservable` is supported for the current browser/NodeJS version
if (PerfMarks.isPerformanceObservableSupported) {
try {
// If yes, start the PerformanceObserver
const observer: PerformanceObserver = new PerformanceObserver(list => {
// ... Do something
});
// register observer based on the entryTypes
// E.G. for long task notifications
observer.observe({ entryTypes: ['longtask'] });
} catch (e) {}
// ... Finishing the observer
observer.disconnect();
}
...
uglifyjs
to uglify-js
due to package deprecationReadme
That's the simplest and lightweight solution for User Timing API in Javascript. Simple how it should be.
You can find more details about it in the slides "User Timing API: because performance matters"
Please check our contributing.md to know more about setup and how to contribute.
Make sure that you are using the NodeJS version is the same as .nvmrc
file version. If you don't have this version please use a version manager such as nvm
or n
to manage your local nodejs versions.
Please make sure that you are using NodeJS version 6.10.2
Assuming that you are using nvm
, please run the commands inside this folder:
$ nvm install $(cat .nvmrc); # install required nodejs version
$ nvm use $(cat .nvmrc); # use nodejs version
In Windows, please install NodeJS using one of these options:
Via NVM Windows
package: Dowload via this link. After that, run the commands:
$ nvm install $(cat .nvmrc); # install required nodejs version
$ nvm use $(cat .nvmrc); # use nodejs version
Via Chocolatey:
$ choco install nodejs.install -version 6.10.2
We use yarn
as our package manager instead of npm
Install it following these steps
After that, just navigate to your local repository and run
$ yarn install
Try out our demo on Stackblitz!
$ yarn test # run the tests
$ yarn build # run the tests
$ yarn bundlesize # run the tests
$ yarn lint # run the tests
PerfMarks
This service exposes a few different methods with which you can interact with feature toggle service.
PerfMarks.start(markName)
Adds the user timing api marker instrumentation in your application.
import * as PerfMarks from 'perf-marks';
...
PerfMarks.start('name-of-your-mark');
...
PerfMarks.end(markName)
Returns the results for the specified marker.
PerfMarks.end(markName)
callsPerfMarks.clear(markName)
after return the mark values
import * as PerfMarks from 'perf-marks';
...
PerfMarks.start('name-of-your-mark');
...
const markResults: PerfMarks.PerfMarksPerformanceEntry = PerfMarks.end('name-of-your-mark');
PerfMarks.clear(markName)
Removes the specified marker
import * as PerfMarks from 'perf-marks';
...
PerfMarks.start('name-of-your-mark');
...
PerfMarks.clear('name-of-your-mark');
...
PerfMarks.clearAll()
Removes all the marker
import * as PerfMarks from 'perf-marks';
...
PerfMarks.start('name-of-your-mark');
PerfMarks.start('another-name-of-your-mark');
...
PerfMarks.clearAll();
...
PerfMarks.getNavigationMarker()
Gets the marks for navigation
loaded
import * as PerfMarks from 'perf-marks';
...
const markResults: PerfMarksPerformanceNavigationTiming = PerfMarks.getNavigationMarker();
...
PerfMarks.getEntriesByType(markName)
Gets the result for all marks that matches with the given mark name
import * as PerfMarks from 'perf-marks';
...
PerfMarks.start('name-of-your-mark');
PerfMarks.start('another-name-of-your-mark');
...
// It will return results for all the marks that matches with `name-of-your-mark`
// In this case, `name-of-your-mark` and `another-name-of-your-mark`
const markResult: PerfMarksPerformanceNavigationTiming[] = PerfMarks.getEntriesByType('name-of-your-mark');
...
PerfMarks.isUserTimingAPISupported
Boolean with the result of the check if User Timing API is supported for the current browser/NodeJS version.
PerfMarks
already have a fallback in case user timing is not supported. This boolean is exposed in case the app needs to check the case to use any other mechanism.
import * as PerfMarks from 'perf-marks';
...
if (PerfMarks.isUserTimingAPISupported) {
// ... Do something
}
...
PerfMarks.isPerformanceObservableSupported
Boolean with the result of the check if PerformanceObservable is supported for the current browser/NodeJS version.
PerfMarks
does not provide a fallback ifPerformanceObservable
is not supported. This boolean is exposed in case the app needs to check the case to use any other mechanism.
import * as PerfMarks from 'perf-marks';
...
// Checking if `PerformanceObservable` is supported for the current browser/NodeJS version
if (PerfMarks.isPerformanceObservableSupported) {
try {
// If yes, start the PerformanceObserver
const observer: PerformanceObserver = new PerformanceObserver(list => {
// ... Do something
});
// register observer based on the entryTypes
// E.G. for long task notifications
observer.observe({ entryTypes: ['longtask'] });
} catch (e) {}
// ... Finishing the observer
observer.disconnect();
}
...
These are entrypoints for specific components to be used carefully by the consumers. If you're using one of these entrypoints we are assuming you know what you are doing. So it means that code-splitting and tree-shaking should be done on the consumer/product side.
By definition it will use CJS as the main distribution entrypoint used in the app. However, this can be changed in the consumer's bundle step. This is the built-in scenario if the consumer uses toolings such as Webpack
, Rollup
, or Parcel
.
perf-marks/marks
: it has all the methods for marks
start
end
clear
clearAll
isUserTimingAPISupported
isPerformanceObservableSupported
perf-marks/entries
: it has all the methods to get entries
getNavigationMarker
getEntriesByType
If you need optimize your bundle size even more, this package provides different bundles for CommonJS
, UMD
, ESM
and ES2015
. To make the dev experience smoothiest as possible, you can use babel-plugin-transform-imports
in your app and configure the bundle that fits the most for your app!
yarn add -D babel-plugin-transform-imports
# or
npm install --save-dev babel-plugin-transform-imports
Create a .babelrc.js
file in the root directory of your project:
const plugins = [
[
'babel-plugin-transform-imports',
{
'perf-marks/perf-marks': {
// Use "transform: 'perf-marks/perf-marks/${member}'," if your bundler does not support ES modules
transform: 'perf-marks/dist/esm/${member}',
preventFullImport: true,
},
'perf-marks/entries': {
// Use "transform: 'perf-marks/entries/${member}'," if your bundler does not support ES modules
transform: 'perf-marks/entries/esm/${member}',
preventFullImport: true,
},
},
],
];
module.exports = { plugins };
Or just use it via babel-plugin-import
yarn add -D babel-plugin-import
# or
npm install --save-dev babel-plugin-import
Create a .babelrc.js
file in the root directory of your project:
const plugins = [
[
'babel-plugin-import',
{
libraryName: 'perf-marks/entries',
// Use "'libraryDirectory': ''," if your bundler does not support ES modules
libraryDirectory: 'esm',
camel2DashComponentName: false,
},
'entries',
],
];
module.exports = { plugins };
And enjoy! Yeah, it's simple like that 😉
this project is using np
package to publish, which makes things straightforward. EX: np <patch|minor|major>
For more details, please check np package on npmjs.com
Wilson Mendes (willmendesneto)
FAQs
The simplest and lightweight solution for User Timing API in Javascript.
The npm package perf-marks receives a total of 58,056 weekly downloads. As such, perf-marks popularity was classified as popular.
We found that perf-marks demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.