Last active
February 6, 2019 22:06
-
-
Save aadityataparia/a4a272068fc47f7a29ee7553c5ef9199 to your computer and use it in GitHub Desktop.
walker vs tree walker (http://jsbench.github.io/#a4a272068fc47f7a29ee7553c5ef9199) #jsbench #jsperf
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>walker vs tree walker</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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use strict"; | |
| (function (factory) { | |
| if (typeof Benchmark !== "undefined") { | |
| factory(Benchmark); | |
| } else { | |
| factory(require("benchmark")); | |
| } | |
| })(function (Benchmark) { | |
| var suite = new Benchmark.Suite; | |
| suite.add("function walk(node, callback) {", function () { | |
| function walk(node, callback) { | |
| var skip, tmp; | |
| // This depth value will be incremented as the depth increases and | |
| // decremented as the depth decreases. The depth of the initial node is 0. | |
| var depth = 0; | |
| // Always start with the initial element. | |
| do { | |
| if ( !skip ) { | |
| // Call the passed callback in the context of node, passing in the | |
| // current depth as the only argument. If the callback returns false, | |
| // don't process any of the current node's children. | |
| skip = callback.call(node, depth) === false; | |
| } | |
| if ( !skip && (tmp = node.firstChild) ) { | |
| // If not skipping, get the first child. If there is a first child, | |
| // increment the depth since traversing downwards. | |
| depth++; | |
| } else if ( tmp = node.nextSibling ) { | |
| // If skipping or there is no first child, get the next sibling. If | |
| // there is a next sibling, reset the skip flag. | |
| skip = false; | |
| } else { | |
| // Skipped or no first child and no next sibling, so traverse upwards, | |
| tmp = node.parentNode; | |
| // and decrement the depth. | |
| depth--; | |
| // Enable skipping, so that in the next loop iteration, the children of | |
| // the now-current node (parent node) aren't processed again. | |
| skip = true; | |
| } | |
| // Instead of setting node explicitly in each conditional block, use the | |
| // tmp var and set it here. | |
| node = tmp; | |
| // Stop if depth comes back to 0 (or goes below zero, in conditions where | |
| // the passed node has neither children nore next siblings). | |
| } while ( depth > 0 ); | |
| } | |
| let i = 0; | |
| walk(document.body, function() { | |
| if ( this.nodeType == 3 ) { | |
| this.nodeValue; | |
| i++; | |
| } | |
| return; | |
| }); | |
| }); | |
| suite.add("function walk(node, callback) {", function () { | |
| function walk(node, callback) { | |
| const treeWalker = document.createTreeWalker( | |
| node, | |
| NodeFilter.SHOW_ALL | |
| ); | |
| while(treeWalker.nextNode()) { | |
| const el = treeWalker.currentNode; | |
| callback.call(el); | |
| } | |
| } | |
| let i = 0; | |
| walk(document.body, function() { | |
| if ( this.nodeType == 3 ) { | |
| this.nodeValue; | |
| i++; | |
| } | |
| }); | |
| }); | |
| suite.add("function walk(node, callback) {", function () { | |
| function walk(node, callback) { | |
| var skip = false, tmp; | |
| // This depth value will be incremented as the depth increases and | |
| // decremented as the depth decreases. The depth of the initial node is 0. | |
| var depth = 0; | |
| // Always start with the initial element. | |
| do { | |
| callback.call(node, depth); | |
| if ( !skip && (tmp = node.firstChild) ) { | |
| // If not skipping, get the first child. If there is a first child, | |
| // increment the depth since traversing downwards. | |
| depth++; | |
| } else if ( tmp = node.nextSibling ) { | |
| // If skipping or there is no first child, get the next sibling. If | |
| // there is a next sibling, reset the skip flag. | |
| skip = false; | |
| } else { | |
| // Skipped or no first child and no next sibling, so traverse upwards, | |
| tmp = node.parentNode; | |
| // and decrement the depth. | |
| depth--; | |
| // Enable skipping, so that in the next loop iteration, the children of | |
| // the now-current node (parent node) aren't processed again. | |
| skip = true; | |
| } | |
| // Instead of setting node explicitly in each conditional block, use the | |
| // tmp var and set it here. | |
| node = tmp; | |
| // Stop if depth comes back to 0 (or goes below zero, in conditions where | |
| // the passed node has neither children nore next siblings). | |
| } while ( depth > 0 ); | |
| } | |
| let i = 0; | |
| walk(document.body, function() { | |
| if ( this.nodeType == 3 ) { | |
| this.nodeValue; | |
| i++; | |
| } | |
| return; | |
| }); | |
| }); | |
| 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("walker vs tree walker"); | |
| console.log(new Array(30).join("-")); | |
| suite.run(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://gist.github.com/cowboy/958000 vs document.createTreeWalker()