☰

DOM + FPS Indicator (Draggable + Minimize)

DOM/FPS индикатор: перетаскивание, двойной клик — компактный кружок, позиция и состояние сохраняются; спарклайн ms/кадр (опц.)

作者
akket0r
今日安裝
0
安裝總數
2
評價
0 0 0
版本
2.1b
建立日期
2025-07-07
更新日期
2025-09-03
尺寸
14.3 KB
授權條款
MIT
腳本執行於
所有網站

🟢 DOM + FPS Indicator

DOM + FPS Indicator — это лёгкий визуальный инструмент для разработчиков, который показывает в реальном времени количество DOM-элементов на странице и частоту кадров (FPS).
Помогает быстро выявлять перегрузку страницы и следить за производительностью браузера.

📦 Features

  • 🔹 DOM Monitor

    • Отображает количество DOM-узлов (document.querySelectorAll("*").length)
    • Цветовая индикация состояния:
    • 🟩 Зелёный — страница «лёгкая» (до 6000 элементов)
    • 🟨 Жёлтый — средняя нагрузка (6000–9000 элементов)
    • 🟥 Красный — высокая нагрузка (9000–15000 элементов)
    • ⚠️ Мигающий красный + иконка — перегрузка (более 15000 элементов)
    • Обновляется каждые 1s

  • 🔹 FPS Meter

    • Измеряет кадровую частоту через requestAnimationFrame
    • Показывает усреднённое значение (FPS) и время кадра (ms)
    • Цветовая подсветка по качеству анимации
    • Мини-график (спарклайн) задержек кадра

  • 🔹 UI

    • Индикатор внизу справа (поверх страницы)
    • Можно перетаскивать мышью или пальцем
    • Двойной клик — сворачивает в компактный круг с минимальной информацией
    • Позиция и режим сохраняются в localStorage
    • Не работает внутри iframe (нет дублей в плеерах/виджетах)

💻 Installation & Usage

  1. Установите Tampermonkey или любой другой менеджер userscript-ов.
  2. Создайте новый скрипт и вставьте код из репозитория.
  3. Перезагрузите страницу — индикатор появится автоматически.