☰

Arena.ai | DOM Performance Optimizer

Fixes sluggish scrolling in Arena by virtualizing old messages, flattening 30k+ node Shiki codeblocks, and neutralizing CSS blurs and transitions.

Come installare

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

You will need to install an extension such as Tampermonkey to install this script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Come installare

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

Autore
piknockyou
Installazioni giornaliere
0
Installazioni totali
1
Valutazione
0 0 0
Versione
2.4
Creato il
12/05/2026
Aggiornato il
14/05/2026
Dimensione
20,1 KB
Licenza
AGPL-3.0
Applica a

☕ If you find this tool helpful & would like to support its maintenance, please consider leaving a tip on:

https://ko-fi.com/piknockyou

Thank you! :-)

🖼 For a quick impression of this script, refer to the screenshots at the bottom.

Arena.ai | DOM Performance Optimizer

Fixes sluggish scrolling in Arena by virtualizing old messages, flattening 30k+ node Shiki codeblocks, and neutralizing CSS blurs and transitions.

Why You Need This

Arena chats become unusable after long conversations because:

  • 30k+ DOM nodes per code block — Shiki syntax highlighting wraps every token in a <span>, React tries to reconcile them on every keystroke
  • No virtualization — every old message stays rendered, even when scrolled far away
  • Global transition: all — causes layout thrashing on the entire page
  • GPU-killing blurs — backdrop-filter: blur forces expensive compositing
  • Missing CSS containment — the browser recalculates layout for the whole chat on scroll

This script fixes all of that with instant CSS injection at document-start, so you never see the flash of lag.

Key Features

DOM Virtualizer

  • Keeps only the last N messages fully rendered (default: 6)
  • Hides older messages via CSS display: none before the page paints
  • Correctly handles Arena's flex-col-reverse layout (newest at bottom)
  • Toggle between virtualized and full view instantly

Shiki Flattener

  • Strips nested <span> tags from hidden code blocks
  • Preserves line breaks by extracting .line text, code stays readable
  • Converts 25,000-node monsters into single text nodes
  • Massive React reconciliation win, runs automatically

CSS Surgeon

  • Kill Transitions: Replaces transition: all with cheap properties only (color, background-color, border-color, opacity, transform), disables transition-[max-height], forces scroll-behavior: auto
  • Kill Blurs: Removes backdrop-filter and [class*="backdrop-blur"], replaces bg-white/50 and bg-black/50 with solid colors
  • Add Containment: Applies contain: strict to the scroll viewport and contain: content to messages, pre, code, and prose blocks to fence off layout calculations

Live Toolbar

  • Bottom-center HUD with live stats: visible/total msgs
  • 🔒 Hide / 👁️ All: Pause virtualization to search old history
  • 🧹 Force Clean: Manually trigger flatten and hide
  • ⚙️ Settings: Toggle features and change visible message count without editing code
  • Watchdog auto re-attaches the toolbar if React removes it

Smart Behavior

  • Auto-Clean: Watches for new messages with MutationObserver and prunes after a configurable delay
  • Instant Injection: CSS hides old messages before JS runs, no FOUC
  • SPA-Safe: Works across Arena route changes
  • Tab-Aware: Defers initialization until tab is visible to avoid wasted work

Supported Pages

arena.ai, canaryarena.ai, chat.lmsys.org

Designed for desktop browsers (Chrome, Firefox, Edge) with Violentmonkey or Tampermonkey

Installation

  1. Install a userscript manager:
  2. Install this script
  3. Visit arena.ai — the toolbar appears at the bottom automatically

Configuration

All defaults are in the DEFAULT_CONFIG at the top of the script, editable via the ⚙️ menu:

Option Default Description
visibleMessages 6 Number of recent messages to keep fully rendered
flattenCodeblocks true Strip <span> tags from old Shiki blocks
killTransitions true Disable expensive transitions and animations
killBlurs true Remove backdrop-filter blur effects
addContainment true Add CSS containment for scroll isolation
autoClean true Automatically prune on new messages
autoCleanDelay 1000 ms delay after DOM change before cleaning
showToolbar true Show the bottom status toolbar