asdasdhasdhasdasddasd23

JavaScript performance comparison

Test case created by j-heavy

Preparation code

<div id='app'></div>
    

Preparation code output

<div id='app'></div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
sds
function h(nodeName, props) {
  let children = []
  let len = arguments.length - 2
  while (len-- > 0) children[len] = arguments[len + 2]

  // nodeName is a function -> it`s a component
  if (typeof nodeName === 'function') {
    return nodeName(props)
  }

  return {
    nodeName,
    props: props || {},
    children
  }
}

const createVnode = (vnode, isSVG) => {
  if (typeof vnode !== 'object') {
    return document.createTextNode(vnode)
  }

  const $element = isSVG
    ? document.createElementNS('http://www.w3.org/2000/svg', node.nodeName)
    : document.createElement(vnode.nodeName)

  // props (not attributes) by this time are already applied to the vnode
  Object.keys(vnode.props).map(attr => {
    $element.setAttribute(attr, vnode.props[attr])
  })

  vnode.children.map(child => $element.appendChild(createVnode(child, isSVG)))

  return $element
}

const render = (vnode, parentNode) => {
  parentNode.appendChild(createVnode(vnode))
}

render(h('h1', { style: 'color: red'}, 'Hello'), document.querySelector('#app'))
pending…
asdasd
function h(nodeName, props) {
  let children = []
  let len = arguments.length - 2
  while (len-- > 0) children[len] = arguments[len + 2]

  // nodeName is a function -> it`s a component
  if (typeof nodeName === 'function') {
    return nodeName(props)
  }

  return {
    nodeName,
    props: props || {},
    children
  }
}

const updateAttributes = ($element, newAttrs, oldAttrs = {}) => {
  const attrs = Object.assign({}, newAttrs, oldAttrs)
  Object.keys(attrs).forEach(name => {
    updateAttribute($element, name, newAttrs[name], oldAttrs[name])
  })
}

const updateAttribute = ($element, name, newValue, oldValue) => {
  if (!newValue) {
    $element.removeAttribute(name)
  } else if (!oldValue || newValue !== oldValue) {
    $element.setAttribute(name, newValue)
  }
}

const createVnode = (vnode, isSVG) => {
  if (typeof vnode !== 'object') {
    return document.createTextNode(vnode)
  }

  const $element = isSVG
    ? document.createElementNS('http://www.w3.org/2000/svg', node.nodeName)
    : document.createElement(vnode.nodeName)

  // props (not attributes) by this time are already applied to the vnode
  updateAttributes($element, vnode.props)

  
  return $element
}

const render = (vnode, parentNode) => {
  parentNode.appendChild(createVnode(vnode))
}

render(h('h1', { style: 'color: red'}, 'Hello'), document.querySelector('#app'))
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 Comments