react-vs-node-template

Benchmark created by cartok on

Preparation HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>

<script src="https://cdn.jsdelivr.net/npm/dom-node-template@latest/build/bundle.js"></script>
      
<div id="mount"></div>

Setup

const e = React.createElement
  const mountpoint = document.getElementById("mount")
  const PROP = { foo: "fighters" }
  const PROPS = { 
      "0": "0",
      "1": "1",
      "2": "2",
      "3": "3",
      "4": "4",
      "5": "5",
      "6": "6",
      "7": "7",
      "8": "8",
      "9": "9",
  }

Teardown



            mountpoint.innerHTML = ""

Test runner

Ready to run.

Testing in
TestOps/sec
React: simple item, no props
class Foo extends React.Component {
    render(){
        return e("div", null, "foo")
    }
}
ReactDOM.render(
    React.createElement(Foo, null, null),
    mountpoint
)
ready
NodeTemplate: simple item, no props
const template = new NodeTemplate(`<div>foo</div>`)
mountpoint.appendChild(template.fragment)
ready
React: simple item, with prop
class Foo extends React.Component {
    render(){
        return e("div", null, `${this.props.foo}`)
    }
}
ReactDOM.render(
    e(Foo, PROP, null),
    mountpoint
)
ready
React: complex item, no props
class Foo extends React.Component {
    render(){
        return  e("div", null,
                    e("div", null,
                        e("div", null,
                            e("div", null,
                                e("div", null,
                                    e("div", null, null))))),
                    e("div", null, null),
                    e("div", null, null),
                    e("div", null, null),
                    e("div", null, null))
    }
}
ReactDOM.render(
    e(Foo, null, null),
    mountpoint
)
ready
NodeTemplate: simple item, with prop
const template = new NodeTemplate(`<div data-ref="${PROP.foo}">${PROP.foo}</div>`)
mountpoint.appendChild(template.fragment)
ready
React: complex item, with props
class Foo extends React.Component {
    render(){
        return  e("div", null, this.props["0"],
                    e("div", null, this.props["1"],
                        e("div", null, this.props["2"],
                            e("div", null, this.props["3"],
                                e("div", null, this.props["4"],
                                    e("div", null, this.props["5"]))))),
                    e("div", null, this.props["6"]),
                    e("div", null, this.props["7"]),
                    e("div", null, this.props["8"]),
                    e("div", null, this.props["9"]))
    }
}
ReactDOM.render(
    e(Foo, PROPS, null),
    mountpoint
)
ready
NodeTemplate: complex item, with props
const template = new NodeTemplate(`
    <div data-ref="${PROPS[0]}">${PROPS[0]}
        <div data-ref="${PROPS[1]}">${PROPS[1]}
            <div data-ref="${PROPS[2]}">${PROPS[2]}
                <div data-ref="${PROPS[3]}">${PROPS[3]}
                    <div data-ref="${PROPS[4]}">${PROPS[4]}
                        <div data-ref="${PROPS[5]}">${PROPS[5]}</div>
                    </div>
                </div>
            </div>
        </div>
        <div data-ref="${PROPS[6]}">${PROPS[6]}</div>
        <div data-ref="${PROPS[7]}">${PROPS[7]}</div>
        <div data-ref="${PROPS[8]}">${PROPS[8]}</div>
        <div data-ref="${PROPS[9]}">${PROPS[9]}</div>
    </div>
`)
mountpoint.appendChild(template.fragment)
ready
NodeTemplate: complex item, no props
const template = new NodeTemplate(`
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div></div>
                    </div>
                </div>
            </div>
        </div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
`)
mountpoint.appendChild(template.fragment)
ready
NodeTemplate: complex item, with props, fast-reference creation
const template = new NodeTemplate(`
    <div data-ref="${PROPS[0]}">${PROPS[0]}
        <div data-ref="${PROPS[1]}">${PROPS[1]}
            <div data-ref="${PROPS[2]}">${PROPS[2]}
                <div data-ref="${PROPS[3]}">${PROPS[3]}
                    <div data-ref="${PROPS[4]}">${PROPS[4]}
                        <div data-ref="${PROPS[5]}">${PROPS[5]}</div>
                    </div>
                </div>
            </div>
        </div>
        <div data-ref="${PROPS[6]}">${PROPS[6]}</div>
        <div data-ref="${PROPS[7]}">${PROPS[7]}</div>
        <div data-ref="${PROPS[8]}">${PROPS[8]}</div>
        <div data-ref="${PROPS[9]}">${PROPS[9]}</div>
    </div>
`, { refs: Object.values(PROPS) })
mountpoint.appendChild(template.fragment)
ready

Revisions

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

  • Revision 1: published by cartok on