JS Performance: State of the Art

Karim Alibhai

CTO @ HireFast

npm install karimsa

karim@hirefast.ca

Hiring on autopilot.

Disclaimer

Measure twice, cut once!

How does JS work?

karim@hirefast.ca

Write

Parse

Compile

Run

Devs write clear code

Transform code into AST

AST transforms into machine code

Machine code is executed

Lifecycle of a Program

karim@hirefast.ca

Write

Parse

Compile

Run

dev time

Compiled Languages

dev time

Interpreted Languages

Compiled vs. Interpreted Languages

karim@hirefast.ca

  • Browsers must download JS before parsing (Networks are slow)

  • Mobile CPUs are slow (Parsing takes time)

Performance Killers

karim@hirefast.ca

bitly.com/2kJ6u79

karim@hirefast.ca

Write

Parse

Compile

Run

Parse

Compile

JS engine

karim@hirefast.ca

What the heck is minification?

  • Goal: Reduce physical file size of the code

  • Rewrite JS to smaller JS with the same functionality

karim@hirefast.ca

Strategy #1: Remove whitespaces

  • Removes unnecessary whitespaces

  • Started by JSMIN back in 2003 (thanks Doug Crockford!)

karim@hirefast.ca

Strategy #1: Remove whitespaces

270 bytes

219 bytes

const mockStdout = []
const isTestEnv = process.env.NODE_ENV === 'test'

function sayHello(greeting, name) {
  const message = `${greeting}, ${name}!`

  if (isTestEnv) {
    mockStdout.push(message)
  } else {
    console.log(message)
  }
}

sayHello('Hello', 'world')

const mockStdout=[],isTestEnv=process.env.NODE_ENV==='test',sayHello=(greeting,name)=>{const message=`${greeting}, ${name}!`;if(isTestEnv){mockStdout.push(message)}else{console.log(message)}};sayHello('Hello', 'world')

karim@hirefast.ca

Strategy #2: Mangling

  • Rewrites variable bindings to take less bytes

  • Same example as before:

const a = []
const b = process.env.NODE_ENV === 'test'

function c(d, e) {
  const f = `${d}, ${e}!`

  if (b) {
    a.push(f)
  } else {
    console.log(f)
  }
}

c('Hello', 'world')

184 bytes (from 270 bytes)

karim@hirefast.ca

Strategy #3: Constant-folding

  • Replace references to constant variables with their values

  • For example:

const mockStdout = []
const isTestEnv = process.env.NODE_ENV === 'test'

function sayHello(greeting, name) {
  if (isTestEnv) {
    mockStdout.push(`${greeting}, ${name}!`)
  } else {
    console.log(`${greeting}, ${name}!`)
  }
}

sayHello('Hello', 'world')

259 bytes (from 270 bytes)

karim@hirefast.ca

Strategy #3: Constant-folding

Note: some env variables can be constant

const isTestEnv = 'production' === 'test'
const isTestEnv = process.env.NODE_ENV === 'test'
const isTestEnv = false
const mockStdout = []
const isTestEnv = false

function sayHello(greeting, name) {
  if (false) {
    mockStdout.push(`${greeting}, ${name}!`)
  } else {
    console.log(`${greeting}, ${name}!`)
  }
}

sayHello('Hello', 'world')

229 bytes (from 270 bytes)

karim@hirefast.ca

Strategy #4: Dead-Code Elimination

  • Removes branches that will never be executed

const mockStdout = []

function sayHello(greeting, name) {
  console.log(`${greeting}, ${name}!`)
}

sayHello('Hello', 'world')

128 bytes (from 270 bytes)

function sayHello(greeting, name) {
  console.log(`${greeting}, ${name}!`)
}

sayHello('Hello', 'world')

105 bytes (from 270 bytes)

karim@hirefast.ca

All together now

270 bytes

62 bytes

const mockStdout = []
const isTestEnv = process.env.NODE_ENV === 'test'

function sayHello(greeting, name) {
  const message = `${greeting}, ${name}!`

  if (isTestEnv) {
    mockStdout.push(message)
  } else {
    console.log(message)
  }
}

sayHello('Hello', 'world')

function a(b,c){console.log(`${b}, ${c}!`)}a('Hello','world')

28 bytes

console.log('Hello, world!')

karim@hirefast.ca

The Impact

For every 100ms decrease in homepage load speed, Mobify's customer base saw a 1.11% lift in session based conversion, amounting to an average annual revenue increase of $376,789.

Source: WPO Stats

karim@hirefast.ca

Programs should be written for people to read, and only incidentally for machines to execute.

from "Structure and Interpretation of Computer Programs"

karim@hirefast.ca

abstractions

  • Variables & Constants

  • Modules

  • Classes & Objects

  • Functions

alibhai.co/fallaciesofjsperf

karim@hirefast.ca

Challenge: How do we overcome the cost of abstraction?

karim@hirefast.ca

const express = require('express')
const bodyParser = require('body-parser')

const app = express()

app.disable('etag')
app.disable('x-powered-by')

app.post('/hello', bodyParser.json(), function(req, res) {
  res.json({ hello: req.body.name, query: req.query })
})

app.listen(3000, () => {
  console.log('Listening :3000')
})

329 bytes

51 dependencies

714, 969 bytes bundled (~0.7 MB)

568, 675 bytes after minification (~0.6 MB) - only ~20% saved

karim@hirefast.ca

One day, optimization compilers will catch up...

karim@hirefast.ca

But what do we do today?

require('express')()
  .get('/hello',  (_, res) => res.json({ hello:  'world' }))
  .listen(1024, () => console.log('listen :1024'))

require('http')
  .createServer((req, res) => {
    if (req.method === 'GET' && req.url === '/hello') {
      res.writeHead(200, {
        'Content-Type': 'application/json',
      })
      res.end(JSON.stringify({ hello: 'world' }))
    } else {
      res.writeHead(404)
      res.end('404 Not Found')
    }
  })
  .listen(1024, () => console.log('listen :1024'))

we want to write this

but run this

karim@hirefast.ca

Compile-time Macros

  • Help the compiler produce more optimal code

  • Essentially just a function that gets executed at compile-time instead of run-time

  • github.com/kentcdodds/babel-plugin-macros

karim@hirefast.ca

demo

github.com/karimsa/http-macros

karim@hirefast.ca

micro-benchmarks (before)

karim@hirefast.ca

github.com/karimsa/http-macros

micro-benchmarks (after)

karim@hirefast.ca

github.com/karimsa/http-macros

other artwork

  • github.com/facebook/prepack

  • github.com/google/closure-compiler

  • github.com/glimmerjs/glimmer-vm

experiments

  • github.com/sokra/rawact

  • github.com/karimsa/iife-pop

  • github.com/karimsa/classi

karim@hirefast.ca

The future (and the past) is compilers!

karim@hirefast.ca

(Pst. Computer Science existed before JS! Not the other way around.)

karim@hirefast.ca

JS Performance: State of the Art

By Karim Alibhai

Made with Slides.com

JS Performance: State of the Art

State of the art in JS performance.

  • 1,648

More from Karim Alibhai