Run results for: RTJSON renderer: AI slop vs AI slop

Test name	Executions per second
✓ ChatGPT	36,249 Ops/sec
Gemini Thinking	34,883 Ops/sec
Script Preparation code:
const rtjson = `{"document":[{"c":[{"e":"text","t":"At least enable markdown mode before copy pasting"}],"e":"par"},{"c":[{"e":"raw","t":"\ud83c\udfaf What's New in v0.0.14"}],"e":"h","l":3},{"c":[{"e":"text","f":[[1,0,31]],"t":"Desktop Experience Improvements"}],"e":"par"},{"c":[{"c":[{"c":[{"e":"text","t":"\ud83d\uddb1\ufe0f Fixed: Mouse dragging no longer selects text"}],"e":"par"}],"e":"li"},{"c":[{"c":[{"e":"text","t":"\u2728 Added: Drag preview - tiles follow your mouse during drag"}],"e":"par"}],"e":"li"},{"c":[{"c":[{"e":"text","t":"\u26a1 Added: Quick swipe detection for faster response"}],"e":"par"}],"e":"li"},{"c":[{"c":[{"e":"text","t":"\ud83c\udfa8 Added: Professional cursor feedback (grab/grabbing)"}],"e":"par"}],"e":"li"}],"e":"list","o":false},{"c":[{"e":"text","f":[[1,0,23]],"t":"Layout \u0026 Responsiveness"}],"e":"par"},{"c":[{"c":[{"c":[{"e":"text","t":"\ud83d\udcf1 Fixed: Desktop layout now fits all screen sizes (no overflow)"}],"e":"par"}],"e":"li"},{"c":[{"c":[{"e":"text","t":"\ud83d\udd27 Improved: Responsive game board sizing"}],"e":"par"}],"e":"li"},{"c":[{"c":[{"e":"text","t":"\ud83d\udc8e Optimized: Spacing and font sizes for better fit"}],"e":"par"}],"e":"li"}],"e":"list","o":false},{"c":[{"e":"text","f":[[1,0,9]],"t":"Technical"}],"e":"par"},{"c":[{"c":[{"c":[{"e":"text","f":[[64,33,9],[64,43,9],[64,53,7]],"t":"\ud83d\ude80 Enhanced mouse event handling (mousedown/mousemove/mouseup)"}],"e":"par"}],"e":"li"},{"c":[{"c":[{"e":"text","f":[[64,29,4],[64,52,4]],"t":"\ud83c\udfaf Smart threshold detection (15px for quick swipes, 30px for drags)"}],"e":"par"}],"e":"li"},{"c":[{"c":[{"e":"text","t":"\ud83d\udee1\ufe0f Added CSS user-select prevention"}],"e":"par"}],"e":"li"},{"c":[{"c":[{"e":"text","f":[[64,14,5],[64,24,7]],"t":"\ud83d\udcd0 Implemented min() and clamp() for responsive sizing"}],"e":"par"}],"e":"li"}],"e":"list","o":false}]}`;

