https://github.com/jamiemason/karma-benchmark
A Karma plugin to run Benchmark.js over multiple browsers with CI compatible output.
https://github.com/jamiemason/karma-benchmark
benchmark benchmarking javascript karma karma-plugin nodejs performance profiling
Last synced: 2 months ago
JSON representation
A Karma plugin to run Benchmark.js over multiple browsers with CI compatible output.
- Host: GitHub
- URL: https://github.com/jamiemason/karma-benchmark
- Owner: JamieMason
- License: mit
- Created: 2013-05-21T14:57:52.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2023-02-16T23:29:43.000Z (over 2 years ago)
- Last Synced: 2025-04-02T11:08:43.989Z (3 months ago)
- Topics: benchmark, benchmarking, javascript, karma, karma-plugin, nodejs, performance, profiling
- Language: TypeScript
- Homepage:
- Size: 1.85 MB
- Stars: 91
- Watchers: 7
- Forks: 16
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# karma-benchmark
> A [Karma](http://karma-runner.github.io/) plugin to run [Benchmark.js](http://benchmarkjs.com/) over multiple browsers with CI compatible output.
[](https://www.npmjs.com/package/karma-benchmark) [](https://www.npmjs.com/package/karma-benchmark) [](https://travis-ci.org/JamieMason/karma-benchmark) [](https://codeclimate.com/github/JamieMason/karma-benchmark/maintainability)
## Table of Contents
- [🌩 Installation](#-installation)
- [🕵🏾♀️ Reporters](#♀️-reporters)
- [⚖️ Configuration](#️-configuration)
- [👩🏻🔬 Writing Benchmarks](#-writing-benchmarks)
- [🙋🏾♂️ Getting Help](#♂️-getting-help)
- [👀 Other Projects](#-other-projects)
- [🤓 Author](#-author)
## 🌩 Installation
npm install --save-dev benchmark karma-benchmark
## 🕵🏾♀️ Reporters
- [karma-benchmark-json-reporter](https://github.com/etpinard/karma-benchmark-json-reporter) by [@etpinard](https://github.com/etpinard/)
- [karma-benchmark-plotly-reporter](https://github.com/etpinard/karma-benchmark-plotly-reporter) by [@etpinard](https://github.com/etpinard/)
- [karma-benchmarkjs-reporter](https://github.com/FormidableLabs/karma-benchmarkjs-reporter) by [@FormidableLabs](https://github.com/FormidableLabs/)
- [karma-benchmark-reporter](https://github.com/lazd/karma-benchmark-reporter) by [@lazd](https://github.com/lazd/)
## ⚖️ Configuration
In **karma.conf.js**, add `'benchmark'` to the list of **frameworks**:
```js
module.exports = config => {
config.set({
autoWatch: false,
browsers: ["Chrome"],
concurrency: 1,
files: ["bench/**/*.bench.js"],
frameworks: ["benchmark"],
singleRun: true
});
};
```
### Terminal Reporting
Now let's add [`karma-benchmarkjs-reporter`](https://github.com/FormidableLabs/karma-benchmarkjs-reporter) by [@FormidableLabs](https://github.com/FormidableLabs/) to report results to the Terminal:
npm install --save-dev karma-benchmarkjs-reporter
In **karma.conf.js**, add `'benchmark'` to the list of **reporters**:
```diff
module.exports = (config) => {
config.set({
autoWatch: false,
browsers: ['Chrome'],
concurrency: 1,
files: ['bench/**/*.bench.js'],
frameworks: ['benchmark'],
+ reporters: ['benchmark'],
singleRun: true
});
};
```
### JUnit Reporting
To feed our data into Continuous Integration, we can use the [`karma-junit-reporter`](https://github.com/karma-runner/karma-junit-reporter).
npm install --save-dev karma-junit-reporter
In **karma.conf.js**, add `junit` to the list of **reporters** and configure the reporter accordingly:
```diff
module.exports = (config) => {
config.set({
autoWatch: false,
browsers: ['Chrome'],
concurrency: 1,
files: ['bench/**/*.bench.js'],
frameworks: ['benchmark'],
+ junitReporter: {
+ outputDir: 'reports',
+ outputFile: 'benchmark.xml'
+ },
- reporters: ['benchmark'],
+ reporters: ['benchmark', 'junit'],
singleRun: true
});
};
```
### Data Visualisation Reporting
With a free [plot.ly](https://plot.ly) account, we can generate visualisations using the [karma-benchmark-plotly-reporter](https://github.com/etpinard/karma-benchmark-plotly-reporter) by [@etpinard](https://github.com/etpinard/).
npm install --save-dev karma-benchmark-plotly-reporter
In **karma.conf.js**, add `benchmark-plotly` to the list of **reporters** and configure the reporter accordingly:
```diff
module.exports = (config) => {
config.set({
autoWatch: false,
+ benchmarkPlotlyReporter: {
+ username: '',
+ apiKey: '',
+ cloudFilename: 'plotly-example',
+ imageFilename: 'plotly-example.png'
+ },
browsers: ['Chrome'],
concurrency: 1,
files: ['bench/**/*.bench.js'],
frameworks: ['benchmark'],
junitReporter: {
outputDir: 'reports',
outputFile: 'benchmark.xml'
},
- reporters: ['benchmark', 'junit'],
+ reporters: ['benchmark', 'benchmark-plotly', 'junit'],
singleRun: true
});
};
```
## 👩🏻🔬 Writing Benchmarks
Benchmarks can be written by using the original [Benchmark.js](https://benchmarkjs.com) API, but a wrapper API is also provided by karma-benchmark in the form of the `suite` and `benchmark` globals. The karma-benchmark API aims to make the process of writing Benchmarks feel familiar to users of [Jasmine](https://jasmine.github.io/) or [Jest](https://jestjs.io/).
In this example, a suite is defined that pits `_.each` against the native `Array.forEach` method:
```js
suite("Array iteration", () => {
benchmark("_.each", () => {
_.each([1, 2, 3], el => {
return el;
});
});
benchmark("native forEach", () => {
[1, 2, 3].forEach(el => {
return el;
});
});
});
```
### Suite options
Suite options are the same as in Benchmark.js with one exception: `onStart` and `onComplete` can be set at the suite level.
See the [Benchmark.js Suite constructor API docs](http://benchmarkjs.com/docs#Suite) for a full list of options.
```js
suite(
"Array iteration",
() => {
benchmark("_.each", () => {
_.each(this.list, number => {
return number;
});
});
benchmark("native forEach", () => {
this.list.forEach(number => {
return number;
});
});
},
{
onCycle(event) {
var suite = this;
var benchmark = event.target;
console.log("Cycle completed for " + suite.name + ": " + benchmark.name);
},
onStart() {
this.list = [5, 4, 3];
},
onComplete() {
this.list = null;
}
}
);
```
### Benchmark options
Benchmark options are the same as in Benchmark.js. If `setup` and `teardown` are passed to `benchmark()`, they will override `setup` and `teardown` from the suite. Pass `null` or undefined to remove them.
See the [Benchmark.js Benchmark constructor API docs](http://benchmarkjs.com/docs#Benchmark) for a full list of options.
```js
suite("Iteration", () => {
benchmark(
"_.each with array",
() => {
_.each(this.list, number => {
return number;
});
},
{
setup() {
this.list = ["a", "b", "c"];
},
teardown() {
delete this.list;
}
}
);
benchmark(
"_.each with object",
() => {
_.each(this.list, number => {
return number;
});
},
{
setup() {
this.list = { 0: "a", 1: "b", 2: "c" };
},
teardown() {
delete this.list;
}
}
);
});
```
### Running only a specific benchmark or suite
To run only a specific benchmark, use `benchmark.only()` or `bbenchmark()` instead of `benchmark()`:
```js
benchmark.only(() => {
// Only this benchmark will run
// bbenchmark() does the same thing
});
benchmark(() => {
// This benchmark won't run
});
```
The same applies to suites with `suite.only()` and `ssuite()`.
### Skipping benchmarks & suites
To skip a benchmark, use `benchmark.skip()` or `xbenchmark()` instead of `benchmark()`:
```js
benchmark.skip(() => {
// This benchmark won't run
// xbenchmark() does the same thing
});
benchmark(() => {
// This and all other benchmarks will run
});
```
The same applies to suites with `suite.skip()` and `xsuite()`.
## 🙋🏾♂️ Getting Help
Get help with issues by creating a [Bug Report] or discuss ideas by opening a [Feature Request].
[bug report]: https://github.com/JamieMason/karma-benchmark/issues/new?template=bug_report.md
[feature request]: https://github.com/JamieMason/karma-benchmark/issues/new?template=feature_request.md
## 👀 Other Projects
If you find my Open Source projects useful, please share them ❤️
- [**eslint-formatter-git-log**](https://github.com/JamieMason/eslint-formatter-git-log)
ESLint Formatter featuring Git Author, Date, and Hash
- [**eslint-plugin-move-files**](https://github.com/JamieMason/eslint-plugin-move-files)
Move and rename files while keeping imports up to date
- [**eslint-plugin-prefer-arrow-functions**](https://github.com/JamieMason/eslint-plugin-prefer-arrow-functions)
Convert functions to arrow functions
- [**ImageOptim-CLI**](https://github.com/JamieMason/ImageOptim-CLI)
Automates ImageOptim, ImageAlpha, and JPEGmini for Mac to make batch optimisation of images part of your automated build process.
- [**Jasmine-Matchers**](https://github.com/JamieMason/Jasmine-Matchers)
Write Beautiful Specs with Custom Matchers
- [**self-help**](https://github.com/JamieMason/self-help#readme)
Interactive Q&A Guides for Web and the Command Line
- [**syncpack**](https://github.com/JamieMason/syncpack#readme)
Manage multiple package.json files, such as in Lerna Monorepos and Yarn Workspaces
## 🤓 Author
I'm [Jamie Mason] from [Leeds] in England, I began Web Design and Development in 1999 and have been Contracting and offering Consultancy as Fold Left Ltd since 2012. Who I've worked with includes [Sky Sports], [Sky Bet], [Sky Poker], The [Premier League], [William Hill], [Shell], [Betfair], and Football Clubs including [Leeds United], [Spurs], [West Ham], [Arsenal], and more.
[![Follow JamieMason on GitHub][github badge]][github] [![Follow fold_left on Twitter][twitter badge]][twitter]
[github badge]: https://img.shields.io/github/followers/JamieMason.svg?style=social&label=Follow
[twitter badge]: https://img.shields.io/twitter/follow/fold_left.svg?style=social&label=Follow
[arsenal]: https://www.arsenal.com
[betfair]: https://www.betfair.com
[github]: https://github.com/JamieMason
[jamie mason]: https://www.linkedin.com/in/jamiemasonleeds
[leeds united]: https://www.leedsunited.com/
[leeds]: https://www.instagram.com/visitleeds
[premier league]: https://www.premierleague.com
[shell]: https://www.shell.com
[sky bet]: https://www.skybet.com
[sky poker]: https://www.skypoker.com
[sky sports]: https://www.skysports.com
[spurs]: https://www.tottenhamhotspur.com
[twitter]: https://twitter.com/fold_left
[west ham]: https://www.whufc.com
[william hill]: https://www.williamhill.com