Performance: Generate flatten parent-child-list of IDs

Question

I'm looking for a better way to generate a map of parent-child-relations; based on specific id-pattern.

Its faster to ask for void 0 === cache[parent][child]; the expected result:

    {
      uuid_1: {uuid_2: {}}
      uuid_2: {uuid_3: {}, uuid_4: {}}
      uuid_3: {}
      uuid_4: {}
    }

The HTML structure:

    <html id="uuid-1">
        <body id="uuid-2">
            <somewhere>
                <whatever id="uuid-3" />
            </somewhere>
            <foo id="uuid-4" />
        </body>
    </html>

_fetch():

    <1> // register as init
        <2> // register as child of 1
            <3>
                <4 /> // register as child of 2
            </3>
            <5 /> // register as child of 2
        </2>
    </1>

Parse ~1300 elements (large menu structure) to find my ~50 uuids.

Try 1 with jQuery:

_fetch: function(element, factoryName)
{
    var a = {}, l = 0, t = this, f = function(el, n)
    {
        if(!a[n]) a[n] = {};

        var e = $(el), test = $('[id^="uuid-"]', e);

        if(!test.length)
            return;

        e.children().each(function()
        {
            var u = $(this), id = u.attr('id'), q;

            // anonymous element: no class defined
            if(!(id && 'uuid-' === id.slice(0x00, 0x05)))
            {
                f(this, n); // continue with current name
                return;
            }

            l++;
            q = $.T.util.uuidFromId(id);
            $.T.__dict[q] = '#' + id;

            a[n][q] = {};
            // comment in/out
            f(this, q);
        });

    }

    f(element, factoryName);
    return a;
}

Try 2 with yellow JS:

    ..., g = function(n, p)
    {
        var r = [];
        for(var d = (p || document).getElementsByTagName('*'), i = 0, l = d.length; i < l; i++)
            d[i].getAttribute(n) && r.push(d[i]);
        return r;
    },
f = function(el, n)
{
    var z = el.children.length, y = 0;
    if(!a[n]) a[n] = {};

    if(z && g('id', el)) for(; y < z; y++)
    {
        var u = el.children[y], id = u.getAttribute('id'), q;

        if(!(id && 'uuid-' === id.slice(0x00, 0x05)))
        {
            f(u, n);
            continue;
        }

        l++;
        $.T.__dict[q = $.T.util.uuidFromId(id)] = '#' + id;
        a[n][q] = {};

        // it's irrelevant to fetch the full html or a sequence by constructor
        //f(u, q);
    }
}

My question is: How to collect DOM elements as flat representation in a faster way; like the mapping above? My current solution is very laggy.

OT: contextual x-dialog based on map:

    <baz><alice><bob><bobchild/></bob></alice><foo />

    alice._init:
       before init children of bob
         tell foo 'go away'
       before init bob                // context: no bob
         after init children of alice //          && alice without children
            after init baz            //          && baz not ready -> no hello
               tell baz 'hello'

Is your first block of code, the desired result? And you just want the fastest way to generate that from your HTML? — jfriend00, Apr 18 '14 at 22:04
Also, are you really looking to include an id on the `` element in your algorithm? And, why doesn't that item in your data structure show all the other items as descendants? — jfriend00, Apr 18 '14 at 22:08
Yes: the first code block is my desired result; the 2nd block my HTML; the 3rd block is how `_fetch()` sees the HTML. The *descendant object* is the prototype bootloader/bootorder. — somia, Apr 18 '14 at 22:09
This is the constructor for all *uuidized* elements: http://pastebin.com/JYyUi0vm no map -> no conversation between the elements — somia, Apr 18 '14 at 22:56

score 1 · Answer 1 · edited May 23 '17 at 12:20

I am still not quite sure I know what you're trying to do, but here's the fastest way I know to walk a DOM tree and accumulate parent/child info like you're doing to build the data structure you indicated you wanted to end up with:

var treeWalkFast = (function() {
    // create closure for constants
    var skipTags = {"SCRIPT": true, "IFRAME": true, "OBJECT": true, 
        "EMBED": true, "STYLE": true, "LINK": true, "META": true};

    return function(parent, fn, allNodes) {
        var parents = [];
        var uuidParents = [];
        parents.push(parent);
        uuidParents.push(parent);
        var node = parent.firstChild, nextNode, lastParent;
        while (node && node != parent) {
            if (allNodes || node.nodeType === 1) {
                if (fn(node, parents, uuidParents) === false) {
                    return(false);
                }
            }
            // if it's an element &&
            //    has children &&
            //    has a tagname && is not in the skipTags list
            //  then, we can enumerate children
            if (node.nodeType === 1 && node.firstChild && !(node.tagName && skipTags[node.tagName])) {
                // going down one level, add this item to the parent array
                parents.push(node);
                if (node.id && node.id.substr(0, 5) === "uuid-") {
                    uuidParents.push(node);
                }
                node = node.firstChild;
            } else  if (node.nextSibling) {
                // node had no children so going to next sibling
                node = node.nextSibling;
            } else {
                // no child and no nextsibling
                // find parent that has a nextSibling
                while ((node = node.parentNode) != parent) {
                    lastParent = parents.pop();
                    if (lastParent === uuidParents[uuidParents.length - 1]) {
                        uuidParents.pop();
                    }
                    if (node.nextSibling) {
                        node = node.nextSibling;
                        break;
                    }
                }
            }
        }
    }
})();

var objects = {uuid_1: {}};
treeWalkFast(document.documentElement, function(node, parents, uuidParents) {
    if (node.id && node.id.substr(0, 5) === "uuid-") {
        var uuidParent = uuidParents[uuidParents.length - 1];
        if (!objects[uuidParent.id]) {
            objects[uuidParent.id] = {};
        }
        objects[uuidParent.id][node.id] = {};
        objects[node.id] = {};
    }
});

Working demo here: http://jsfiddle.net/jfriend00/yzaJ6/

This is an adaptation of the treeWalkFast() function I wrote for this answer.

Performance: Generate flatten parent-child-list of IDs

1 Answers1