Last active
August 18, 2021 20:10
-
-
Save anilanar/1a53a5ca3fc415e6c1a4120d2e05c6ad to your computer and use it in GitHub Desktop.
Different unmount strategies #harp (https://jsbench.github.io/#1a53a5ca3fc415e6c1a4120d2e05c6ad) #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>Different unmount strategies #harp</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("const children = {};", function () { | |
| const children = {}; | |
| const renderedChildren = {}; | |
| for (let i = 0; i < 100; i++) { | |
| children[i] = {key: i}; | |
| } | |
| for (let i = 0; i < 90; i++) { | |
| // (i / 16) % 2 | |
| if ((i >> 4) & 1) { | |
| renderedChildren[i] = true; | |
| } | |
| } | |
| for (let key in children) { | |
| if (renderedChildren[key] !== true) { | |
| children[key].unmount = true; | |
| } | |
| } | |
| }); | |
| suite.add("const children = [];", function () { | |
| const children = []; | |
| const renderedChildren = []; | |
| for (let i = 0; i < 100; i++) { | |
| children.push({key: i}); | |
| } | |
| for (let i = 0; i < 90; i++) { | |
| // (i / 16) % 2 | |
| if ((i >> 4) & 1) { | |
| renderedChildren.push(i); | |
| } | |
| } | |
| outer: | |
| for (let child of children) { | |
| for (let key of renderedChildren) { | |
| if (child.key === key) { | |
| continue outer; | |
| } | |
| child.unmount = true; | |
| } | |
| } | |
| }); | |
| suite.add("Sorted keys", function () { | |
| // Sorted keys | |
| const c = []; | |
| const rc = []; | |
| for (let i = 0; i < 100; i++) { | |
| c.push({key: i}); | |
| } | |
| for (let i = 0; i < 90; i++) { | |
| // (i / 16) % 2 | |
| if ((i >> 4) & 1) { | |
| rc.push(i); | |
| } | |
| } | |
| let i = 0, j = 0; | |
| while (j < c.length && i < rc.length) { | |
| if (rc[i] !== c[j].key) { | |
| c[j].unmount = true; | |
| j++; | |
| continue; | |
| } | |
| i++; j++; | |
| } | |
| }); | |
| 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("Different unmount strategies #harp"); | |
| 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