Benchmark: rest params vs arguments (rest params are fast)

Script Preparation code:


const matchHtmlRegExp = /["'&<>]/

const escapeHTML = function (string) {
  const str = string + ''
  const match = matchHtmlRegExp.exec(str)

  if (!match) {
    return str
  }

  let escape
  let html = ''
  let index = 0
  let lastIndex = 0

  for (index = match.index; index < str.length; index++) {
    switch (str.charCodeAt(index)) {
      case 34: escape = '&quot;'; break
      case 38: escape = '&amp;'; break
      case 39: escape = '&#39;'; break
      case 60: escape = '&lt;'; break
      case 62: escape = '&gt;'; break
      default: continue
    }

    if (lastIndex !== index) {
      html += str.substring(lastIndex, index)
    }

    lastIndex = index + 1
    html += escape
  }

  return lastIndex !== index
    ? html + str.substring(lastIndex, index)
    : html
}

// ===

const voidTags = ['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img',
  'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr']

const isSafe = value => {
  switch (typeof value) {
    case 'boolean': return true
    case 'number': return true
    case 'string': return true
  }
}

const joinChildren = children => {
  let target = ''

  if (typeof children === 'string') {
    return children
  }

  if (Array.isArray(children) === true) {
    for (let i = 0; i < children.length; i++) {
      const child = children[i]
      const value = Array.isArray(child) ? child.join('') : child

      if (isSafe(value)) {
        target += value
      }
    }
  }

  return target
}

const joinProps = props => {
  let target = ''

  for (const key in props) {
    const value = props[key]

    if (isSafe(value) === true) {
      target += ' ' + key + '="' + escapeHTML(value) + '"'
    }
  }

  return target
}

const renderNode = (tag, props, children) => {
  const target = '<' + tag + joinProps(props)

  if (voidTags.includes(tag) === true) {
    return target + '/>'
  }

  return target + '>' + joinChildren(children) + '</' + tag + '>'
}

const renderText = value => escapeHTML(value)

const node = renderNode
const text = renderText

// ===

function render (jsx) {
  return jsx("div", null,
    jsx("div", null, "Hello"),
    jsx("div", null, "Hello"),
    jsx("div", null, "Hello"),
    jsx("div", null, "Hello"),
    jsx("div", null, "Hello"),
    jsx("div", null, "Hello"),
    jsx("div", null, "Hello"),
    jsx("div", null, "Hello"))
}

// ===

function render_with_rest (type, props, ...children) {
  props = props == null ? {} : props

  if (typeof type === 'function') {
    return type(props, flatten(children))
  }

  for (let i = 0; i < children.length; i++) {
    const child = children[i]
    children[i] = Array.isArray(child) ? child[0] : text(child)
  }

  return [node(type, props, children)]
}

function render_with_arguments (type, props) {
  var children = []

  for (var i = 2; i < arguments.length; i++) {
    children[i - 2] = arguments[i]
  }

  props = props == null ? {} : props;
  
  if (typeof type === 'function') {
    return type(props, flatten(children))
  }
  
  for (var i = 0; i < children.length; i++) {
    var child = children[i]
    children[i] = Array.isArray(child) ? child[0] : text(child)
  }
  
  return [node(type, props, children)]
}

Tests:

rest params
render(render_with_rest)
arguments
render(render_with_arguments)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
rest params
arguments

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and its options, pros, cons, and considerations.

**Benchmark Definition**

The benchmark is defined using JSON, which contains two test cases:

1. `rest params`: Tests the performance of the `render_with_rest` function with rest parameters.
2. `arguments`: Tests the performance of the `render_with_arguments` function with positional arguments.

**Options being compared**

In both cases, the same JavaScript code is being executed: a recursive function `render` that calls another function `render_with_rest` or `render_with_arguments`.

**Rest Parameters (rest params)**

* **Option**: `rest_params`
* **Implementation**: `render_with_rest` function with rest parameters (`...children`)
* **Pros**:
	+ Can handle variable number of arguments in a concise way.
	+ Reduces code duplication and makes the function more flexible.
* **Cons**:
	+ Can lead to performance issues if not implemented correctly (e.g., using `Array.prototype.slice()`).
	+ May not be supported by older browsers or environments.

**Positional Arguments (arguments)**

* **Option**: `arguments`
* **Implementation**: `render_with_arguments` function with positional arguments (`...children`)
* **Pros**:
	+ More explicit and easier to understand than rest parameters.
	+ Can be more compatible with older browsers and environments.
* **Cons**:
	+ Requires more code duplication and may lead to errors if not implemented correctly.

**Other considerations**

* The benchmark uses a recursive function `render` that calls other functions, which can lead to performance issues if not optimized correctly.
* The benchmark uses HTML templating (e.g., `node(type, props, children)`) which can also impact performance.
* The benchmark's results are sensitive to the specific browser and environment being tested.

**Latest Benchmark Results**

The latest benchmark results show that:

* The `rest_params` test case is faster on Chrome 96 with a raw UA string of `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36`.
* The `arguments` test case is slower on Chrome 96 with the same raw UA string.

Keep in mind that these results are specific to this benchmark and may not generalize to other use cases or environments.

Related benchmarks:

rest params vs arguments (rest params are fast) (version: 0)

Comparing performance of: rest params vs arguments

Created: 4 years ago by: Guest

Jump to the latest result

rest params

arguments

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):