Хронометр

Метки времени лучше счётчиков

Наивный способ собрать секундомер — прибавлять фиксированную величину к счётчику на каждом тике. Это ещё и неверный способ, потому что таймеры в браузере не гарантируют срабатывание по расписанию. Переключитесь на другую вкладку — и интервал снижается до раза в секунду или останавливается вовсе; закройте ноутбук — и он останавливается полностью. Счётчик, собранный таким образом, теряет время и никогда его не возвращает.

Этот хронометр вместо этого записывает момент запуска и вычитает его из текущего момента при каждой перерисовке. Ничего не накапливается, поэтому и ошибка накопиться не может. Если вкладка приторможена, отображение перестаёт обновляться, но лежащие в основе часы продолжают идти, и первый кадр после возвращения показывает корректное прошедшее время, а не число, отставшее за время вашего отсутствия.

Монотонное время, а не время на часах

Используемые здесь часы — performance.now(), которые отсчитываются с момента загрузки страницы и движутся только вперёд. Это важно, потому что время на часах — то, что сообщает Date.now() — может прыгать. Коррекции NTP сдвигают его, переходы на летнее время сдвигают его, а смена системных часов пользователем может сдвинуть его на часы в любую сторону.

Секундомер, читающий время с часов, наследует каждый из этих скачков. Если синхронизация NTP случится посреди измерения, ваш записанный интервал просто неверен, и ничто в интерфейсе не укажет на это. Монотонный источник лишён такого режима отказа: он ни с чем не синхронизирован, его нельзя подправить, и единственное, что он измеряет, — это прошедшее время.

Раздельное против общего, и почему показывают оба

Каждая строка записывает два числа. Общее — это время от старта до этого круга, а раздельное — время с предыдущего круга. Они отвечают на разные вопросы, и стоит чётко понимать, какое именно вы читаете.

При измерении бегуна на восьми кругах раздельное говорит, держит ли он темп, сдаёт или финиширует рывком, — это результат на круг. Общее говорит, где он находится относительно целевого времени на всю дистанцию. Взгляд только на общее делает замедление трудно заметным, поскольку каждая цифра включает всё, что было до неё; взгляд только на раздельные теряет общий результат. Показ обоих позволяет читать темп и прогресс из одной таблицы, а копируемый экспорт сохраняет обе колонки для любого места вставки.