BranchesTags

Repository files navigation

react-benchmark

Demo

A tool for benchmarking the render performance of React components.

It compiles the benchmark code into a minified production bundle using Webpack and then runs it in headless Chrome to benchmark the real production code in a real production environment.

Note: the benchmark numbers aren՚t completely accurate and should only be used relatively to compare the performance difference of code changes or different implementations.

Install

yarn global add react-benchmark
# or
npm install -g react-benchmark

Usage

Usage
$ react-benchmark <path>
Options
<path> Path to a JavaScript or TypeScript file that exports the function to be benchmarked.
--debug, -d Run a development build instead of a production build to aid debugging.
--devtools, -t Run Chrome in windowed mode with the devtools open.
--cpuThrottle=X Run Chrome with CPU throttled X times.
--version Prints the version.
--help Prints this message.
Examples
$ react-benchmark benchmark.js

The <path> file should export a function that returns the component instance you want to benchmark. For example:

importReactfrom'react'importComponentfrom'./src'exportdefaultfunction(){return<Componenthello="world"/>}

You can import anything that Webpack supports out of the box and your code will be transpiled with Babel using your local Babel config. TypeScript files are also supported out of the box.

API

react-benchmark exports a ReactBenchmark class that instantiates an event emitter with a .run() method. Calling the .run() method will start the benchmark with the provided options.

constReactBenchmark=require('react-benchmark')constreactBenchmark=newReactBenchmark()reactBenchmark.on('progress',(currentStats)=>{console.log(currentStats)})constresult=awaitreactBenchmark.run('benchmark.js')

See the CLI code for a full implementation example.

.run(filepath, options)

Starts the benchmark. Returns a Promise that will resolve to a Benchmark object containing the stats once the benchmark has been completed.

filepath

Type: String

Path to the benchmark file to run. See the Usage section for more details.

options

Type: Object Default: { debug: false, devtools: false, cpuThrottle: 1 }

Optional object containing additional options.

debug

Type: Boolean
Default: false

Run a development build instead of a production build to aid debugging.

devtools

Type: Boolean
Default: false

Run Chrome in windowed mode with the devtools open.

cpuThrottle

Type: number
Default: 1

Run Chrome with CPU throttled X times. Useful to receive more precise results between runs.

Events

webpack

Fired when the Webpack build has started.

server

Fired when the webserver has started.

chrome

Fired when Chrome has launched.

start

Fired when the actual benchmark starts.

progress

Fired every time a benchmark cycle has been completed. Gets passed a Benchmark object with the current stats. This event will be fired multiple times per run.

console

Fired every time something is logged to Chrome՚s console. Gets passed a {type, text} object.

License

react-benchmark is released under the ISC license.

Copyright © 2018, Roland Warmerdam.

About

A tool for benchmarking the render performance of React components

Topics

babelbenchmarkchromecommand-linecommand-line-tooljavascriptreacttypescriptwebpack

Resources

Readme
ISC license
Activity

Stars

114 stars

Watchers

1 watching

Forks

11 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
react-benchmark
Demo
A tool for benchmarking the render performance of React components.
It compiles the benchmark code into a minified production bundle using Webpack and then runs it in headless Chrome to benchmark the real production code in a real production environment.
Note: the benchmark numbers aren՚t completely accurate and should only be used relatively to compare the performance difference of code changes or different implementations.
Install
yarn global add react-benchmark
# or
npm install -g react-benchmark
Usage
Usage
$ react-benchmark <path>
Options
<path> Path to a JavaScript or TypeScript file that exports the function to be benchmarked.
--debug, -d Run a development build instead of a production build to aid debugging.
--devtools, -t Run Chrome in windowed mode with the devtools open.
--cpuThrottle=X Run Chrome with CPU throttled X times.
--version Prints the version.
--help Prints this message.
Examples
$ react-benchmark benchmark.js