(() => {
    /**
     * Reddit RTJSON Renderer (ES Module)
     * * Optimized for performance over readability.
     */

    const F_TAGS = ['strong', 'em', 'u', 's', 'sub', 'sup', 'code'];
    const F_MASKS = [1, 2, 4, 8, 16, 32, 64];

    /**
     * Handles text formatting by splitting strings into segments based on style ranges.
     */
    const formatText = (text, ranges) => {
        if (!ranges?.length) return document.createTextNode(text);

        const frag = document.createDocumentFragment();
        const pts = [0, text.length];
        for (let i = 0; i < ranges.length; i++) {
            const r = ranges[i];
            pts.push(r[1], r[1] + r[2]);
        }
        pts.sort((a, b) => a - b);

        let last = -1;
        for (let i = 0; i < pts.length - 1; i++) {
            const s = pts[i],
                e = pts[i + 1];
            if (s === e || s >= text.length || s === last) continue;
            last = s;

            let mask = 0;
            for (let j = 0; j < ranges.length; j++) {
                const r = ranges[j];
                if (s >= r[1] && e <= r[1] + r[2]) mask |= r[0];
            }

            let node = document.createTextNode(text.substring(s, e));
            if (mask) {
                for (let j = 0; j < 7; j++) {
                    if (mask & F_MASKS[j]) {
                        const wrapper = document.createElement(F_TAGS[j]);
                        wrapper.appendChild(node);
                        node = wrapper;
                    }
                }
            }
            frag.appendChild(node);
        }
        return frag;
    };

    /**
     * Main renderer function.
     * @param {any[]} rtjson - Array of RTJSON document nodes.
     * @param {Record<string, [string, any]>} mediaAssets - Mapping of IDs to [tagName, data].
     */
    window.renderRTJSON_gemini = (rtjson, mediaAssets) => {
        const container = document.createElement('div');

        const walk = (nodes, parent) => {
            for (let i = 0; i < nodes.length; i++) {
                const n = nodes[i];
                const type = n.e;
                let el;

                switch (type) {
                    case 'text':
                        el = formatText(n.t, n.f);
                        break;
                    case 'raw':
                        el = document.createTextNode(n.t);
                        break;
                    case 'br':
                        el = document.createElement('br');
                        break;
                    case 'link':
                        el = document.createElement('a');
                        el.href = n.u;
                        if (n.a) el.title = n.a;
                        el.appendChild(n.f ? formatText(n.t, n.f) : document.createTextNode(n.t));
                        break;
                    case 'c/':
                    case 'p/':
                        el = document.createElement('a');
                        el.href = n.t;
                        el.textContent = n.t;
                        break;
                    case 'r/':
                    case 'u/':
                    case '@':
                        const prefix = type === '@' ? 'u/' : type;
                        el = document.createElement('a');
                        el.href = '/' + prefix + n.t;
                        el.textContent = (n.l ? '/' : '') + prefix + n.t;
                        break;
                    case 'spoilertext':
                        el = document.createElement('span');
                        el.className = 'rt-spoiler';
                        walk(n.c, el);
                        break;
                    case 'par':
                        el = document.createElement('p');
                        walk(n.c, el);
                        break;
                    case 'h':
                        el = document.createElement('h' + n.l);
                        if (n.c) walk(n.c, el);
                        break;
                    case 'hr':
                        el = document.createElement('hr');
                        break;
                    case 'blockquote':
                        el = document.createElement('blockquote');
                        if (n.a) {
                            const cite = document.createElement('cite');
                            walk([n.a], cite);
                            el.appendChild(cite);
                        }
                        walk(n.c, el);
                        break;
                    case 'code':
                        const pre = document.createElement('pre');
                        el = document.createElement('code');
                        if (n.l) el.className = 'lang-' + n.l;
                        walk(n.c, el);
                        pre.appendChild(el);
                        parent.appendChild(pre);
                        el = null;
                        break;
                    case 'list':
                        el = document.createElement(n.o ? 'ol' : 'ul');
                        walk(n.c, el);
                        break;
                    case 'li':
                        el = document.createElement('li');
                        if (n.c) walk(n.c, el);
                        break;
                    case 'table':
                        el = document.createElement('table');
                        const thead = document.createElement('thead');
                        const trh = document.createElement('tr');
                        for (const cell of n.h) {
                            const th = document.createElement('th');
                            if (cell.a) th.style.textAlign = cell.a === 'L' ? 'left' : cell.a === 'R' ? 'right' : 'center';
                            if (cell.c) walk(cell.c, th);
                            trh.appendChild(th);
                        }
                        thead.appendChild(trh);
                        el.appendChild(thead);
                        const tbody = document.createElement('tbody');
                        for (const row of n.c) {
                            const tr = document.createElement('tr');
                            for (const cell of row) {
                                const td = document.createElement('td');
                                if (cell.c) walk(cell.c, td);
                                tr.appendChild(td);
                            }
                            tbody.appendChild(tr);
                        }
                        el.appendChild(tbody);
                        break;
                    case 'img':
                    case 'gif':
                    case 'video':
                        const asset = mediaAssets[n.id];
                        if (asset) {
                            el = document.createElement(asset[0]);
                            el.data = {
                                ...asset[1],
                                caption: n.c,
                                obfuscated: n.o,
                                poster: n.p,
                                gifify: n.gifify
                            };
                        }
                        break;
                    case 'embed':
                        el = document.createElement('iframe');
                        el.src = n.c;
                        el.width = n.x;
                        el.height = n.y;
                        break;
                }
                if (el) parent.appendChild(el);
            }
        };

        walk(rtjson, container);
        return container;
    };
})();

