Основы веб-разработки
Доступность, скорость, HTTP, отладка и организация фронтенда: понятные инструкции, ограничения и контрольные списки для рабочего сайта.
HTTP 429: ограничение частоты запросов
Статус 429 сообщает, что клиент превысил допустимую частоту запросов. Это сигнал снизить активность и разобраться в правилах сервиса, а не немедленно повторять тот же запрос в цикле.
HTTP 503: временная недоступность сервиса
Статус 503 означает, что сервер временно не готов обработать запрос. Причиной может быть обслуживание, перегрузка или недоступность зависимости, но сам код не устанавливает конкретную причину.
Идемпотентность HTTP: можно ли безопасно повторить запрос
Идемпотентность описывает ожидаемый эффект повторного выполнения одной операции. Она важна, когда клиент не получил ответ и не знает, успел ли сервер обработать запрос.
Passive-обработчики: наблюдение за событием без отмены действия
Параметр passive сообщает браузеру, что обработчик не будет отменять действие события через preventDefault. Это особенно важно для некоторых событий ввода, связанных с прокруткой.
ResizeObserver: следить за размером элемента, а не только окна
ResizeObserver сообщает об изменении размеров наблюдаемого элемента. Это полезно, когда ширина компонента меняется из-за соседней панели или содержимого без изменения размера окна.
Constraint Validation API: встроенная проверка и собственное сообщение
Браузерная проверка формы помогает заметить ошибку до отправки. Constraint Validation API позволяет прочитать состояние поля и добавить правило, которое не выражено одними атрибутами HTML.
Управление фокусом после изменения интерфейса
Изменение видимой части страницы может оставить клавиатурного пользователя без понятной точки продолжения. Управление фокусом связывает действие и его результат, когда обычного порядка переходов недостаточно.
target и currentTarget: куда нажали и где работает обработчик
У события есть источник взаимодействия и объект, на котором выполняется текущий обработчик. Различие target и currentTarget помогает объяснить поведение кнопок с вложенными иконками и делегирование событий.
Выбор файла: что браузер разрешает форме
Поле загрузки даёт странице доступ к файлам, которые пользователь выбрал явно. Оно не предоставляет произвольное чтение диска и не должно рассматриваться как доверенный источник безопасного содержимого.
POST–Redirect–GET: страница результата после отправки формы
После успешной обработки POST сервер может перенаправить браузер на отдельный адрес результата. Это отделяет изменение данных от обычного просмотра страницы и делает обновление результата понятнее.
Живые и статические коллекции DOM: почему меняется length
Некоторые результаты поиска DOM автоматически отражают изменения документа, другие сохраняют исходный набор найденных узлов. Это различие важно при добавлении элементов и удалении их в цикле.
Удаление обработчиков: жизненный цикл интерфейса
Повторное открытие компонента не должно бесконечно добавлять обработчики к одному элементу. Явная очистка помогает избежать повторных действий и удержания ненужного состояния.
Debounce для ввода: выполнить действие после паузы
Debounce объединяет частые вызовы в одно действие после паузы. Такой подход подходит для неторопливой обработки поисковой строки, когда запуск на каждом символе создаёт лишнюю работу.
Throttle для прокрутки: ограничить частоту обработки
Throttle ограничивает частоту действия при непрерывном потоке событий. В отличие от ожидания полной паузы он позволяет периодически получать актуальное состояние во время прокрутки.
Ошибка записи в браузерное хранилище: как сохранить рабочий интерфейс
Запись в localStorage может завершиться ошибкой из-за ограничений объёма или политики среды. Интерфейс должен продолжать работать, даже если настройку не удалось сохранить между посещениями.
IntersectionObserver: наблюдение за пересечением области просмотра
IntersectionObserver сообщает об изменении пересечения элемента с областью наблюдения. Он помогает запускать отложенную работу без постоянного ручного измерения геометрии на каждом событии прокрутки.
MutationObserver: изменения структуры и атрибутов DOM
MutationObserver наблюдает за изменениями выбранного поддерева DOM. Он полезен, когда нужно реагировать на добавление узлов или изменение атрибутов, но прямого события от компонента нет.
Page Visibility API: активная и скрытая вкладка
Page Visibility API позволяет учитывать, виден ли документ пользователю в данный момент. Это помогает приостанавливать необязательные обновления интерфейса, не полагаясь только на потерю фокуса окна.
BFCache и pageshow: возврат к сохранённой странице
При переходе назад браузер иногда восстанавливает сохранённое состояние страницы, а не загружает документ заново. Этот механизм отличается от обычного HTTP-кеша ресурсов и влияет на повторную инициализацию интерфейса.
DOMParser: разбор HTML не равен очистке содержимого
DOMParser может разобрать HTML-строку в отдельный документ для чтения структуры. Однако результат разбора нельзя считать безопасным HTML только потому, что он ещё не вставлен в видимую страницу.
If-Match: не перезаписать чужое изменение
Условный запрос помогает сохранить данные только для той версии ресурса, которую пользователь действительно редактировал. Это один из способов обнаружить конфликт параллельных изменений.
stale-while-revalidate: устаревший ответ во время обновления
Директива stale-while-revalidate разрешает некоторое время отдавать устаревший кешированный ответ, пока выполняется его обновление. Это компромисс между скоростью и свежестью, который подходит не всем данным.
Preload и prefetch: текущий ресурс и вероятный следующий переход
Предварительная загрузка может ускорить появление нужного ресурса, но неверные подсказки расходуют сеть без пользы. Preload относится к текущему документу, prefetch — к вероятной последующей потребности.
Accept: какой формат ответа ожидает клиент
Заголовок Accept описывает предпочтительные форматы ответа. Он отличается от Content-Type, который сообщает тип уже передаваемого тела запроса или ответа.
requestSubmit(): отправка формы с нативной проверкой
RequestSubmit запускает отправку формы с учётом встроенной проверки и события submit. Это полезно, когда действие инициируется кодом, но должно сохранять обычное поведение формы.
TextEncoder: строка и её байты UTF-8
TextEncoder преобразует строку JavaScript в массив байтов UTF-8. Это помогает отличить длину текста в кодовых единицах от размера его кодированного представления.
TextDecoder: строгий разбор байтов текста
TextDecoder преобразует байты в строку с выбранной кодировкой. Когда повреждённый текст нельзя принимать молча, режим fatal позволяет получить ошибку вместо символов замены.
Blob URL: создать ссылку и освободить её вовремя
Объектный URL позволяет использовать Blob как ресурс внутри браузера без загрузки файла на сервер. У такой ссылки есть жизненный цикл: её нужно освободить, когда ресурс больше не нужен интерфейсу.
requestAnimationFrame: движение по времени кадра
RequestAnimationFrame вызывает функцию перед подходящей отрисовкой браузера. Для движения нужно учитывать прошедшее время, а не добавлять одинаковое расстояние на каждом кадре.
performance.now(): измерение длительности без календарных часов
Performance.now возвращает относительную монотонную временную отметку. Она подходит для измерения длительности операции и не является датой, которую можно показать как время публикации.