The <path> file should export a function that returns the component instance you want to benchmark. For example:
importReactfrom'react'importComponentfrom'./src'exportdefaultfunction(){return<Componenthello="world"/>}
You can import anything that Webpack supports out of the box and your code will be transpiled with Babel using your local Babel config. TypeScript files are also supported out of the box.
API
react-benchmark exports a ReactBenchmark class that instantiates an event emitter with a .run() method. Calling the .run() method will start the benchmark with the provided options.
constReactBenchmark=require('react-benchmark')constreactBenchmark=newReactBenchmark()reactBenchmark.on('progress',(currentStats)=>{console.log(currentStats)})constresult=awaitreactBenchmark.run('benchmark.js')
See the CLI code for a full implementation example.
.run(filepath, options)
Starts the benchmark. Returns a Promise that will resolve to a Benchmark object containing the stats once the benchmark has been completed.
filepath
Type: String
Path to the benchmark file to run. See the Usage section for more details.
options
Type: Object
Default: { debug: false, devtools: false, cpuThrottle: 1 }
Optional object containing additional options.
debug
Type: Boolean

Default: false
Run a development build instead of a production build to aid debugging.
devtools
Type: Boolean

Default: false
Run Chrome in windowed mode with the devtools open.
cpuThrottle
Type: number

Default: 1
Run Chrome with CPU throttled X times. Useful to receive more precise results between runs.
Events
webpack
Fired when the Webpack build has started.
server
Fired when the webserver has started.
chrome
Fired when Chrome has launched.
start
Fired when the actual benchmark starts.
progress
Fired every time a benchmark cycle has been completed. Gets passed a Benchmark object with the current stats. This event will be fired multiple times per run.
console
Fired every time something is logged to Chrome՚s console. Gets passed a {type, text} object.
License
react-benchmark is released under the ISC license.
Copyright © 2018, Roland Warmerdam.
About
A tool for benchmarking the render performance of React components
Topics
babelbenchmarkchromecommand-linecommand-line-tooljavascriptreacttypescriptwebpack
Resources
Readme
ISC license
Activity
Stars
114 stars
Watchers
1 watching
Forks
11 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
react-benchmark
Demo
A tool for benchmarking the render performance of React components.
It compiles the benchmark code into a minified production bundle using Webpack and then runs it in headless Chrome to benchmark the real production code in a real production environment.
Note: the benchmark numbers aren՚t completely accurate and should only be used relatively to compare the performance difference of code changes or different implementations.
Install
yarn global add react-benchmark
# or
npm install -g react-benchmark
Usage
Usage
$ react-benchmark <path>
Options
<path> Path to a JavaScript or TypeScript file that exports the function to be benchmarked.
--debug, -d Run a development build instead of a production build to aid debugging.
--devtools, -t Run Chrome in windowed mode with the devtools open.
--cpuThrottle=X Run Chrome with CPU throttled X times.
--version Prints the version.
--help Prints this message.
Examples
$ react-benchmark benchmark.js

The <path> file should export a function that returns the component instance you want to benchmark. For example:
importReactfrom'react'importComponentfrom'./src'exportdefaultfunction(){return<Componenthello="world"/>}
You can import anything that Webpack supports out of the box and your code will be transpiled with Babel using your local Babel config. TypeScript files are also supported out of the box.
API
react-benchmark exports a ReactBenchmark class that instantiates an event emitter with a .run() method. Calling the .run() method will start the benchmark with the provided options.
constReactBenchmark=require('react-benchmark')constreactBenchmark=newReactBenchmark()reactBenchmark.on('progress',(currentStats)=>{console.log(currentStats)})constresult=awaitreactBenchmark.run('benchmark.js')
See the CLI code for a full implementation example.
.run(filepath, options)
Starts the benchmark. Returns a Promise that will resolve to a Benchmark object containing the stats once the benchmark has been completed.
filepath
Type: String
Path to the benchmark file to run. See the Usage section for more details.
options
Type: Object
Default: { debug: false, devtools: false, cpuThrottle: 1 }
Optional object containing additional options.
debug
Type: Boolean

