xpath-querySelector-vs-dom-traversal

Benchmark created on

Preparation HTML

<div></div>
<div>
    <ul>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
    </ul>
</div>

Setup

function useDomTraversal(xpath) {
                var chunk = "",
                    element = document.documentElement,
                    nodeIndex = 1,
                    i,
                    j,
                    char;
    
                xpath = xpath.substr("/html/".length);
    
                for (i = 0; i < xpath.length; i++) {
                    char = xpath.charAt(i);
    
                    if (chunk === "") {
                        if (!element) {
                            return null;
                        }
                        element = element.firstElementChild;
                    }
    
                    if (char === "/" || i === xpath.length - 1) {
                        j = 1;
                        if (i === xpath.length - 1) {
                            chunk += char;
                        }
                        chunk = chunk.toUpperCase();
                        do {
                            if (element.nodeName === chunk) {
                                if (nodeIndex === j) {
                                    break;
                                }
                                j++;
                            }
                        } while (element = element.nextElementSibling);
                        nodeIndex = 1;
                        chunk = "";
                    } else if (char === "[") {
                        nodeIndex = "";
                    } else if (char === "]") {
                        nodeIndex = parseInt(nodeIndex, 10);
                    } else if (typeof nodeIndex === "string") {
                        nodeIndex += char;
                    } else {
                        chunk += char;
                    }
                }
    
                return element;
            }
    
            function useQuerySelector(xpath) {
                var cssSelector = "",
                    i,
                    char;
    
                xpath = xpath.substr("/html/".length);
    
                for (i = 0; i < xpath.length; i++) {
                    char = xpath.charAt(i);
    
                    if (char === "/") {
                        cssSelector += ">";
                    } else if (char === "[") {
                        cssSelector += ":nth-of-type(";
                    } else if (char === "]") {
                        cssSelector += ")";
                    } else {
                        cssSelector += char;
                    }
                }
    
                return document.querySelector(cssSelector);
            }

Test runner

Ready to run.

Testing in
TestOps/sec
query selector
useQuerySelector("/html/body/div[2]/ul/li[3]");
ready
dom traversal
useDomTraversal("/html/body/div[2]/ul/li[3]");
ready

Revisions

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