{"id":20014702,"url":"https://github.com/willmendesneto/perf-marks","last_synced_at":"2025-04-05T18:05:25.734Z","repository":{"id":42680940,"uuid":"215291010","full_name":"willmendesneto/perf-marks","owner":"willmendesneto","description":"The isomorphic, simplest, and lightweight solution for User Timing API in Javascript - 🚀 only 208B 🚀. Tree-shaking and entry points built-in. Simple as that!","archived":false,"fork":false,"pushed_at":"2025-03-26T10:44:12.000Z","size":1806,"stargazers_count":36,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-31T20:51:31.601Z","etag":null,"topics":["frontend","hacktoberfest","javascript","perf-marks","user-timing","webperformance"],"latest_commit_sha":null,"homepage":"https://github.com/willmendesneto/perf-marks","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/willmendesneto.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"contributing.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-10-15T12:16:50.000Z","updated_at":"2023-12-24T13:22:33.000Z","dependencies_parsed_at":"2024-03-19T18:55:08.391Z","dependency_job_id":"3470f8c8-c782-4320-b9e3-8126fa05c63b","html_url":"https://github.com/willmendesneto/perf-marks","commit_stats":{"total_commits":154,"total_committers":5,"mean_commits":30.8,"dds":"0.24025974025974028","last_synced_commit":"6fee5c6765e479ea9d7f3956f206680f65c4fac1"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fperf-marks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fperf-marks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fperf-marks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fperf-marks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/willmendesneto","download_url":"https://codeload.github.com/willmendesneto/perf-marks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378138,"owners_count":20929296,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend","hacktoberfest","javascript","perf-marks","user-timing","webperformance"],"created_at":"2024-11-13T07:43:33.592Z","updated_at":"2025-04-05T18:05:25.699Z","avatar_url":"https://github.com/willmendesneto.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Perf-marks\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/willmendesneto/perf-marks.svg)](https://greenkeeper.io/)\n[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/perf-marks-playground)\n\n[![npm version](https://badge.fury.io/js/perf-marks.svg)](http://badge.fury.io/js/perf-marks) [![npm downloads](https://img.shields.io/npm/dm/perf-marks.svg)](https://npmjs.org/perf-marks)\n[![MIT License](https://img.shields.io/badge/license-MIT%20License-blue.svg?style=flat-square)](LICENSE)\n\n[![Build Status](https://circleci.com/gh/willmendesneto/perf-marks.svg?style=shield)](https://circleci.com/gh/willmendesneto/perf-marks)\n[![Coverage Status](https://coveralls.io/repos/willmendesneto/perf-marks/badge.svg?branch=master)](https://coveralls.io/r/willmendesneto/perf-marks?branch=master)\n[![Dependency Status](https://david-dm.org/willmendesneto/perf-marks.svg)](https://david-dm.org/willmendesneto/perf-marks)\n\n[![NPM](https://nodei.co/npm/perf-marks.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://npmjs.org/perf-marks)\n[![NPM](https://nodei.co/npm-dl/perf-marks.png?height=3\u0026months=3)](https://npmjs.org/perf-marks)\n\n![Perf marks](./images/perf-marks.png)\n\n### Why perf-marks?\n\n\u003e If you want to get more details about that, please read [\"Cross-platform performance measurements with User Timing API and perf-marks\"](https://willmendesneto.com/posts/cross-platform-performance-measurements-with-user-timing-apiand-perf-marks) blog post\n\nThat's the simplest and lightweight solution for [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) in Javascript. Simple how it should be.\n\nYou can find more details about it in the slides \"[User Timing API: because performance matters](http://bit.ly/user-timing-api-because-perf-matters)\"\n\n## Contributing\n\nPlease check our [contributing.md](https://github.com/willmendesneto/perf-marks/blob/master/contributing.md) to know more about setup and how to contribute.\n\n## Setup and installation\n\nMake 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.\n\n\u003e Please make sure that you are using NodeJS version 6.10.2\n\nAssuming that you are using `nvm`, please run the commands inside this folder:\n\n```bash\n$ nvm install $(cat .nvmrc); # install required nodejs version\n$ nvm use $(cat .nvmrc); # use nodejs version\n```\n\nIn Windows, please install NodeJS using one of these options:\n\nVia `NVM Windows` package: Dowload via [this link](https://github.com/coreybutler/nvm-windows). After that, run the commands:\n\n```bash\n$ nvm install $(cat .nvmrc); # install required nodejs version\n$ nvm use $(cat .nvmrc); # use nodejs version\n```\n\nVia Chocolatey:\n\n```bash\n$ choco install nodejs.install -version 6.10.2\n```\n\n### Install yarn\n\nWe use `yarn` as our package manager instead of `npm`\n\n[Install it following these steps](https://yarnpkg.com/lang/en/docs/install/#mac-tab)\n\nAfter that, just navigate to your local repository and run\n\n```bash\n$ yarn install\n```\n\n## Demo\n\nTry out our [demo on Stackblitz](https://perf-marks-playground.stackblitz.io)!\n\n![Perf marks in action](./images/perf-marks-in-action.gif)\n\n### Run the tests\n\n```bash\n$ yarn test # run the tests\n```\n\n### Run the build\n\n```bash\n$ yarn build # run the tests\n```\n\n### Run the bundlesize check\n\n```bash\n$ yarn bundlesize # run the tests\n```\n\n### Run the code lint\n\n```bash\n$ yarn lint # run the tests\n```\n\n## `PerfMarks`\n\nThis service exposes a few different methods with which you can interact with feature toggle service.\n\n### `PerfMarks.start(markName)`\n\nAdds the user timing api marker instrumentation in your application.\n\n```js\nimport * as PerfMarks from 'perf-marks';\n\n...\nPerfMarks.start('name-of-your-mark');\n...\n```\n\n### `PerfMarks.end(markName, markNameToCompare)`\n\nReturns the results for the specified marker.\n\n\u003e `PerfMarks.end(markName)` calls `PerfMarks.clear(markName)` after return the mark values\n\nIf `markNameToCompare` value is not passed, the package will create a mark using `markName + '-end'`. Otherwise, it will compare based on the given mark.\n\n\u003e If you're passing `markNameToCompare` value, please make sure you're also started the mark with the same name previously\n\n```js\nimport * as PerfMarks from 'perf-marks';\n\n...\nPerfMarks.start('name-of-your-mark');\n...\nconst markResults: PerfMarks.PerfMarksPerformanceEntry = PerfMarks.end('name-of-your-mark');\n```\n\n### `PerfMarks.clear(markName)`\n\nRemoves the specified marker\n\n```js\nimport * as PerfMarks from 'perf-marks';\n\n...\nPerfMarks.start('name-of-your-mark');\n...\nPerfMarks.clear('name-of-your-mark');\n...\n```\n\n### `PerfMarks.clearAll()`\n\nRemoves all the markers\n\n```js\nimport * as PerfMarks from 'perf-marks';\n\n...\nPerfMarks.start('name-of-your-mark');\nPerfMarks.start('another-name-of-your-mark');\n...\nPerfMarks.clearAll();\n...\n```\n\n### `PerfMarks.getNavigationMarker()`\n\nGets the marks for `navigation` loaded\n\n```js\nimport * as PerfMarks from 'perf-marks';\n\n...\nconst markResults: PerfMarksPerformanceNavigationTiming = PerfMarks.getNavigationMarker();\n...\n```\n\n### `PerfMarks.getEntriesByType(markName)`\n\nGets the result for all marks that matches with the given mark name\n\n```js\nimport * as PerfMarks from 'perf-marks';\n\n...\nPerfMarks.start('name-of-your-mark');\nPerfMarks.start('another-name-of-your-mark');\n...\n// It will return results for all the marks that matches with `name-of-your-mark`\n// In this case, `name-of-your-mark` and `another-name-of-your-mark`\nconst markResult: PerfMarksPerformanceNavigationTiming[] = PerfMarks.getEntriesByType('name-of-your-mark');\n...\n```\n\n### `PerfMarks.isUserTimingAPISupported`\n\nBoolean with the result of the check if User Timing API is supported for the current browser/NodeJS version.\n\n\u003e `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.\n\n```js\nimport * as PerfMarks from 'perf-marks';\n\n...\nif (PerfMarks.isUserTimingAPISupported) {\n  // ... Do something\n}\n...\n```\n\n### `PerfMarks.isPerformanceObservableSupported`\n\nBoolean with the result of the check if PerformanceObservable is supported for the current browser/NodeJS version.\n\n\u003e `PerfMarks` does not provide a fallback if `PerformanceObservable` is not supported. This boolean is exposed in case the app needs to check the case to use any other mechanism.\n\n```js\nimport * as PerfMarks from 'perf-marks';\n\n...\n// Checking if `PerformanceObservable` is supported for the current browser/NodeJS version\nif (PerfMarks.isPerformanceObservableSupported) {\n  try {\n  // If yes, start the PerformanceObserver\n    const observer: PerformanceObserver = new PerformanceObserver(list =\u003e {\n      // ... Do something\n    });\n\n    // register observer based on the entryTypes\n    // E.G. for long task notifications\n    observer.observe({ entryTypes: ['longtask'] });\n  } catch (e) {}\n  // ... Finishing the observer\n  observer.disconnect();\n}\n...\n```\n\n### `PerfMarks.profiler()`\n\nRuns profiler using User Timing Api method to get user timing information. It will return a Promise with `mark` key with a `PerfMarksPerformanceEntry` type OR `mark` key + `data` key with the content for the callback method If the given callback returns something.\n\n```js\nconst methodToBeMeasured = () =\u003e {\n  /** method content */\n};\n// `res` will contain `mark` with the information and `data`\n// if `methodToBeMeasured` returns something\nconst { mark, data } = PerfMarks.profiler(methodToBeMeasured, 'name-of-the-mark-for-this-method');\n```\n\n## Entrypoints\n\nThese 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.\n\nBy 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`.\n\n### Exposed entrypoints\n\n- `perf-marks/marks`: it has all the methods for marks\n  - `start`: Frontend and Backend support\n  - `end`: Frontend and Backend support\n  - `clear`: Frontend and Backend support\n  - `clearAll`: Frontend and Backend support\n  - `isUserTimingAPISupported`: _Deprecated (will be removed in v2). Use the value imported from `perf-marks/utils` instead_. Frontend and Backend support\n  - `isPerformanceObservableSupported`: _Deprecated (will be removed in v2). Use the value imported from `perf-marks/utils` instead_. Frontend and Backend support\n- `perf-marks/entries`: it has all the methods to get entries\n  - `getNavigationMarker`: Frontend support only\n  - `getEntriesByType`: frontend support only\n- `perf-marks/utils`: it has all the feature, and platform checks and validations\n  - `isNodeJSEnv`: Frontend and Backend support. Boolean with the result of the check if package is running on the browser or in a NodeJS environment\n  - `isPerformanceObservableSupported`: Frontend and Backend support. Boolean with the result of the check if `PerformanceObservable` is supported for the current browser/NodeJS version\n  - `isUserTimingAPISupported`: Frontend and Backend support. Boolean with the result of the check if User Timing API is supported for the current browser/NodeJS version\n- `perf-marks/profiler`: it has all the feature, and platform checks and validations\n  - `profiler`: Frontend and Backend support. profiler using User Timing Api method. It will return a Promise with `mark` key with a `PerfMarksPerformanceEntry` type or `mark` key + `data` key with the content for the callback method If the given callback returns something.\n\nIf you need optimize your bundle size even more, this package provides different bundles for `CommonJS`, `UMD`, `ESM`, `ES2015` and `ES2020`. 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!\n\n\u003e Also, please make sure you configured your module bundler to support these optimized bundles based on your development loop. For Webpack, please check https://webpack.js.org/configuration/resolve/#resolvemainfields for more details or look for the module bundler documentation you're currently using.\n\n```bash\nyarn add -D babel-plugin-transform-imports\n# or\nnpm install --save-dev babel-plugin-transform-imports\n```\n\nCreate a `.babelrc.js` file in the root directory of your project:\n\n```js\nconst plugins = [\n  [\n    'babel-plugin-transform-imports',\n    {\n      'perf-marks/perf-marks': {\n        // Use \"transform: 'perf-marks/perf-marks/${member}',\" if your bundler does not support ES modules\n        transform: 'perf-marks/dist/esm/${member}',\n        preventFullImport: true,\n      },\n      'perf-marks/entries': {\n        // Use \"transform: 'perf-marks/entries/${member}',\" if your bundler does not support ES modules\n        transform: 'perf-marks/entries/esm/${member}',\n        preventFullImport: true,\n      },\n    },\n  ],\n];\n\nmodule.exports = { plugins };\n```\n\nOr just use it via `babel-plugin-import`\n\n```bash\nyarn add -D babel-plugin-import\n# or\nnpm install --save-dev babel-plugin-import\n```\n\nCreate a `.babelrc.js` file in the root directory of your project:\n\n```js\nconst plugins = [\n  [\n    'babel-plugin-import',\n    {\n      libraryName: 'perf-marks/entries',\n      // Use \"'libraryDirectory': '',\" if your bundler does not support ES modules\n      libraryDirectory: 'esm',\n      camel2DashComponentName: false,\n    },\n    'entries',\n  ],\n];\n\nmodule.exports = { plugins };\n```\n\nAnd enjoy! Yeah, it's simple like that 😉\n\n## Publish\n\nthis project is using `np` package to publish, which makes things straightforward. EX: `np \u003cpatch|minor|major\u003e`\n\n\u003e For more details, [please check np package on npmjs.com](https://www.npmjs.com/package/np)\n\n## Author\n\n**Wilson Mendes (willmendesneto)**\n\n- \u003chttps://twitter.com/willmendesneto\u003e\n- \u003chttp://github.com/willmendesneto\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillmendesneto%2Fperf-marks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillmendesneto%2Fperf-marks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillmendesneto%2Fperf-marks/lists"}