Default: false
Run a development build instead of a production build to aid debugging.
devtools
Type: Boolean

Default: false
Run Chrome in windowed mode with the devtools open.
cpuThrottle
Type: number

Default: 1
Run Chrome with CPU throttled X times. Useful to receive more precise results between runs.
Events
webpack
Fired when the Webpack build has started.
server
Fired when the webserver has started.
chrome
Fired when Chrome has launched.
start
Fired when the actual benchmark starts.
progress
Fired every time a benchmark cycle has been completed. Gets passed a Benchmark object with the current stats. This event will be fired multiple times per run.
console
Fired every time something is logged to Chrome՚s console. Gets passed a {type, text} object.
License
react-benchmark is released under the ISC license.
Copyright © 2018, Roland Warmerdam.
About
A tool for benchmarking the render performance of React components
Topics
babelbenchmarkchromecommand-linecommand-line-tooljavascriptreacttypescriptwebpack
Resources
Readme
ISC license
Activity
Stars
114 stars
Watchers
1 watching
Forks
11 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
react-benchmark
Demo
A tool for benchmarking the render performance of React components.
It compiles the benchmark code into a minified production bundle using Webpack and then runs it in headless Chrome to benchmark the real production code in a real production environment.
Note: the benchmark numbers aren՚t completely accurate and should only be used relatively to compare the performance difference of code changes or different implementations.
Install
yarn global add react-benchmark
# or
npm install -g react-benchmark
Usage
Usage
$ react-benchmark <path>
Options
<path> Path to a JavaScript or TypeScript file that exports the function to be benchmarked.
--debug, -d Run a development build instead of a production build to aid debugging.
--devtools, -t Run Chrome in windowed mode with the devtools open.
--cpuThrottle=X Run Chrome with CPU throttled X times.
--version Prints the version.
--help Prints this message.
Examples
$ react-benchmark benchmark.js

The <path> file should export a function that returns the component instance you want to benchmark. For example:
importReactfrom'react'importComponentfrom'./src'exportdefaultfunction(){return<Componenthello="world"/>}
You can import anything that Webpack supports out of the box and your code will be transpiled with Babel using your local Babel config. TypeScript files are also supported out of the box.
API
react-benchmark exports a ReactBenchmark class that instantiates an event emitter with a .run() method. Calling the .run() method will start the benchmark with the provided options.
constReactBenchmark=require('react-benchmark')constreactBenchmark=newReactBenchmark()reactBenchmark.on('progress',(currentStats)=>{console.log(currentStats)})constresult=awaitreactBenchmark.run('benchmark.js')
See the CLI code for a full implementation example.
.run(filepath, options)
Starts the benchmark. Returns a Promise that will resolve to a Benchmark object containing the stats once the benchmark has been completed.
filepath
Type: String
Path to the benchmark file to run. See the Usage section for more details.
options
Type: Object
Default: { debug: false, devtools: false, cpuThrottle: 1 }
Optional object containing additional options.
debug
Type: Boolean

Default: false
Run a development build instead of a production build to aid debugging.
devtools
Type: Boolean

Default: false
Run Chrome in windowed mode with the devtools open.
cpuThrottle
Type: number

Default: 1
Run Chrome with CPU throttled X times. Useful to receive more precise results between runs.
Events
webpack
Fired when the Webpack build has started.
server
Fired when the webserver has started.
chrome
Fired when Chrome has launched.
start
Fired when the actual benchmark starts.
progress
Fired every time a benchmark cycle has been completed. Gets passed a Benchmark object with the current stats. This event will be fired multiple times per run.
console
Fired every time something is logged to Chrome՚s console. Gets passed a {type, text} object.
License
react-benchmark is released under the ISC license.
Copyright © 2018, Roland Warmerdam.
About
A tool for benchmarking the render performance of React components
Topics
babelbenchmarkchromecommand-linecommand-line-tooljavascriptreacttypescriptwebpack
Resources
Readme
ISC license
Activity
Stars
114 stars
Watchers
1 watching
Forks
11 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
react-benchmark
Demo
A tool for benchmarking the render performance of React components.
It compiles the benchmark code into a minified production bundle using Webpack and then runs it in headless Chrome to benchmark the real production code in a real production environment.
Note: the benchmark numbers aren՚t completely accurate and should only be used relatively to compare the performance difference of code changes or different implementations.
Install
yarn global add react-benchmark
# or
npm install -g react-benchmark
Usage
Usage
$ react-benchmark <path>
Options
<path> Path to a JavaScript or TypeScript file that exports the function to be benchmarked.
--debug, -d Run a development build instead of a production build to aid debugging.
--devtools, -t Run Chrome in windowed mode with the devtools open.
--cpuThrottle=X Run Chrome with CPU throttled X times.
--version Prints the version.
--help Prints this message.
Examples
$ react-benchmark benchmark.js

