Frontend Flashcards
React Reconciliation
Реакт проходится по всем рендер функциям и строит дерево элементов. Если это последующий рендер, то строится следующее дерево, которое сравнивается с текущим. При сравнении, если элемент поменялся на другой, то реакт не смотрит дальше и пересоздает дерево на этом месте. Компоненты делают unmount. Реакт на основании разницы деревьев строит список операций, что удалить, добавить или обновить и совершает их в дом.
JSX
Это синтаксис элементов реакта. Он транспайлится в JS, а потом рендерится в DOM. Под капотом используется React.createElement.
SSR
Позволяет отрендерить страницу на стороне сервера, что помогает поисковикам проще индексировать страницу. После загрузки страницы в браузере, запускается JS и страница дальше работает как SPA. Этот процесс называется hydration.
Provider & Context
Бывает необходимо иметь доступ к данным во всем дереве компонентов (стор в редаксе). Это можно сделать с помощью context в реакте. Для этого мы создаем провайдер, который добавляет нужные данные в контекст.
В чем особливість Redux?
Redux — бібліотека для централізованого керування станом у додатках. Щоб внести зміни, потрібно тригернути екшн; редюсер — чиста функція, яка змінює частину стейту на основі екшена, а селектор дозволяє отримати потрібну частину даних зі стейту.
React Synthetic Events
Синтетические ивенты повторяют нативные ивенты браузера, но в тоже время имеют единых интерфейс для всех браузеров. Чтобы подписаться на capture фазу нужно добавить Capture к названию ивента.
Когда мы нажимает на кнопку, сначала срабатывает capture фаза, отрабатывают capture обработчики от родителей до потомков. Потом идет баблинг фаза и срабатывают обычные обработчики от потомков до парентов. Только focus не всплывает.
e.stopPropagation() останавливает дальшейший проход по хендлерам.
Web worker
Позволяет запускать долгий синхронный код в отдельном потоке. Главные поток и воркер могут обмениваться сообщениями, через onmessage и postmessage. Есть еще shared worker, с ним нужно работать через объект port (специальный объект для коммуникации). У него нет доступа к DOM.
Service worker
Service Worker дозволяє кешувати ресурси сайту і працювати офлайн. Функціонально він схожий на проксі-сервер, що дає можливість модифікувати запити та відповіді, підміняючи їх даними з кешу. З його допомогою можна створювати PWA, а також обробляти push notifications.
IndexDB
Асинхронная NoSQL база, поддерживает транзакции, индексы. Хранит пары ключ, значение.
HTML <script async … />
Позволяет начать грузить JS асинхронно не блокируя дальнейший рендеринг. Скрипт будет запущен, как только будет загружен, даже до полной загрузки страницы. Порядок запуска не гарантирован.
Если его нет, то скрипт будет загружен и запущен в том месте где он указан и только потом продолжится рендеринг.
HTML <script defer … />
Позволяет начать грузить JS асинхронно не блокируя дальнейший рендеринг.Гарантирует порядок запуска скриптов. Запускает скрипты когда уже вся страница отрендерилась.
What is the difference between authentification and authorization?
Authentication - the process of provinguser’s identity to the system or simply login.
Authorization - the process of providing permissions toresources inside the system.
Симметричное и ассиметричное шифрование
Симметричное - можно зашифровать и расшифровать 1 ключем.
Ассиметричное - публичным ключем можно зашифровать, приватным ключем можно расшифровать.
HTTPS
- Браузер и сервер делают handshake, если сертификат валидный, генерирует сеансовый ключ, шифрует его публичным ключем и отправляет серверу.
- Безопасно переданный сеансовый ключ используется браузером для шифрования и сервером для расшифровки. Это быстрее, чем использовать приватный/публичный ключи.
JWT
Имеет структуру header.payload.signature. В хедере хранится алгоритм и тип. В пейлоде публичные данные о пользователе. Подпись нужна для проверки валидности. Все данные закодированны с помощью base64url и их может прочитать кто угодно.
