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. После этого браузер приступает к рендерингу — отрисовке.

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

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

#О_браузере

Подробнее

Координаты

Чтобы перемещать и позиционировать элементы на экране в браузере имеется система координат. Оси координат начинаются в левом верхнем углу экрана и идут вправо для оси x и вниз для оси y.

Позиционирование с помощью координат может быть относительно окна браузера или относительно отдельного элемента. Всего существует две системы координат: одна начинается от угла HTML-страницы (документа), а вторая от угла окна браузера. С помощью первой можно определять, как элемент расположен относительно всей страницы, а с помощью второй – как элемент расположен относительно окна браузера и того, что там находится. Объекты события мыши и тач-события содержат координаты места на экране и в документе, где событие произошло: pageX/pageY – для документа, clientX/clientY – для экрана.

#О_браузере

Подробнее

Хранение данных в браузере

При разработке современных веб-сайтов достаточно часто необходимо сохранять данные на стороне клиента. Для таких целей в браузере существует несколько разных способов, которые появились в разное время и отличаются друг от друга.

#о_браузере

Подробнее

Element

Элемент — это кусочек HTML в DOM-дереве. Браузер создаёт DOM для взаимодействия между JavaScript и HTML. Каждый HTML-тег при этом превращается в элемент DOM. Ещё такие элементы называют узлами.

Из DOM можно получить элемент и имзенить его. Браузер заметит изменения и отобразит их на странице.

#объектная_модель_документа_DOM

Подробнее