Skip to content

Latest commit

 

History

History
213 lines (158 loc) · 10.2 KB

in-depth.md

File metadata and controls

213 lines (158 loc) · 10.2 KB

In-depth Analysis

The Web Tooling Benchmark contains interesting JavaScript workloads from a variety of commonly used web developer tools. It executes these core workloads a couple of times reports a single score at the end that balances them using geometric mean.

Note that scores of different versions of the Web Tooling Benchmark are not comparable to each other.

acorn

Acorn is a tiny, fast JavaScript parser, written completely in JavaScript. Acorn is the basis for many other JavaScript compiler and code analysis tools, i.e. webpack uses acorn and the Babylon parser used by Babel today is also based on acorn.

This benchmarks runs the Acorn tokenizer, the parser and the full AST (Abstract Syntax Tree) walker on several popular inputs, including

  • the Preact 8.2.5 bundle,
  • the lodash 4.17.4 bundle,
  • the underscore 1.8.3 bundle,
  • an ES2015 module containing the untranspiled Vue bundle,
  • the jQuery 3.2.1 distribution,
  • the minified Redux 3.7.2 distribution,
  • the Backbone.js 1.1.0 bundle,
  • and the (concatenated) JavaScript source for the Vanilla ES2015 test in the Speedometer.

babel

Babel is a transpiler that compiles modern JavaScipt (i.e. ES2015 and later) to an older JavaScript dialect (i.e. ES3 or ES5) that is understood by a broad set of browsers. It's probably the most popular transpiler at this point in time and used in the vast majority of web projects nowadays.

This benchmark runs the Babel transformation logic using the es2015 preset on a 196KiB ES2015 module containing the untranspiled Vue bundle. Note that this explicitly excludes the Babylon parser and only measures the throughput of the actual transformations. The parser is tested separately by the babylon benchmark below.

babel-minify

Babel Minify is an ES2015+ aware minifier based on the Babel toolchain. It is written as a set of Babel plugins.

This benchmark stresses the babel minifier on the (concatenated) JavaScript source for the ES2015 test in the Speedometer 2.0 benchmark.

babylon

Babylon is the frontend for the Babel transpiler and deals with transforming the JavaScript input into a so-called AST (Abstract Syntax Tree) that can be consumed by the core transformation logic in Babel. It is built on top of Acorn nowadays.

This benchmark runs the Babylon parser on different popular inputs, including the Preact 8.2.5 bundle, the lodash 4.17.4 bundle, the JSX files from the React TodoMVC example app, the underscore 1.8.3 bundle, an ES2015 module containing the untranspiled Vue bundle, the jQuery 3.2.1 distribution, the minified Redux 3.7.2 distribution, and the (concatenated) JavaScript source for the Vanilla ES2015 test in the Speedometer.

buble

A test to stress the Buble ES2015 compiler, both the parser and the actual transformation logic, on the same 196K ES2015 module containing the untranspiled Vue source code that is also used to stress by the babel and babylon tests.

chai

Chai is a popular BDD / TDD assertion library for Node and the browser that can be delightfully paired with any test driver framework for JavaScript. It is commonly used to write unit and integration tests. As such this test is not just a good benchmark for web tooling on the Node side, but is also very relevant to the browser as tests often need to be run in the browser too.

This benchmark is based on the test suite that comes with Chai and essentially uses the Chai BDD style interface to test the Chai library itself.

coffeescript

CoffeeScript is a little language that attempts to expose the good parts of JavaScript in a simple way. At some point CoffeeScript was very popular.

This benchmark runs the CoffeeScript compiler on the lexer.coffee file from the CoffeeScript 2.0.1 distribution.

espree

Espree started out as a fork of Esprima v1.2.2, the last stable published released of Esprima before work on ECMAScript 6 began. Espree is now built on top of Acorn, which has a modular architecture that allows extension of core functionality. The goal of Espree is to produce output that is similar to Esprima with a similar API so that it can be used in place of Esprima. The popular analysis framework ESLint is built on Espree today.

This benchmark runs Espree on a several common scripts, including

esprima

Esprima is a high performance, standard-compliant ECMAScript parser written in ECMAScript, which can be used to perform lexical analysis (tokenization) or syntactic analysis (parsing) of an ECMAScript program. Esprima was initially used as the basis for several tools like ESLint and Babel, and is still in use by a lot of analysis tools.

This benchmark runs both the tokenizer and the parser on a variety of common scripts, including

jshint

JSHint is a program that flags suspicious usage in programs written in JavaScript. At some point it was very popular, but nowadays it seems that many projects have switch or are switching to ESLint.

This benchmark runs JSHint on

lebab

Lebab transpiles your ES5 code to ES6/ES7, thus performing the opposite of what Babel does.

This benchmark runs the Lebal ES5 to ES6/ES7 transpiler on the Preact 8.2.5 bundle.

postcss

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

This benchmark runs the PostCSS processor with Autoprefixer and postcss-nested plugins on

prepack

Prepack is a tool that optimizes JavaScript source code: Computations that can be done at compile-time instead of run-time get eliminated. Prepack replaces the global code of a JavaScript bundle with equivalent code that is a simple sequence of assignments. This gets rid of most intermediate computations and object allocations. It currently focuses on React Native use cases.

This benchmark runs prepack on both

  • the Preact 8.2.5 bundle (unminified) as well as
  • the Redux 3.7.2 bundle (minified).

prettier

Prettier is an opinionated code formatter which removes all the original styling and ensures that all outputted code conforms to a consistent style. It is often used in web projects today to automatically format JavaScript, HTML, CSS and other files.

This benchmark runs prettier on different inputs, including

  • the lodash 4.17.4 bundle,
  • the Preact 8.2.5 bundle, and
  • the JSX files from the React todomvc example app.

source-map

Source Map is a library developed by Mozilla to generate and consume source maps, which in turn are used by browsers to display proper JavaScript when debugging a minified application.

This benchmark stresses the source-map tool on both parsing and serializing a variety of different source maps, including the Preact 8.2.5 source map.

terser

terser is a fork of uglify-es that retains API and CLI compatibility with uglify-es and uglify-js@3.

This benchmark stresses the new ES2015-and-beyond minifier on the (concatenated) JavaScript source for the ES2015 test in the Speedometer 2.0 benchmark.

typescript

TypeScript is a language for application-scale JavaScript. It adds optional types, classes, and modules to JavaScript, and compiles to readable, standards-based JavaScript.

This benchmark stresses the TypeScript compiler by running it on the typescript-angular example from todomvc.

uglify-js

UglifyJS is a JavaScript parser, minifier, compressor and beautifier toolkit, which is commonly used to minimize JavaScript bundles.

This benchmark runs the UglifyJS minifier on the (concatenated) JavaScript source for the ES2015 test in the Lodash module.