The <path> file should export a function that returns the component instance you want to benchmark. For example:
importReactfrom'react'importComponentfrom'./src'exportdefaultfunction(){return<Componenthello="world"/>}
You can import anything that Webpack supports out of the box and your code will be transpiled with Babel using your local Babel config. TypeScript files are also supported out of the box.
API
react-benchmark exports a ReactBenchmark class that instantiates an event emitter with a .run() method. Calling the .run() method will start the benchmark with the provided options.
constReactBenchmark=require('react-benchmark')constreactBenchmark=newReactBenchmark()reactBenchmark.on('progress',(currentStats)=>{console.log(currentStats)})constresult=awaitreactBenchmark.run('benchmark.js')
See the CLI code for a full implementation example.
.run(filepath, options)
Starts the benchmark. Returns a Promise that will resolve to a Benchmark object containing the stats once the benchmark has been completed.
filepath
Type: String
Path to the benchmark file to run. See the Usage section for more details.
options
Type: Object
Default: { debug: false, devtools: false, cpuThrottle: 1 }
Optional object containing additional options.
debug
Type: Boolean

Default: false
Run a development build instead of a production build to aid debugging.
devtools
Type: Boolean

Default: false
Run Chrome in windowed mode with the devtools open.
cpuThrottle
Type: number

Default: 1
Run Chrome with CPU throttled X times. Useful to receive more precise results between runs.
Events
webpack
Fired when the Webpack build has started.
server
Fired when the webserver has started.
chrome
Fired when Chrome has launched.
start
Fired when the actual benchmark starts.
progress
Fired every time a benchmark cycle has been completed. Gets passed a Benchmark object with the current stats. This event will be fired multiple times per run.
console
Fired every time something is logged to Chrome՚s console. Gets passed a {type, text} object.
License
react-benchmark is released under the ISC license.
Copyright © 2018, Roland Warmerdam.
About
A tool for benchmarking the render performance of React components
Topics
babelbenchmarkchromecommand-linecommand-line-tooljavascriptreacttypescriptwebpack
Resources
Readme
ISC license
Activity
Stars
114 stars
Watchers
1 watching
Forks
11 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
react-benchmark
Demo
A tool for benchmarking the render performance of React components.
It compiles the benchmark code into a minified production bundle using Webpack and then runs it in headless Chrome to benchmark the real production code in a real production environment.
Note: the benchmark numbers aren՚t completely accurate and should only be used relatively to compare the performance difference of code changes or different implementations.
Install
yarn global add react-benchmark
# or
npm install -g react-benchmark
Usage
Usage
$ react-benchmark <path>
Options
<path> Path to a JavaScript or TypeScript file that exports the function to be benchmarked.
--debug, -d Run a development build instead of a production build to aid debugging.
--devtools, -t Run Chrome in windowed mode with the devtools open.
--cpuThrottle=X Run Chrome with CPU throttled X times.
--version Prints the version.
--help Prints this message.
Examples
$ react-benchmark benchmark.js

