☰

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.

كيفية التثبيت

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

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

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

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

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

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

كيفية التثبيت

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

ستحتاج إلى تثبيت إضافة مثل Stylus لتثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتتمكن من تثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتثبيت هذا النمط.

(لدي بالفعل مثبت أنماط للمستخدم، دعني أقم بتثبيته!)

المؤلف
piknockyou
التثبيت اليومي
0
إجمالي التثبيت
1
التقييمات
0 0 0
الإصدار
2.4
تم إنشاؤه
12-05-2026
تم تحديثه
14-05-2026
الحجم
20.1 KB
الترخيص
AGPL-3.0
ينطبق على

☕ 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