☰

DOM + FPS Indicator (Draggable + Minimize)

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

如何安裝

您需要先安裝使用者腳本管理器擴展，如 Tampermonkey、Greasemonkey 或 Violentmonkey 之後才能安裝該腳本。

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

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Violentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Userscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展，比如 Tampermonkey，才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

（我已經安裝了使用者腳本管理器，讓我安裝！）

如何安裝

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

（我已經安裝了使用者樣式管理器，讓我安裝！）

作者
akket0r
今日安裝
1
安裝總數
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. Перезагрузите страницу — индикатор появится автоматически.