The <path> file should export a function that returns the component instance you want to benchmark. For example:
importReactfrom'react'importComponentfrom'./src'exportdefaultfunction(){return<Componenthello="world"/>}
You can import anything that Webpack supports out of the box and your code will be transpiled with Babel using your local Babel config. TypeScript files are also supported out of the box.
API
react-benchmark exports a ReactBenchmark class that instantiates an event emitter with a .run() method. Calling the .run() method will start the benchmark with the provided options.
constReactBenchmark=require('react-benchmark')constreactBenchmark=newReactBenchmark()reactBenchmark.on('progress',(currentStats)=>{console.log(currentStats)})constresult=awaitreactBenchmark.run('benchmark.js')
See the CLI code for a full implementation example.
.run(filepath, options)
Starts the benchmark. Returns a Promise that will resolve to a Benchmark object containing the stats once the benchmark has been completed.
filepath
Type: String
Path to the benchmark file to run. See the Usage section for more details.
options
Type: Object
Default: { debug: false, devtools: false, cpuThrottle: 1 }
Optional object containing additional options.
debug
Type: Boolean

Default: false
Run a development build instead of a production build to aid debugging.
devtools
Type: Boolean

Default: false
Run Chrome in windowed mode with the devtools open.
cpuThrottle
Type: number

Default: 1
Run Chrome with CPU throttled X times. Useful to receive more precise results between runs.
Events
webpack
Fired when the Webpack build has started.
server
Fired when the webserver has started.
chrome
Fired when Chrome has launched.
start
Fired when the actual benchmark starts.
progress
Fired every time a benchmark cycle has been completed. Gets passed a Benchmark object with the current stats. This event will be fired multiple times per run.
console
Fired every time something is logged to Chrome՚s console. Gets passed a {type, text} object.
License
react-benchmark is released under the ISC license.
Copyright © 2018, Roland Warmerdam.
About
A tool for benchmarking the render performance of React components
Topics
babelbenchmarkchromecommand-linecommand-line-tooljavascriptreacttypescriptwebpack
Resources
Readme
ISC license
Activity
Stars
114 stars
Watchers
1 watching
Forks
11 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
react-benchmark
Demo
A tool for benchmarking the render performance of React components.
It compiles the benchmark code into a minified production bundle using Webpack and then runs it in headless Chrome to benchmark the real production code in a real production environment.
Note: the benchmark numbers aren՚t completely accurate and should only be used relatively to compare the performance difference of code changes or different implementations.
Install
yarn global add react-benchmark
# or
npm install -g react-benchmark
Usage
Usage
$ react-benchmark <path>
Options
<path> Path to a JavaScript or TypeScript file that exports the function to be benchmarked.
--debug, -d Run a development build instead of a production build to aid debugging.
--devtools, -t Run Chrome in windowed mode with the devtools open.
--cpuThrottle=X Run Chrome with CPU throttled X times.
--version Prints the version.
--help Prints this message.
Examples
$ react-benchmark benchmark.js

The <path> file should export a function that returns the component instance you want to benchmark. For example:
importReactfrom'react'importComponentfrom'./src'exportdefaultfunction(){return<Componenthello="world"/>}
You can import anything that Webpack supports out of the box and your code will be transpiled with Babel using your local Babel config. TypeScript files are also supported out of the box.
API
react-benchmark exports a ReactBenchmark class that instantiates an event emitter with a .run() method. Calling the .run() method will start the benchmark with the provided options.
constReactBenchmark=require('react-benchmark')constreactBenchmark=newReactBenchmark()reactBenchmark.on('progress',(currentStats)=>{console.log(currentStats)})constresult=awaitreactBenchmark.run('benchmark.js')
See the CLI code for a full implementation example.
.run(filepath, options)
Starts the benchmark. Returns a Promise that will resolve to a Benchmark object containing the stats once the benchmark has been completed.
filepath
Type: String
Path to the benchmark file to run. See the Usage section for more details.
options
Type: Object
Default: { debug: false, devtools: false, cpuThrottle: 1 }
Optional object containing additional options.
debug
Type: Boolean

Default: false
Run a development build instead of a production build to aid debugging.
devtools
Type: Boolean

