perf.js

/**
 *  npx babel perf.js --out-file perf.babel.js
 *  node perf.babel.js
 *
warm up: 4017.542ms
Plain React: 1304.261ms
Emotion Class: 1326.435ms
Emotion Styled: 1697.607ms
Plain React: 1513.957ms
Emotion Class: 1342.560ms
Emotion Styled: 1340.065ms
Plain React: 1314.434ms
Emotion Class: 1473.694ms
Emotion Styled: 1372.035ms
Plain React: 1589.475ms
Emotion Class: 1406.781ms
Emotion Styled: 1389.751ms
Plain React: 1401.891ms
Emotion Class: 1374.174ms
Emotion Styled: 1409.733ms 
 *
 */

/* eslint-disable no-console */
import React from 'react';
import { css } from 'emotion';
import styled from 'react-emotion';

const blueClass = css`
  color: blue;
`;

const StyledDiv = styled.div`
  ${blueClass};
`;

function div() {
  return 'div';
}

function plainReact() {
  return <div />;
}

function emotionClass() {
  return <div className={blueClass} />;
}

function emotionStyled() {
  return <StyledDiv />;
}

const iterations = 1000000;
console.time('warm up');
for (let i = 0; i < iterations; i += 1) {
  plainReact();
}
for (let i = 0; i < iterations; i += 1) {
  emotionClass();
}
for (let i = 0; i < iterations; i += 1) {
  emotionStyled();
}
console.timeEnd('warm up');

const MAX_RUNS = 5;

for (let j = 0; j < MAX_RUNS; j += 1) {
  console.time('Plain React');
  for (let i = 0; i < iterations; i += 1) {
    plainReact();
  }
  console.timeEnd('Plain React');

  console.time('Emotion Class');
  for (let i = 0; i < iterations; i += 1) {
    emotionClass();
  }
  console.timeEnd('Emotion Class');

  console.time('Emotion Styled');
  for (let i = 0; i < iterations; i += 1) {
    emotionStyled();
  }
  console.timeEnd('Emotion Styled');
}