(() => {
    /**
     * Reddit RTJSON Renderer (Optimized ES Module)
     *
     * Optimizations:
     * - Sweep-line formatting algorithm (avoids O(n²) range scans)
     * - Specialized inline renderers
     * - Reduced recursion in hot paths
     * - Fewer allocations
     * - Fast-paths for common cases
     * - Schema-aware rendering
     */

    const F_TAGS = ['strong', 'em', 'u', 's', 'sub', 'sup', 'code'];
    const F_MASKS = [1, 2, 4, 8, 16, 32, 64];

    const EMPTY = [];

    /* -------------------------------------------------------------------------- */
    /* Formatting                                                                 */
    /* -------------------------------------------------------------------------- */

    const formatText = (text, ranges) => {
        if (!ranges || ranges.length === 0) {
            return document.createTextNode(text);
        }

        // Sweep-line event generation.
        const events = [];

        for (let i = 0; i < ranges.length; i++) {
            const r = ranges[i];
            const mask = r[0];
            const start = r[1];
            const end = start + r[2];

            events.push([start, mask]);
            events.push([end, -mask]);
        }

        events.sort((a, b) => a[0] - b[0]);

        const frag = document.createDocumentFragment();

        let activeMask = 0;
        let pos = 0;

        for (let i = 0; i < events.length; i++) {
            const point = events[i][0];

            if (point > pos) {
                let node = document.createTextNode(text.slice(pos, point));

                if (activeMask !== 0) {
                    for (let j = 0; j < 7; j++) {
                        if (activeMask & F_MASKS[j]) {
                            const wrapper = document.createElement(F_TAGS[j]);
                            wrapper.appendChild(node);
                            node = wrapper;
                        }
                    }
                }

                frag.appendChild(node);
            }

            while (i < events.length && events[i][0] === point) {
                const mask = events[i][1];

                if (mask > 0) {
                    activeMask |= mask;
                } else {
                    activeMask &= ~(-mask);
                }

                i++;
            }

            i--;
            pos = point;
        }

        if (pos < text.length) {
            let node = document.createTextNode(text.slice(pos));

            if (activeMask !== 0) {
                for (let j = 0; j < 7; j++) {
                    if (activeMask & F_MASKS[j]) {
                        const wrapper = document.createElement(F_TAGS[j]);
                        wrapper.appendChild(node);
                        node = wrapper;
                    }
                }
            }

            frag.appendChild(node);
        }

        return frag;
    };

    /* -------------------------------------------------------------------------- */
    /* Inline Rendering                                                           */
    /* -------------------------------------------------------------------------- */

    const renderInline = (nodes, parent) => {
        for (let i = 0; i < nodes.length; i++) {
            const n = nodes[i];
            let el;

            switch (n.e) {
                case 'text':
                    parent.appendChild(formatText(n.t, n.f));
                    break;

                case 'raw':
                    parent.appendChild(document.createTextNode(n.t));
                    break;

                case 'br':
                    parent.appendChild(document.createElement('br'));
                    break;

                case 'link':
                    el = document.createElement('a');
                    el.href = n.u;

                    if (n.a) {
                        el.title = n.a;
                    }

                    el.appendChild(
                        n.f ?
                        formatText(n.t, n.f) :
                        document.createTextNode(n.t)
                    );

                    parent.appendChild(el);
                    break;

                case 'c/':
                case 'p/':
                    el = document.createElement('a');
                    el.href = n.t;
                    el.textContent = n.t;
                    parent.appendChild(el);
                    break;

                case 'r/':
                case 'u/':
                case '@': {
                    const prefix = n.e === '@' ? 'u/' : n.e;

                    el = document.createElement('a');
                    el.href = '/' + prefix + n.t;
                    el.textContent = (n.l ? '/' : '') + prefix + n.t;

                    parent.appendChild(el);
                    break;
                }

                case 'spoilertext':
                    el = document.createElement('span');
                    el.className = 'rt-spoiler';

                    renderInline(n.c, el);

                    parent.appendChild(el);
                    break;

                case 'img':
                case 'gif':
                    // handled externally by block renderer
                    break;
            }
        }
    };

    /* -------------------------------------------------------------------------- */
    /* Media                                                                      */
    /* -------------------------------------------------------------------------- */

    const renderMedia = (n, mediaAssets) => {
        const asset = mediaAssets[n.id];

        if (!asset) return null;

        const el = document.createElement(asset[0]);

        // Avoid spread allocation.
        const data = Object.assign(Object.create(null), asset[1]);

        if (n.c !== undefined) data.caption = n.c;
        if (n.o !== undefined) data.obfuscated = n.o;
        if (n.p !== undefined) data.poster = n.p;
        if (n.gifify !== undefined) data.gifify = n.gifify;

        el.data = data;

        return el;
    };

    /* -------------------------------------------------------------------------- */
    /* Main Renderer                                                              */
    /* -------------------------------------------------------------------------- */

    window.renderRTJSON_chatgpt = (rtjson, mediaAssets) => {
        const container = document.createElement('div');

        const walk = (nodes, parent) => {
            for (let i = 0; i < nodes.length; i++) {
                const n = nodes[i];
                let el;

                switch (n.e) {
                    /* ------------------------------------------------------------------ */
                    /* Paragraphs                                                         */
                    /* ------------------------------------------------------------------ */

                    case 'par':
                        el = document.createElement('p');
                        renderInline(n.c, el);
                        parent.appendChild(el);
                        break;

                        /* ------------------------------------------------------------------ */
                        /* Headings                                                           */
                        /* ------------------------------------------------------------------ */

                    case 'h':
                        el = document.createElement('h' + n.l);

                        const hc = n.c || EMPTY;

                        for (let j = 0; j < hc.length; j++) {
                            const x = hc[j];

                            switch (x.e) {
                                case 'raw':
                                    el.appendChild(document.createTextNode(x.t));
                                    break;

                                case 'link': {
                                    const a = document.createElement('a');
                                    a.href = x.u;
                                    a.textContent = x.t;

                                    if (x.a) {
                                        a.title = x.a;
                                    }

                                    el.appendChild(a);
                                    break;
                                }

                                case 'c/':
                                case 'p/': {
                                    const a = document.createElement('a');
                                    a.href = x.t;
                                    a.textContent = x.t;
                                    el.appendChild(a);
                                    break;
                                }

                                case 'r/':
                                case 'u/':
                                case '@': {
                                    const prefix = x.e === '@' ? 'u/' : x.e;

                                    const a = document.createElement('a');
                                    a.href = '/' + prefix + x.t;
                                    a.textContent =
                                        (x.l ? '/' : '') + prefix + x.t;

                                    el.appendChild(a);
                                    break;
                                }
                            }
                        }

                        parent.appendChild(el);
                        break;

                        /* ------------------------------------------------------------------ */
                        /* Horizontal Rule                                                    */
                        /* ------------------------------------------------------------------ */

                    case 'hr':
                        parent.appendChild(document.createElement('hr'));
                        break;

                        /* ------------------------------------------------------------------ */
                        /* Blockquote                                                         */
                        /* ------------------------------------------------------------------ */

                    case 'blockquote':
                        el = document.createElement('blockquote');

                        // Spec: blockquotes should render italicized.
                        el.style.fontStyle = 'italic';

                        if (n.a) {
                            const cite = document.createElement('cite');
                            renderInline([n.a], cite);
                            el.appendChild(cite);
                        }

                        walk(n.c, el);

                        parent.appendChild(el);
                        break;

                        /* ------------------------------------------------------------------ */
                        /* Code Block                                                         */
                        /* ------------------------------------------------------------------ */

                    case 'code': {
                        const pre = document.createElement('pre');
                        const code = document.createElement('code');

                        if (n.l) {
                            code.className = 'lang-' + n.l;
                        }

                        // Fast-path: RawText[] only.
                        let text = '';

                        for (let j = 0; j < n.c.length; j++) {
                            text += n.c[j].t;
                        }

                        code.textContent = text;

                        pre.appendChild(code);
                        parent.appendChild(pre);

                        break;
                    }

                    /* ------------------------------------------------------------------ */
                    /* Lists                                                              */
                    /* ------------------------------------------------------------------ */

                    case 'list':
                        el = document.createElement(n.o ? 'ol' : 'ul');
                        walk(n.c, el);
                        parent.appendChild(el);
                        break;

                    case 'li':
                        el = document.createElement('li');

                        if (n.c) {
                            walk(n.c, el);
                        }

                        parent.appendChild(el);
                        break;

                        /* ------------------------------------------------------------------ */
                        /* Tables                                                             */
                        /* ------------------------------------------------------------------ */

                    case 'table': {
                        el = document.createElement('table');

                        // THEAD
                        const thead = document.createElement('thead');
                        const trh = document.createElement('tr');

                        for (let j = 0; j < n.h.length; j++) {
                            const cell = n.h[j];

                            const th = document.createElement('th');

                            if (cell.a === 'L') {
                                th.style.textAlign = 'left';
                            } else if (cell.a === 'R') {
                                th.style.textAlign = 'right';
                            } else if (cell.a === 'C') {
                                th.style.textAlign = 'center';
                            }

                            if (cell.c) {
                                renderInline(cell.c, th);
                            }

                            trh.appendChild(th);
                        }

                        thead.appendChild(trh);
                        el.appendChild(thead);

                        // TBODY
                        const tbody = document.createElement('tbody');

                        for (let r = 0; r < n.c.length; r++) {
                            const row = n.c[r];
                            const tr = document.createElement('tr');

                            for (let c = 0; c < row.length; c++) {
                                const cell = row[c];

                                const td = document.createElement('td');

                                if (cell.c) {
                                    renderInline(cell.c, td);
                                }

                                tr.appendChild(td);
                            }

                            tbody.appendChild(tr);
                        }

                        el.appendChild(tbody);

                        parent.appendChild(el);

                        break;
                    }

                    /* ------------------------------------------------------------------ */
                    /* Media                                                              */
                    /* ------------------------------------------------------------------ */

                    case 'img':
                    case 'gif':
                    case 'video':
                        el = renderMedia(n, mediaAssets);

                        if (el) {
                            parent.appendChild(el);
                        }

                        break;

                        /* ------------------------------------------------------------------ */
                        /* Embed                                                              */
                        /* ------------------------------------------------------------------ */

                    case 'embed':
                        el = document.createElement('iframe');

                        el.src = n.c;
                        el.width = n.x;
                        el.height = n.y;

                        // Preserve source URL semantics.
                        el.dataset.url = n.u;

                        parent.appendChild(el);

                        break;
                }
            }
        };

        walk(rtjson, container);

        return container;
    };
})();
Run results for: RTJSON renderer: AI slop vs AI slop

Gemini Thinking

ChatGPT