Default: false
Run Chrome in windowed mode with the devtools open.
cpuThrottle
Type: number

Default: 1
Run Chrome with CPU throttled X times. Useful to receive more precise results between runs.
Events
webpack
Fired when the Webpack build has started.
server
Fired when the webserver has started.
chrome
Fired when Chrome has launched.
start
Fired when the actual benchmark starts.
progress
Fired every time a benchmark cycle has been completed. Gets passed a Benchmark object with the current stats. This event will be fired multiple times per run.
console
Fired every time something is logged to Chrome՚s console. Gets passed a {type, text} object.
License
react-benchmark is released under the ISC license.
Copyright © 2018, Roland Warmerdam.
About
A tool for benchmarking the render performance of React components
Topics
babelbenchmarkchromecommand-linecommand-line-tooljavascriptreacttypescriptwebpack
Resources
Readme
ISC license
Activity
Stars
114 stars
Watchers
1 watching
Forks
11 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
react-benchmark
Demo
A tool for benchmarking the render performance of React components.
It compiles the benchmark code into a minified production bundle using Webpack and then runs it in headless Chrome to benchmark the real production code in a real production environment.
Note: the benchmark numbers aren՚t completely accurate and should only be used relatively to compare the performance difference of code changes or different implementations.
Install
yarn global add react-benchmark
# or
npm install -g react-benchmark
Usage
Usage
$ react-benchmark <path>
Options
<path> Path to a JavaScript or TypeScript file that exports the function to be benchmarked.
--debug, -d Run a development build instead of a production build to aid debugging.
--devtools, -t Run Chrome in windowed mode with the devtools open.
--cpuThrottle=X Run Chrome with CPU throttled X times.
--version Prints the version.
--help Prints this message.
Examples
$ react-benchmark benchmark.js

The <path> file should export a function that returns the component instance you want to benchmark. For example:
importReactfrom'react'importComponentfrom'./src'exportdefaultfunction(){return<Componenthello="world"/>}
You can import anything that Webpack supports out of the box and your code will be transpiled with Babel using your local Babel config. TypeScript files are also supported out of the box.
API
react-benchmark exports a ReactBenchmark class that instantiates an event emitter with a .run() method. Calling the .run() method will start the benchmark with the provided options.
constReactBenchmark=require('react-benchmark')constreactBenchmark=newReactBenchmark()reactBenchmark.on('progress',(currentStats)=>{console.log(currentStats)})constresult=awaitreactBenchmark.run('benchmark.js')
See the CLI code for a full implementation example.
.run(filepath, options)
Starts the benchmark. Returns a Promise that will resolve to a Benchmark object containing the stats once the benchmark has been completed.
filepath
Type: String
Path to the benchmark file to run. See the Usage section for more details.
options
Type: Object
Default: { debug: false, devtools: false, cpuThrottle: 1 }
Optional object containing additional options.
debug
Type: Boolean

Default: false
Run a development build instead of a production build to aid debugging.
devtools
Type: Boolean

Default: false
Run Chrome in windowed mode with the devtools open.
cpuThrottle
Type: number

Default: 1
Run Chrome with CPU throttled X times. Useful to receive more precise results between runs.
Events
webpack
Fired when the Webpack build has started.
server
Fired when the webserver has started.
chrome
Fired when Chrome has launched.
start
Fired when the actual benchmark starts.
progress
Fired every time a benchmark cycle has been completed. Gets passed a Benchmark object with the current stats. This event will be fired multiple times per run.
console
Fired every time something is logged to Chrome՚s console. Gets passed a {type, text} object.
License
react-benchmark is released under the ISC license.
Copyright © 2018, Roland Warmerdam.
About
A tool for benchmarking the render performance of React components
Topics
babelbenchmarkchromecommand-linecommand-line-tooljavascriptreacttypescriptwebpack
Resources
Readme
ISC license
Activity
Stars
114 stars
Watchers
1 watching
Forks
11 forks
Report repository
Releases
Packages
Used by
Contributors
Languages