☰

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.

Nasıl kurarım

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği yüklemek için Tampermonkey gibi bir uzantı yüklemeniz gerekir.

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği indirebilmeniz için ayrıca Tampermonkey gibi bir eklenti kurmanız gerekmektedir.

Bu komut dosyasını yüklemek için bir kullanıcı komut dosyası yöneticisi uzantısı yüklemeniz gerekecek.

(Zaten bir kullanıcı komut dosyası yöneticim var, kurmama izin verin!)

Nasıl kurarım

Bu stili yüklemek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için Stylus gibi bir uzantı kurmanız gerekir.

Bu stili yükleyebilmek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı kurmanız gerekir.

Bu stili yükleyebilmek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

(Zateb bir user-style yöneticim var, yükleyeyim!)

Yazar
piknockyou
Günlük kurulumlar
0
Toplam kurulumlar
1
Değerlendirmeler
0 0 0
Versiyon
2.4
Oluşturulma
12.05.2026
Güncellenme
14.05.2026
Boyut
20,1 KB
Lisans
AGPL-3.0
Geçerli

☕ 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