☰

DOM + FPS Indicator (Draggable + Minimize)

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

如何安装

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴、Greasemonkey 油猴子 或 Violentmonkey 暴力猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴 或 Violentmonkey 暴力猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴 或 Userscripts ，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

（我已经安装了用户脚本管理器，让我安装！）

如何安装

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

（我已经安装了用户样式管理器，让我安装！）

作者
akket0r
日安装量
0
总安装量
3
评分
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. Перезагрузите страницу — индикатор появится автоматически.