Geolocation API

Geolocation API позволяет запросить у пользователя данные о географическом местоположении.

Работать с геопозицией пользователей можно только при защищённом соединении (HTTPS).

#Браузерное_окружение #GeolocationAPI

Подробнее

window.matchMedia

Интерфейс в глобальной области видимости window.matchMedia, который позволяет получить доступ к медиавыражениям из JavaScript и подписываться на их срабатывание. Медиавыражения активно используются в CSS с помощью директивы @media.

#Браузерное_окружение #windowmatchMedia

Подробнее

URLSearchParams

URLSearchParams — это класс, предоставляющий удобное API для формирования строки поисковых параметров, которую потом можно использовать для формирования полного адреса. Все параметры в строке будут закодированы для безопасной вставки в адрес. Также этот класс можно встретить как часть класса URL.

#Браузерное_окружение #URLSearchParams

Подробнее

localStorage

Это объект, хранящийся в window, который позволяет долговременно сохранять данные в браузере. Работает как хранилище данных в формате ключ-значение — при сохранении данных мы указываем имя поля, в которое должны быть сохранены данные, и затем используем это имя для их получения.

• Значения хранятся в виде строк. При попытке сохранения других типов данных, они будут приведены к строке. Например, если записать число, то при чтении нам вернётся число, записанное в строку.
• Не имеет ограничений по времени хранения, может быть очищен пользователем вручную или браузером при переполнении автоматически (браузеры на основе движка WebKit, например Safari, очищают localStorage, если к нему не обращались в течение 7 дней).
• Максимальный объем данных ограничен размером 5MB.

#Браузерное_окружение #localStorage

Подробнее

sessionStorage

Это объект, хранящийся в window, который позволяет сохранять данные в браузере на время сессии. Этот тип хранилища очень похож на localStorage и работает как хранилище данных в формате ключ-значение. При сохранении данных мы указываем имя поля, в которое должны быть сохранены данные, и затем используем это имя для их получения.

• Сессия страницы создаётся при открытии новой вкладки браузера. Сессия остаётся активной до тех пор, пока открыта вкладка, а состояние сессии сохраняется между перезагрузками. Открытие новой вкладки с таким же адресом приведёт к созданию новой сессии.
• Значения хранятся в виде строк. При попытке сохранения других типов данных, они будут приведены к строке. Например, если записать число, то при чтении нам вернётся число, записанное в строку.
• Максимальный объем данных ограничен размером 5MB.

#Браузерное_окружение #sessionStorage

Подробнее

performance

Performance API — это API браузера, позволяющее измерять время работы программы при помощи различных методов. Для этого используется очень точный тип измерения времени – DOMHighResTimeStamp, работающий с точностью до 5 микросекунд (в одной миллисекунде их тысяча).

#Браузерное_окружение #performance

Подробнее

alert()

При помощи директивы alert() можно вывести на экран пользователя модальное окно с каким-нибудь текстом.

Из-за того, что окно модальное — работа с интерфейсом браузера и страницами будет заблокирована. Это неудобно, и может восприниматься пользователем как попытка ограничивать его свободу. Модальное окно для пользователя — окно, которое блокирует его работу с браузером до тех пор, пока он это окно не закроет.

#Браузерное_окружение #alert

Подробнее

prompt()

При помощи функции prompt() можно вывести на экран пользователя модальное окно c полем ввода и текстом-пояснением.

Из-за того, что окно модальное — работа с интерфейсом браузера и страницами будет заблокирована. Это неудобно, плюс может восприниматься пользователем как попытка ограничивать его свободу. Модальное окно для пользователя — окно, которое блокирует его работу с браузером до тех пор, пока он это окно не закроет.

#Браузерное_окружение #prompt

Подробнее

confirm()

При помощи функции confirm() можно вывести на экран пользователя модальное окно с текстом и кнопками «Ок» и «Отмена».

Из-за того, что окно модальное — работа с интерфейсом браузера и страницами будет заблокирована. Это неудобно, плюс может восприниматься пользователем как попытка ограничивать его свободу. Модальное окно для пользователя — окно, которое блокирует его работу с браузером до тех пор, пока он это окно не закроет.

#Браузерное_окружение #confirm

Подробнее

queueMicrotask()

Браузерное API, которое выполняет переданный код асинхронно.

#Браузерное_окружение #queueMicrotask

Подробнее

setTimeout()

setTimeout() позволяет исполнить функцию через указанный промежуток времени. Функция возвращает числовой идентификатор установленного таймера. Этот идентификатор можно передать в функцию clearTimeout(), чтобы остановить таймер.

#Браузерное_окружение #setTimeout

Подробнее

clearTimeout()

clearTimeout() очищает таймаут установленный с помощью setTimeout().

#Браузерное_окружение #clearTimeout

Подробнее

setInterval()

setInterval() позволяет регулярно исполнять функцию через указанный промежуток времени.

#Браузерное_окружение #setInterval

Подробнее

clearInterval()

Отменяет регулярное выполнение функции, установленное вызовом setInterval().

#Браузерное_окружение #clearInterval

Подробнее

.values()

Возвращает итератор для обхода значений коллекции Set в порядке добавления значений в коллекцию.

#множества #clear

Подробнее

.has()

Метод has() проверяет, содержится ли значение в коллекции Set. Если значение есть в коллекции, метод вернёт true, в противном случае — false.

#множества

Подробнее

window.open()

Метод open() объекта window позволяет открывать ссылки в новом окне, в новой вкладке или в iframe.

#браузерное_окружение

Подробнее

window.print()

Вызов метода print() объекта window открывает стандартный диалог печати текущей страницы.

#Браузерное_окружение

Подробнее

Intersection Observer

Intersection Observer — браузерный API, который позволяет асинхронно отслеживать пересечение элемента с его родителем или областью видимости документа (viewport). В момент пересечения можно запустить какое-либо действие, например, подгрузить дополнительные посты в ленте новостей («бесконечный скролл») или сделать «ленивую» загрузку контента.

#Браузерное_окружение

Подробнее

Как браузер рисует страницы

Чтобы нарисовать на экране результат работы нашего кода, браузеру нужно выполнить несколько этапов:

1. Сперва ему нужно скачать исходники.
2. Затем их нужно прочитать и распарсить.
3. После этого браузер приступает к рендерингу — отрисовке.

Каждый из процессов очень сложен, и мы не будем рассматривать их до мельчайших подробностей.

Мы лишь обратим внимание на те детали, которые необходимо знать фронтенд-разработчикам, чтобы лучше понимать, почему разные решения по-разному влияют на производительность и скорость отрисовки.

#О_браузере

Подробнее