index.html

<html>
    <head>
        <script src="experiment.js"></script>
        <script>
            function addRow(base, power, size, concatDuration, arrayJoinDuration, builderDuration, rustBuilderDuratiion) {
                var resultsTable = document.getElementById("results");
                var tableRow = document.createElement("tr");

                var powerCell = document.createElement("td");
                powerCell.innerText = base + "^" + power;
                tableRow.append(powerCell);

                var sizeCell = document.createElement("td");
                sizeCell.innerText = size;
                tableRow.append(sizeCell);

                var concatCell  = document.createElement("td");
                concatCell.innerText = concatDuration;
                tableRow.append(concatCell);

                var joinCell  = document.createElement("td");
                joinCell.innerText = arrayJoinDuration;
                tableRow.append(joinCell);
                resultsTable.appendChild(tableRow);

                var builderCell  = document.createElement("td");
                if (builderDuration === undefined) {
                    builderCell.innerText = "N/A";
                } else {
                    builderCell.innerText = builderDuration;
                }
                tableRow.append(builderCell);

                var rustBuilderCell  = document.createElement("td");
                rustBuilderCell.innerText = rustBuilderDuratiion;
                tableRow.append(rustBuilderCell);

                resultsTable.appendChild(tableRow);
            }
            
            function runBrowserExperiment(rustStringBuilderFunction) {
                var baseInput = document.getElementById("base");
                var base = parseInt(baseInput.value);
                var powerLimitInput = document.getElementById("powerLimit");
                var powerLimit = parseInt(powerLimitInput.value);
                var builderPowerLimitInput = document.getElementById("builderPowerLimit");
                var builderPowerLimit = parseInt(builderPowerLimitInput.value);
                var results = runExperiment(base, powerLimit, builderPowerLimit, rustStringBuilderFunction);
                results.forEach(function(result){
                    addRow(result.base, result.power, result.size,
                        result.concatDuration, result.arrayJoinDuration, result.builderDuration, result.rustBuilderDuration);
                });
            }
        </script>
    </head>
    <body>
        <!-- Include the JS generated by `wasm-pack build` -->
        <script src='pkg/hello_world.js'></script>

        <script type=module>
        // Like with the `--target web` output the exports are immediately
        // available but they won't work until we initialize the module. Unlike
        // `--target web`, however, the globals are all stored on a
        // `wasm_bindgen` global. The global itself is the initialization
        // function and then the properties of the global are all the exported
        // functions.
        //
        // Note that the name `wasm_bindgen` can be configured with the
        // `--no-modules-global` CLI flag
        const { RustStringBuilder } = wasm_bindgen;

        async function run() {
            await wasm_bindgen('./pkg/hello_world_bg.wasm');
        }

        function loaded() {
            var wasmLoadingTxt = document.getElementById("wasmLoading");
            wasmLoadingTxt.innerHTML = "Wasm loaded."

            var runButton = document.getElementById("runButton");
            runButton.onclick = function() {
                runBrowserExperiment(function() {
                    return new RustStringBuilder();
                });
            };
        }

        run().then(loaded);
        </script>

        <p id="wasmLoading">Wasm is still loading</p>
        <p>Calculate results for up to
            <input id="base" type="text" value="2"> to the power of <input id="powerLimit" type="text" value="26"> concats.
            Since StringBuilder is slow, limit it to power of <input id="builderPowerLimit" type="text" value="10">
            <button id="runButton">Run!</button></p>
        <p>You might get a popup about the page being slow. You need to click wait. </p>
        <p>On Chrome Version 84.0.4147.89 (Official Build) (64-bit) I was able to do 2^26 before the browser ran out of memory. </p>
        <p>I even tried increasing the js heap limit and that did not help: https://bugs.chromium.org/p/v8/issues/detail?id=847 recommends opening chrome with  -args --js-flags="--max_old_space_size=8192"
            after experimenting with it a bit, the command will look like:
            "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -args --js-flags="--max_old_space_size=8192" from a command prompt.
            You can confirm by opening developer tools console and running console.memory and your jsHeapSizeLimit should be larger than without the flag.
        </p>
        <p>On Firefox 78.0.2 (64-bit) I was also able to to do 2^27 before the browser ran out of memory.</p>
        <table id="results">
            <thead>
                <th># concats</th>
                <th># concats</th>
                <th>String conat</th>
                <th>Array.join</th>
                <th>Javascript StringBuilder</th>
                <th>Rust StringBuilder</th>
            </thead>
        </table>
    </body>
</html>