Code Ready | Frontend
22.7K subscribers
1.13K photos
472 videos
17 files
786 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
performance.now — монотонное измерение прошедшего времени!

performance.now() — Web API для точного измерения времени выполнения и длительности операций. В отличие от Date.now(), возвращает монотонно возрастающее время с дробной точностью.

Значение (DOMHighResTimeStamp) — миллисекунды от time origin (performance.timeOrigin), обычно начала навигации документа. Точность может ограничиваться браузером из соображений безопасности.

Простейшее измерение:
const start = performance.now();

doHeavyWork();

const end = performance.now();
console.log(`Время: ${end - start} ms`);


performance.now() удобен для профилирования синхронных операций и поиска узких мест в коде.

Пример 1 — измерение функции:
function measure(fn) {
const t0 = performance.now();
fn();
const t1 = performance.now();
return t1 - t0;
}

console.log("A:", measure(runA));
console.log("B:", measure(runB));


Один замер может быть неточным из-за JIT-компиляции, GC и фоновых процессов браузера, поэтому для корректного сравнения алгоритмов лучше делать несколько прогонов.

Пример 2 — измерение асинхронного кода:
async function measureAsync(fn) {
const t0 = performance.now();
await fn();
return performance.now() - t0;
}

measureAsync(fetchData)
.then(t => console.log("Время операции:", t));


Здесь измеряется общее прошедшее время операции, включая ожидание промиса.

Пример 3 — проверка бюджета кадра:
const t0 = performance.now();

renderLargeList();

const t1 = performance.now();

if (t1 - t0 > 16.7) {
console.warn("JS-часть кадра превысила бюджет (~16.7ms при 60Hz)");
}


При 120Hz бюджет кадра уже около 8.3 ms, и в него входит не только выполнение JS, но и layout, paint и compositing.

Пример 4 — разница с Date.now:
console.log(Date.now());        // системное время
console.log(performance.now()); // монотонное время


Date.now() может изменяться при корректировке системных часов, тогда как performance.now() монотонно увеличивается в рамках текущего контекста выполнения.

🔥 performance.now() — базовый инструмент для ручного профилирования производительности и быстрых замеров в UI-коде.

📣 Code Ready | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥4🤝4