HUGE overhead when dumping custom controls

JeffMercado
JeffMercado
in General

I've created custom controls to try to get the most out of how some data is displayed when dumped.

This works great for small bits of data but I've noticed that the larger it is (greater than 2kB) of data, it gets slower and slower to dump the larger it is. I would like to dump a table with 1million bytes but it takes so long to dump.

I wanted to profile this but wasn't sure how to do that within LINQPad, so I used the benchmark functionality, with dumping enabled, the numbers look scary if I'm reading it correctly.


5GB of memory just for 5120 bytes?!

An equivalent, pure javascript version of what the code is trying to achieve is rendered in an instant (which I might just stick with).

<html>
<head>
    <script type="text/javascript">
    function createTable(targetContainerSelector, content) {
        const targetContainer = document.querySelector(targetContainerSelector);
        if (!targetContainer) return;
        const table = document.createElement('table');
        targetContainer.appendChild(table);
        addHeaderRow(table);
        for (let i = 0; i < content.length; i += 16)
            addDataRow(table, i, content);

        function addHeaderRow(table) {
            const row = document.createElement('tr');
            table.appendChild(row);
            for (let i = 0; i < 16; i++) {
                const col = document.createElement('th');
                row.appendChild(col);
                col.innerText = `0${i.toString(16)}`
            }
            for (let i = 0; i < 16; i++) {
                const col = document.createElement('th');
                row.appendChild(col);
                col.innerText = i.toString(16);
            }
        }
        function addDataRow(table, offset, content) {
            const row = document.createElement('tr');
            table.appendChild(row);
            for (let i = 0; i < 16; i++) {
                const col = document.createElement('td');
                row.appendChild(col);
                col.innerText = offset + i < content.length
                    ? content[offset + i].toString(16).padStart(2)
                    : '';
            }
            for (let i = 0; i < 16; i++) {
                const col = document.createElement('td');
                row.appendChild(col);
                col.innerText = offset + i < content.length
                    ? String.fromCharCode(content[offset + i])
                    : '';
            }
        }
    }
    </script>
</head>
<body>
    <div id="content"></div>
    <script type="text/javascript">
    (function() {
        const arr = new Int8Array(10240);
        createTable('#content', arr);
    })();
    </script>
</body>
</html>

Are there ways I can get this to run faster using LINQPad's APIs?

I shared a script with the custom control here: https://share.linqpad.net/7w7ueei9.linq
There's some extra theming that is disabled but included (to rule out any external shenanigans), just fix the name of the OnStart() function at the bottom of the script. These were pulled from my extensions.

· Share on FacebookShare on Twitter

Comments

Categories