Skip to content

Instantly share code, notes, and snippets.

@thysultan

thysultan/index.html

Last active December 21, 2021 04:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thysultan/15f645ddcdb5540d0bca2cba5cafd1e4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thysultan/15f645ddcdb5540d0bca2cba5cafd1e4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. thysultan revised this gist Dec 21, 2021. 1 changed file with 10 additions and 8 deletions.
    18 changes: 10 additions & 8 deletions suite.js
    View file
    Original file line number Diff line number Diff line change
    @@ -64,7 +64,9 @@
    // }
    var size=arguments.length
    if (size > 2) {
    children = size > 3 ? slice.call(arguments, 2) : child;
    if (size > 3) {
    children = slice.call(arguments, 2)
    }
    }

    switch (typeof type) {
    @@ -146,23 +148,23 @@
    function e (type, value,a) {'use strict';
    var index = 0
    var length = a !== undefined ? 3 : 2
    var of = value === null || value instanceof obj
    var position = of ? 2 : 1
    var size = length - position
    // var of = value === null || value instanceof obj
    // var position = of ? 2 : 1
    var size = length// - position
    var identity = 0
    var props = of ? value : {}
    var props = value
    var children

    if (size > 0) {
    if (size == 3) {
    if (a !== undefined) {
    children=a;
    }
    }

    switch (typeof type) {
    case 'object': identity = 1; children[index] = null
    case 'object': identity = 1; //children[index] = null
    break
    case 'function': identity = 2; if (size > 0) props.children = size > 1 ? children : children[0]
    case 'function': identity = 2; if (size > 0) props.children = children
    }

    return {id: identity, type: type, props: props, children: children, own: null}
  2. thysultan revised this gist Dec 21, 2021. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions suite.js
    View file
    Original file line number Diff line number Diff line change
    @@ -18,7 +18,7 @@
    function a (type, value,a,b,c,d,e,f) {'use strict';
    var index = 0
    var length = a !== undefined ? 3 : 2
    var of = props === null || props instanceof obj
    var of = value === null || value instanceof obj
    var position = of ? 2 : 1
    var size = length - position
    var identity = 0
    @@ -86,7 +86,7 @@
    function c (type, value,a,b,c,d,e,f) {'use strict';
    var index = 0
    var length = a !== undefined ? 3 : 2
    var of = props === null || props instanceof obj
    var of = value === null || value instanceof obj
    var position = of ? 2 : 1
    var size = length - position
    var identity = 0
    @@ -146,7 +146,7 @@
    function e (type, value,a) {'use strict';
    var index = 0
    var length = a !== undefined ? 3 : 2
    var of = props === null || props instanceof obj
    var of = value === null || value instanceof obj
    var position = of ? 2 : 1
    var size = length - position
    var identity = 0
  3. thysultan revised this gist Dec 20, 2021. 2 changed files with 8 additions and 8 deletions.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>vdom creation</title>
    <title>vdom creation #jsbench #jsperf</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
    <script src="./suite.js"></script>
    </head>
    14 changes: 7 additions & 7 deletions suite.js
    View file
    Original file line number Diff line number Diff line change
    @@ -184,7 +184,7 @@
    }
    struct.prototype={handleEvent:nop}
    class Struct {
    constructor(id, type, props, children) {
    constructor(id, type, props, children) {'use strict';
    this.id = id
    this.type = type
    this.props = props
    @@ -210,7 +210,7 @@



    function createElement(type, props, children) {
    function createElement(type, props, children) {'use strict';
    let normalizedProps = {},
    key,
    ref,
    @@ -241,7 +241,7 @@
    var options={_catchError:null}
    var vnodeId=0
    var slice = [].slice;
    function createVNode(type, props, key, ref, original) {
    function createVNode(type, props, key, ref, original) {'use strict';
    // V8 seems to be better at detecting type shapes if the object is allocated from the same call site
    // Do not inline into createElement and coerceToVNode!
    const vnode = {
    @@ -278,7 +278,7 @@
    __self: true,
    __source: true,
    };
    const ReactElement = function(type, key, ref, self, source, owner, props) {
    const ReactElement = function(type, key, ref, self, source, owner, props) {'use strict';
    const element = {
    // This tag allows us to uniquely identify this as a React Element
    $$typeof: REACT_ELEMENT_TYPE,
    @@ -354,11 +354,11 @@
    );
    }

    function hasValidRef(config) {
    function hasValidRef(config) {'use strict';
    return config.ref !== undefined;
    }

    function hasValidKey(config) {
    function hasValidKey(config) {'use strict';
    return config.key !== undefined;
    }
    };
    @@ -459,7 +459,7 @@
    });
    });

    console.log("vdom creation");
    console.log("vdom creation #jsbench #jsperf");
    console.log(new Array(30).join("-"));
    suite.run();
    });
  4. thysultan created this gist Dec 20, 2021.
    13 changes: 13 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>vdom creation</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
    <script src="./suite.js"></script>
    </head>
    <body>
    <h1>Open the console to view the results</h1>
    <h2><code>cmd + alt + j</code> or <code>ctrl + alt + j</code></h2>
    </body>
    </html>
    465 changes: 465 additions & 0 deletions suite.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,465 @@
    "use strict";

    (function (factory) {
    if (typeof Benchmark !== "undefined") {
    factory(Benchmark);
    } else {
    factory(require("benchmark"));
    }
    })(function (Benchmark) {
    var suite = new Benchmark.Suite;

    Benchmark.prototype.setup = function () {
    'use strict';
    var obj = Object;
    var arr = Array;
    var nop = function(){};

    function a (type, value,a,b,c,d,e,f) {'use strict';
    var index = 0
    var length = a !== undefined ? 3 : 2
    var of = props === null || props instanceof obj
    var position = of ? 2 : 1
    var size = length - position
    var identity = 0
    var props = of ? value : {}
    var children = new arr(size)

    if (size > 0) {
    if (a !== undefined) {children[0] = a;if (b !== undefined) {children[1] = b;if (c !== undefined) {children[2] = c;}
    if (d !== undefined) {children[2] = d;if (e !== undefined) {children[2] = e;if (f !== undefined) {children[2] = f;
    if (arguments.length > 8) {
    while (position < length) {
    children[8+index++] = arguments[8+position++]
    }
    }
    }}}}}
    }

    switch (typeof type) {
    case 'object': identity = 1; children[index] = null
    break
    case 'function': identity = 2; if (size > 0) props.children = size > 1 ? children : children[0]
    }

    return {id: identity, type: type, props: props, children: children, own: null}
    }

    // ------------------

    function b (type, props, child) {'use strict';
    var index = 0
    // var length = arguments.length
    // var of = props === null || props instanceof obj
    // var position = of ? 2 : 1
    // var size = length - position
    var identity = 0
    var properties = props//of ? props : {}
    var children = child

    // if (size > 0) {
    // for (; position < length; ++position) {
    // children[index++] = arguments[position]
    // }
    // }
    var size=arguments.length
    if (size > 2) {
    children = size > 3 ? slice.call(arguments, 2) : child;
    }

    switch (typeof type) {
    case 'object':
    identity = 1, children[index] = null
    break
    case 'function':
    identity = 2

    // if (size > 0) {
    // properties.children = size > 1 ? children : children[0]
    // }
    }
    return {id: identity, type: type, props: props, children: children, own: null}
    // return new struct(identity, type, properties, children)
    // return element.type = type, element
    }

    function c (type, value,a,b,c,d,e,f) {'use strict';
    var index = 0
    var length = a !== undefined ? 3 : 2
    var of = props === null || props instanceof obj
    var position = of ? 2 : 1
    var size = length - position
    var identity = 0
    var props = of ? value : {}
    var children = new arr(size)

    if (size > 0) {
    if (a !== undefined) {children[0] = a;if (b !== undefined) {children[1] = b;if (c !== undefined) {children[2] = c;}
    if (d !== undefined) {children[2] = d;if (e !== undefined) {children[2] = e;if (f !== undefined) {children[2] = f;
    if (arguments.length > 8) {
    while (position < length) {
    children[8+index++] = arguments[8+position++]
    }
    }
    }}}}}
    }

    switch (typeof type) {
    case 'object': identity = 1; children[index] = null
    break
    case 'function': identity = 2; if (size > 0) props.children = size > 1 ? children : children[0]
    }

    return new Struct(identity, type, props, children)
    }

    function d (type, value,a,b,c,d,e,f) {'use strict';
    var index = 0
    var length = a !== undefined ? 3 : 2
    var of = props === null || props instanceof obj
    var position = of ? 2 : 1
    var size = length - position
    var identity = 0
    var props = of ? value : {}
    var children = new arr(size)

    if (size > 0) {
    if (a !== undefined) {children[0] = a;if (b !== undefined) {children[1] = b;if (c !== undefined) {children[2] = c;}
    if (d !== undefined) {children[2] = d;if (e !== undefined) {children[2] = e;if (f !== undefined) {children[2] = f;
    if (arguments.length > 8) {
    while (position < length) {
    children[8+index++] = arguments[8+position++]
    }
    }
    }}}}}
    }

    switch (typeof type) {
    case 'object': identity = 1; children[index] = null
    break
    case 'function': identity = 2; if (size > 0) props.children = size > 1 ? children : children[0]
    }

    return new struct(identity, type, props, children)
    }

    function e (type, value,a) {'use strict';
    var index = 0
    var length = a !== undefined ? 3 : 2
    var of = props === null || props instanceof obj
    var position = of ? 2 : 1
    var size = length - position
    var identity = 0
    var props = of ? value : {}
    var children

    if (size > 0) {
    if (a !== undefined) {
    children=a;
    }
    }

    switch (typeof type) {
    case 'object': identity = 1; children[index] = null
    break
    case 'function': identity = 2; if (size > 0) props.children = size > 1 ? children : children[0]
    }

    return {id: identity, type: type, props: props, children: children, own: null}
    }

    function struct (id, type, props, children) {'use strict';
    this.id = id
    this.type = type
    this.props = props
    this.children = children
    this.own = null
    // this.key = key
    // this.parent = null
    // this.context = null
    // this.owner = null
    // this.value = null
    // this.state = null
    // this.stack = null
    }
    struct.prototype={handleEvent:nop}
    class Struct {
    constructor(id, type, props, children) {
    this.id = id
    this.type = type
    this.props = props
    this.children = children
    this.own = null
    }
    handleEvent(){}
    }


    // ----------------------


    var data = [null,null,null,null,null,null,null]





    // -------------------------------------------------





    function createElement(type, props, children) {
    let normalizedProps = {},
    key,
    ref,
    i;
    for (i in props) {
    if (i == 'key') key = props[i];
    else if (i == 'ref') ref = props[i];
    else normalizedProps[i] = props[i];
    }

    if (arguments.length > 2) {
    normalizedProps.children =
    arguments.length > 3 ? slice.call(arguments, 2) : children;
    }

    // If a Component VNode, check for and apply defaultProps
    // Note: type may be undefined in development, must never error here.
    if (typeof type == 'function' && type.defaultProps != null) {
    for (i in type.defaultProps) {
    if (normalizedProps[i] === undefined) {
    normalizedProps[i] = type.defaultProps[i];
    }
    }
    }

    return createVNode(type, normalizedProps, key, ref, null);
    }
    var options={_catchError:null}
    var vnodeId=0
    var slice = [].slice;
    function createVNode(type, props, key, ref, original) {
    // V8 seems to be better at detecting type shapes if the object is allocated from the same call site
    // Do not inline into createElement and coerceToVNode!
    const vnode = {
    type,
    props,
    key,
    ref,
    _children: null,
    _parent: null,
    _depth: 0,
    _dom: null,
    // _nextDom must be initialized to undefined b/c it will eventually
    // be set to dom.nextSibling which can return `null` and it is important
    // to be able to distinguish between an uninitialized _nextDom and
    // a _nextDom that has been set to `null`
    _nextDom: undefined,
    _component: null,
    _hydrating: null,
    constructor: undefined,
    _original: original == null ? ++vnodeId : original
    };

    // Only invoke the vnode hook if this was *not* a direct copy:
    if (original == null && options.vnode != null) options.vnode(vnode);

    return vnode;
    }

    const REACT_ELEMENT_TYPE = 0
    const hasOwnProperty = obj.prototype.hasOwnProperty
    const RESERVED_PROPS = {
    key: true,
    ref: true,
    __self: true,
    __source: true,
    };
    const ReactElement = function(type, key, ref, self, source, owner, props) {
    const element = {
    // This tag allows us to uniquely identify this as a React Element
    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.
    _owner: owner,
    };

    return element;
    };

    function jsx(type, config, maybeKey) {
    let propName;

    // Reserved names are extracted
    const props = {};

    let key = null;
    let ref = null;

    // Currently, key can be spread in as a prop. This causes a potential
    // issue if key is also explicitly declared (ie. <div {...props} key="Hi" />
    // or <div key="Hi" {...props} /> ). We want to deprecate key spread,
    // but as an intermediary step, we will use jsxDEV for everything except
    // <div {...props} key="Hi" />, because we aren't currently able to tell if
    // key is explicitly declared to be undefined or not.
    if (maybeKey !== undefined) {
    key = '' + maybeKey;
    }

    if (hasValidKey(config)) {
    key = '' + config.key;
    }

    if (hasValidRef(config)) {
    ref = config.ref;
    }

    // Remaining properties are added to a new props object
    for (propName in config) {
    if (
    hasOwnProperty.call(config, propName) &&
    !RESERVED_PROPS.hasOwnProperty(propName)
    ) {
    props[propName] = config[propName];
    }
    }

    // Resolve default props
    if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
    if (props[propName] === undefined) {
    props[propName] = defaultProps[propName];
    }
    }
    }

    return ReactElement(
    type,
    key,
    ref,
    undefined,
    undefined,
    null,
    props,
    );
    }

    function hasValidRef(config) {
    return config.ref !== undefined;
    }

    function hasValidKey(config) {
    return config.key !== undefined;
    }
    };

    Benchmark.prototype.teardown = function () {
    data = data.map(v => {
    if (v === undefined) {
    throw 'Error'
    } else {
    return Math.random() > 0.5 ? null : v
    }
    })
    };

    suite.add("var value = a('type',{a:1},null) // no-arity, arguments access, pojo", function () {
    var value = a('type',{a:1},null) // no-arity, arguments access, pojo
    data[0]=value.id
    // let n = 0;
    // for (let c of value.children) {
    // n += typeof c === 'object' ? c?.id : 0;
    // }
    // data[0] = n;
    });

    suite.add("var value = b('type',{a:1},null) // strict-arity, arguments access, pojo", function () {
    var value = b('type',{a:1},null) // strict-arity, arguments access, pojo
    //data[1]=value.id
    // let n = 0;
    // for (let c of value.children) {
    // n += typeof c === 'object' ? c?.id : 0;
    // }
    // data[1] = n;
    });

    suite.add("var value = c('type',{a:1},null) // no-arity, arguments access, prototype class", function () {
    var value = c('type',{a:1},null) // no-arity, arguments access, prototype class
    data[2]=value.id
    // let n = 0;
    // for (let c of value.children) {
    // n += typeof c === 'object' ? c.id : 0;
    // }
    // data[2] = n;
    });

    suite.add("var value = d('type',{a:1},null) // no-arity, arguments access, native class", function () {
    var value = d('type',{a:1},null) // no-arity, arguments access, native class
    data[3]=value.id
    // let n = 0;
    // for (let c of value.children) {
    // n += typeof c === 'object' ? c.id : 0;
    // }
    // data[3] = n;
    });

    suite.add("var value = e('type',{a:1},null) // strict-arity, no arguments access, pojo object", function () {
    var value = e('type',{a:1},null) // strict-arity, no arguments access, pojo object
    data[4]=value.id
    // let n = 0;
    // for (let c of value.children) {
    // n += typeof c === 'object' ? c.id : 0;
    // }
    // data[4] = n;
    });

    suite.add("var value = createElement('type',{a:1},null) // preact", function () {
    var value = createElement('type',{a:1},null) // preact
    data[5]=value._depth
    // let n = 0;
    // for (let c of value.children) {
    // n += typeof c === 'object' ? c.id : 0;
    // }
    // data[5] = n;
    });

    suite.add("var value = jsx(\"type\", {a: 1,}); // react new _jsx", function () {
    var value = jsx("type", {a: 1,}); // react new _jsx
    data[6]=value._owner
    // let n = 0;
    // for (let c of value.children) {
    // n += typeof c === 'object' ? c.id : 0;
    // }
    // data[6] = n;
    });

    suite.on("cycle", function (evt) {
    console.log(" - " + evt.target);
    });

    suite.on("complete", function (evt) {
    console.log(new Array(30).join("-"));

    var results = evt.currentTarget.sort(function (a, b) {
    return b.hz - a.hz;
    });

    results.forEach(function (item) {
    console.log((idx + 1) + ". " + item);
    });
    });

    console.log("vdom creation");
    console.log(new Array(30).join("-"));
    suite.run();
    });