BOM Flashcards
WebWorkers
Веб-воркеры — это потоки, принадлежащие браузеру, которые можно использовать для выполнения JS-кода без блокировки цикла событий. При их использовании вычисления выполняются параллельно
Cпецификация упоминает три типа веб-воркеров:
Выделенные воркеры (Dedicated Workers) - доступен только для скрипта, который его вызвал
const worker = new Worker(‘task.js’);
worker.postMessage();
Разделяемые воркеры (Shared Workers) - доступен нескольким разным скриптам — даже если они находятся в разных окнах, фреймах или даже worker-ах
const myWorker = new SharedWorker(“worker.js”);
myWorker.port.start();
Сервис-воркеры (Service Workers)
действуют как прокси-серверы, которые размещаются между веб-приложениями, браузером и сетью (при наличии). Они предназначены (помимо прочего) для создания эффективного автономного взаимодействия, перехвата сетевых запросов и принятия соответствующих действий в зависимости от того, доступна ли сеть, и обновлены ли ресурсы на сервере.
Создание и запуск:
serviceWorker.register(“/sw.js”);
serviceWorker.startMessages();
Chrome Workers - для создания эксеншенов
Audio Workers - для обработки звука
Ограничения:
DOM (это не потокобезопасно)
Объект window
Объект document
Объект parent
Возможности:
Объект navigator
Объект location (только для чтения)
XMLHttpRequest
setTimeout()/clearTimeout() и setInterval()/clearInterval()
Кэш приложения
Импорт внешних скриптов с использованием importScripts()
Создание других веб-воркеров
EventLoop
Механизм, который позволяет обрабатывать события в неблокирующем режиме.
Весь синхронный код выполняется в call stack
Весь асинхронный попадает в Web API
Когда пустой call stack - есть приоритет очередей
microtask queue - выполняется вся очередь - Promise, async/await, MutationObserver, IntersectionObserver, queueMicrotask
macrotask queue - выполняется по одному - eventListener, setInterval, setTImeout, MessageChannel
requestAnimationFrame - выполняется перед рендером и предназначена для создания плавных и оптимизированных анимаций, синхронизируется с частотой обновления экрана, синхронизируется с V-Sync таким образом избегам screen tearing (разрыв экрана)
requestIdleCallback - выполняется в “периоды простоя” (idle periods) браузера для задач, которые могут быть отложены и выполняются, когда браузер имеет доступное время.
Критический путь рендеринга (Critical rendering path)
Это минимальный набор шагов, который нужно выполнить, чтобы показать пользователю видимую часть страницы как можно быстрее
1) Получение HTML: Браузер отправляет запрос на сервер и получает HTML-код веб-страницы.
2) Парсинг HTML: Браузер анализирует HTML-код, создавая DOM (Document Object Model), который представляет структуру страницы.
3) Парсинг CSS: Браузер загружает и анализирует внешние CSS-файлы, создавая CSSOM (CSS Object Model), который описывает стили страницы.
4) Формирование Render Tree: Браузер комбинирует DOM и CSSOM для создания Render Tree, который определяет, как элементы страницы будут отображаться на экране.
5) Вычисление Layout: Браузер определяет расположение и размеры элементов на странице, создавая макет.
6) Рендеринг: Браузер производит рендеринг страницы, преобразуя макет в пиксели на экране.
7) Отображение: Изображение отображается на экране пользователя.
Shadow DOM
Технология которая предназначена для создания изолированных компонентов интерфейса веб-страницы
Преимущества:
1) Изоляция - обеспечивает изоляцию компонентов, позволяя им иметь свой собственный DOM, стили и скрипты, не влияя на глобальное DOM страницы. Это предотвращает конфликты имен, стилей и событий между разными компонентами на странице.
2) Удобство многократного использования - позволяет создавать компоненты, которые можно многократно использовать на странице или даже в других проектах.
3) Сокрытие сложной структуры - можно скрывать внутреннюю структуру и детали реализации компонента, предоставляя простой и чистый интерфейс для взаимодействия с ним.
Repaint и Reflow
Repaint происходит, когда мы меняем видимость, «одежду» элемента, но не его размеры. Например: opacity, background-color, visibility, outline.
Reflow – это процесс, который реагирует на изменение размеров и позиции на экране. Это более дорогой процесс, так как необходимо пересчитать размеры и позиции всех элементов, затронутых изменениями: дочерних, родительских и соседних.
Что такое V8?
Это движок (виртуальная машина), которые позволяет выполнить JS преобразовав его в байт код. Разработан Google. Интегрирован в Chrome и в Node. Node выполняет JS именно через V8.
Уровни представления кода:
1) JS
2) Абстрактное синтаксическое дерево
3) Байт код
4) Машинный код
Устройство V8:
1) Исходный код
2) Парсер парсит в абстрактное синтаксическое дерево
3) Ignition - интерпритатор превращает синтаксическое дерево в байт код
4) Теперь 2 вариант - код можно оптимизировать или нет?
a) Если да - он идет в компилятор Turbofan и превращается в оптимизированный машинный код
б) Если нет - он идет в компилятор Sparkplug и превращается в неоптимизированный машинный код
Как работает Garbage Collector?
Недетерменированный механизм очистки - не можем определить время очищения и не можем управлять
У нас есть 2 поколения объектов:
1) Young Generation - делится на:
a) Nursery (Ясли): Самая новая область, где создаются объекты.
б) Intermediate (Промежуточное): Область для объектов, которые “пережили”
первый сбор мусора.
2) Old Generation - Объекты, которые пережили несколько циклов сборки мусора в молодом поколении, перемещаются в старое поколение. Эти объекты реже подвергаются сборке мусора.
Для разных поколений работают разные алгоритмы сборки мусора:
1) Young - Алгоритм Scavenge:
Этот алгоритм используется для частых и быстрых сборок мусора в молодом поколении.
Вся память молодого поколения делится на две области: From-space и To-space.
В начале процесса сборки мусора, все живые объекты в From-space помечаются и копируются в To-space.
После копирования, память в From-space освобождается.
Роли From-space и To-space меняются: To-space становится новым From-space, а старое From-space - новым To-space.
2) Old - Mark-Sweep и Compact Phase (Компактизация)
a) Алгоритм Mark-Sweep (Пометка и очистка)
Mark Phase (Фаза пометки):
GC проходит через все объекты, начиная с корневых (глобальные переменные, текущий стек вызовов) и помечает все достижимые объекты.
Sweep Phase (Фаза очистки):
После фазы пометки, GC проходит через всю кучу памяти и освобождает память всех объектов, которые не были помечены как живые.
б) Алгоритм Mark-Compact (Пометка и компактизация)
Mark Phase (Фаза пометки):
Как и в Mark-Sweep, все живые объекты помечаются.
Compact Phase (Фаза компактизации):
Вместо того, чтобы просто освобождать память, GC перемещает все живые объекты в одну сторону кучи, что уменьшает фрагментацию памяти.
Это делает аллокацию новой памяти более эффективной и быстрой.
Под капотом Mark-Sweep работает как Three Color Mark, что делает пометку инкрементальной и оптимизированной
Белый (White): Объекты, которые ещё не были проверены или не могут быть достигнуты. Эти объекты считаются мусором и будут удалены.
Серый (Gray): Объекты, которые были помечены как достигнутые, но их ссылки ещё не были проверены.
Чёрный (Black): Объекты, которые были проверены и все их ссылки были также помечены.
