1
Q
A
2
Q
Как работает браузер при вводе запроса и этапы рендера
A
Поиск в кэше: Браузер проверяет свой кэш, чтобы узнать, есть ли уже соответствие между доменом и IP-адресом.
Если в кэше браузера нет записи, запрос отправляется в операционную систему. ОС проверяет файл hosts, который может содержать статические записи доменов и IP-адресов.
Запрос к DNS серверу: Если и в файле hosts нет записи, браузер отправляет запрос на DNS-сервер, чтобы получить соответствие домену. DNS-сервер возвращает IP-адрес, который браузер сохраняет в кэш на определённое время.
Установка соединения через TCP (трехстороннее рукопожатие)
рукопожатие (TCP handshake):
SYN: Клиент отправляет запрос на установление соединения с сервером.
SYN-ACK: Сервер отвечает подтверждением на запрос клиента.
ACK: Клиент подтверждает получение ответа, соединение установлено.
Это согласование позволяет установить параметры соединения, такие как скорость и размер пакетов.
Отправка HTTP-запроса
Когда соединение установлено, браузер отправляет HTTP GET-запрос на сервер для получения запрашиваемого ресурса (обычно HTML-документа).
Получение и парсинг HTML
Когда сервер отправляет HTML-документ в ответ на запрос, браузер начинает его парсить и строить DOM (Document Object Model) дерево — структуру, представляющую HTML-страницу как объектную модель.
Загрузка и парсинг CSS и JS
CSS: В процессе парсинга HTML браузер начинает загружать и парсить файлы CSS, создавая CSSOM (CSS Object Model) — модель стилей, которая содержит информацию о том, как стили применяются к элементам на странице.
JS: Когда браузер встречает тег
, он должен выполнить JavaScript код. Скрипты могут блокировать дальнейший рендеринг страницы, так как они могут изменять DOM или CSSOM, поэтому JavaScript код выполняется синхронно до продолжения рендеринга.
Важно: Если скрипты добавляются с атрибутом async или defer, они не блокируют рендеринг, так как выполняются после загрузки страницы.
Формирование Render Tree (Дерево рендеринга)
На основе DOM и CSSOM браузер строит render tree — дерево рендеринга, которое описывает, как элементы будут отображаться на экране. Это дерево включает в себя визуальные элементы (например, блоки, изображения, текст), но не включает элементы, которые не отображаются (например, <head>, display: none).
Layout (Позиционирование элементов)
На этом этапе браузер рассчитывает расположение каждого элемента на странице:
Браузер вычисляет положение элементов (например, с помощью моделей коробок — box model) и их размеры (ширина, высота).
Рассчитываются отступы (margin), границы (border), внутренние отступы (padding), а также позиционирование элементов на странице.
Этап layout необходим для того, чтобы точно определить, где и как должны располагаться элементы на экране.
Painting (Отрисовка)
На этапе painting браузер “рисует” каждый элемент на экране, основываясь на данных из дерева рендеринга. Это включает в себя отображение цветов, текстур, шрифтов, границ и других визуальных свойств.
Каждый элемент “рисуется” с учётом его стилей, а текст может быть нарисован как отдельные строки или блоки.
Composition (Составление слоёв)
Когда элементы страницы нарисованы, браузер переходит к последнему этапу — composition. Здесь происходит составление слоёв:
Браузер группирует элементы в слои (layers), чтобы эффективно обработать их. Эти слои могут быть отрисованы независимо, что позволяет ускорить рендеринг.
Важные стили, такие как transform или opacity, могут использоваться для переноса элементов на GPU для дальнейшей обработки, чтобы разгрузить процессор.
На этом этапе браузер может оптимизировать рендеринг, отправив слои на видеокарту для отрисовки.
3
Q
Отличия any и unknown в TypeScript
A
Тип any используется, когда вы хотите указать, что значение может быть любым типом.
Преимущества использования any
Гибкость:
Удобство:
Недостатки использования any
Потеря типовой безопасности:
Усложнение поддержки кода
Тип unknown — это более безопасная альтернатива any. С unknown вы по-прежнему можете работать с переменной любого типа, но для этого необходимо проверить её тип перед выполнением операций с ней. То есть, в отличие от any, с переменной типа unknown не получится выполнять операции без проверки её типа.
Преимущества использования unknown
Типовая безопасность: хотя unknown позволяет работать с любыми типами, при этом компилятор TypeScript требует, чтобы вы выполнили проверку типа перед тем, как выполнить какие-либо операции с значением.
Является более безопасным выбором:
Не такая гибкость как у any: перед использованием переменной типа unknown требуется выполнить проверку её типа, что добавляет дополнительный код.
4
Q
Как работает keyof и typeof в TypeScript
A
keyof и typeof — это два оператора в TypeScript, которые используются для работы с типами данных и для улучшения типизации. Они позволяют работать с типами объектов и переменных, а также извлекать ключи и типы из существующих значений.
Оператор keyof
Оператор keyof позволяет извлечь все ключи объекта в виде строкового объединения. Это полезно, когда вам нужно работать с объектами и проверять ключи, доступные для них, или когда вы хотите типизировать переменные, которые должны быть одним из ключей объекта.
Оператор typeof
Оператор typeof позволяет извлечь тип переменной или значения. Это полезно, когда вам нужно узнать тип переменной, не указывая его явно, и использовать этот тип в других частях кода.
5
Q
Строгий режим (strict mode) в JavaScript
A
Строгий режим (strict mode) в JavaScript — это специальный режим работы, который помогает писать более безопасный и качественный код. Включив его, вы активируете дополнительные проверки и ограничения, которые предотвращают распространённые ошибки.
Что меняет строгий режим?
Запрещает использование необъявленных переменных.
Запрещает удаление переменных, функций или объектов.
Ограничивает работу с this в функциях. Без строгого режима:
6
Q
Set, Map, WeakSet и WeakMap
A
Set— это коллекция уникальных значений, где каждое значение может появляться только один раз.
Хранит только уникальные значения.
Значения могут быть любого типа.
Неупорядоченная структура
Map — это коллекция пар ключ-значение, где ключи могут быть любого типа.
Упорядоченная структура.
Позволяет использовать объекты в качестве ключей.
WeakSet — это коллекция, в которой хранятся только объекты. Эти объекты являются слабо-ссылаемыми, что позволяет сборщику мусора удалять их, если на них нет других ссылок.
Хранит только объекты.
Нельзя получить размер или перебрать элементы.
Используется для временного хранения объектов.
7
Q
Как работает Event Loop?
A
Event Loop — это механизм в JavaScript, который управляет асинхронными задачами и очередями событий. Он позволяет JavaScript работать в однопоточной модели, обрабатывая асинхронные операции, не блокируя основной поток выполнения.
Как работает Event Loop?
Event Loop — это бесконечный цикл, в котором выполняются обработчики событий. В процессе его работы браузер распределяет задачи по двум основным очередям:
Микротаски — это задачи, такие как промисы, queueMicrotask(), MutationObserver.
Макротаски — это задачи, такие как setTimeout, события, таймеры, запросы fetch.
Основной порядок выполнения
Сначала выполняются все синхронные задачи из стека вызовов (Call Stack).
Затем выполняются все задачи из очереди микротасков. Все микротаски будут выполнены до того, как будет взята следующая макрозадача. Микротаски блокируют Event Loop, пока все не будут выполнены.
После выполнения всех микротасков очередь очищается.
Далее из очереди макротасков берется одна макрозадача и выполняется. Макрозадачи, такие как setTimeout, ждут, пока все синхронные задачи и микротаски будут завершены.
После выполнения макрозадачи проверяется, нужно ли выполнить перерисовку страницы. Если необходимо, браузер выполняет рендеринг.
Повторный цикл. Event Loop продолжает обрабатывать задачи, пока не закончится выполнение всех операций.
Структуры данных
Call Stack (LIFO — Last In, First Out):
Стек вызовов содержит все функции, которые выполняются в текущий момент.
Когда вызывается функция, она добавляется в стек. Если внутри функции вызывается другая функция, она тоже добавляется в стек.
После выполнения функции она удаляется из стека.
Web API:
Асинхронные операции, такие как setTimeout, обработчики событий, запросы fetch, попадают в Web API.
После завершения работы асинхронной задачи, она не сразу попадает в Call Stack. Вместо этого она помещается в Callback Queue (очередь обратных вызовов).
Callback Queue (FIFO — First In, First Out):
Здесь хранятся функции, которые должны быть выполнены после того, как стек вызовов окажется пустым.
Когда стек вызовов очищается, Event Loop перемещает задачи из Callback Queue в Call Stack и выполняет их.
Микротаски vs. Макротаски
Макротаски:
Пример: setTimeout, события (onClick, onChange), запросы fetch.
Эти задачи обрабатываются в порядке очереди, одна за другой, после того как выполняются все синхронные задачи и микротаски.
Микротаски:
Пример: промисы, queueMicrotask(), MutationObserver.
Микротаски выполняются сразу после выполнения синхронных операций и до выполнения макротасок.
Все микротаски из очереди выполняются перед следующими макрозадачами.
8
Q
Промисы в JavaScript
A
Promise — это функция-конструктор, которая используется для создания промисов в JavaScript. Промис представляет собой объект, который позволяет работать с асинхронными операциями и выполнять их без блокировки основного потока выполнения.
Promise.all() используется для выполнения нескольких промисов параллельно и возвращает новый промис, который выполнится, когда все промисы из массива завершатся успешно. Если хотя бы один промис отклонится, результат будет отклонен с ошибкой того промиса, который отклонился.
Promise.race() принимает массив промисов и возвращает новый промис, который завершится как только завершится первый из промисов в массиве (независимо от того, был ли он выполнен успешно или с ошибкой).
Promise.allSettled() выполняет все промисы в массиве и возвращает результат для каждого, независимо от того, были ли они выполнены или отклонены.
Promise.any() возвращает новый промис, который выполнится, как только первый промис из массива завершится успешно. Если все промисы отклоняются, он отклонится с ошибкой.
9
Q
Что такое проваливание промисов (Promise Chaining)
A
— это механизм, при котором каждый .then() возвращает новый промис, позволяя выстраивать цепочку асинхронных операций.
fetch(“/user.json”)
.then(response => response.json()) // промис №1
.then(user => fetch(/users/${user.id})) // промис №2
10
Q
Что такое прототип?
A
— это объект, к которому обращается любой другой объект в случае, если у него нет искомого свойства или метода. Если при обращении к свойству его нет в самом объекте, интерпретатор будет «подниматься» снизу-вверх по цепочке прототипов (prototype chain), пока не найдёт нужное свойство или не достигнет объекта null.
— это механизм, позволяющий одним объектам наследовать свойства и методы других объектов.
11
Q
Что такое объект Proxy в JavaScript
A
Proxy — это встроенный объект в JavaScript, позволяющий перехватывать и переопределять поведение других объектов. Вы можете «обернуть» объект и управлять доступом к его свойствам, их изменением, удалением, вызовом функций и многим другим.
Проще говоря, Proxy — это как «прослойка» между объектом и его использованием.
12
Q
Лексическое окружение (Lexical Environment) в JavaScript
A
Лексическое окружение (Lexical Environment) — это внутренняя структура, которая используется движком JavaScript для хранения переменных, объявленных в определённой области видимости, а также для определения того, где и как эти переменные можно использовать.
Каждая функция, блок {}, и глобальная область создают своё лексическое окружение при выполнении.
13
Q
Статические методы в JavaScript (Static Methods)
A
— это методы, которые определяются на уровне класса и доступны только через сам класс, а не через его экземпляры. Такие методы предназначены для реализации функциональности, которая не зависит от состояния конкретного объекта, и обычно используются для утилитарных операций,
14
Q
Что такое каррирование (Currying)
A
— это техника преобразования функции с несколькими аргументами в последовательность функций, каждая из которых принимает по одному аргументу.
Зачем нужно каррирование?
Переиспользуемость: можно заранее зафиксировать часть аргументов.
Чистота функций: каррированные функции легче тестировать и комбинировать.
Функциональный стиль: часто применяется в функциональном программировании.
15
Q
Отличие event.target и event.currentTarget
A
event.target — элемент, на котором фактически произошло событие. Это может быть вложенный элемент.
event.currentTarget — элемент, на котором висит обработчик события
16
Q
Разница между оператором in и методом hasOwnProperty()
A
in — оператор, проверяющий всё (включая унаследованные свойства).
.hasOwnProperty() — метод объекта, проверяющий только собственные свойства.
17
Q
Что такое делегирование событий?
A
— это техника в JavaScript, при которой обработчик события навешивается на родительский элемент, а не на каждый дочерний элемент отдельно.
<ul>
<li>Главная</li>
<li>О нас</li>
<li>Контакты</li>
</ul>
const menu = document.getElementById(“menu”);
menu.addEventListener(“click”, (event) => {
const target = event.target;
if (target.tagName === “LI”) {
console.log(“Вы кликнули по пункту:”, target.textContent);
}
});
18
Q
Что такое генераторы в JavaScript?
A
Генераторы — это функции, которые могут приостанавливать своё выполнение и возобновлять его позже. Они дают больше контроля над потоком выполнения, в отличие от обычных функций.
Генераторы определяются с помощью function* и управляются через метод .next().
Синтаксис генератора
function* generatorFunction() {
yield ‘Первое значение’;
yield ‘Второе значение’;
return ‘Финал’;
}
const gen = generatorFunction();
console.log(gen.next()); // { value: ‘Первое значение’, done: false }
console.log(gen.next()); // { value: ‘Второе значение’, done: false }
console.log(gen.next()); // { value: ‘Финал’, done: true }
Как работает генератор
yield — ключевое слово, приостанавливает выполнение и возвращает значение.
.next() — возобновляет выполнение с места последнего yield.
done: true — указывает, что генератор завершён.
Отличия от обычных функций
Особенность Обычные функции Генераторы
Возврат значений Только один return Много yield
Промежуточные состояния Нет Да
Управление потоком Нет Да
Использование for..of Нет Да
19
Q
Что такое полифил (polyfill)?
A
— это код (обычно JavaScript), который реализует функциональность, отсутствующую в старых браузерах, но уже доступную в современных версиях.
Другими словами: это «заплатка», которая добавляет поддержку нового API там, где её ещё нет.
20
Q
Зачем нужен оператор instanceof
A
Оператор instanceof в JavaScript проверяет, принадлежит ли объект определённому классу (или функции-конструктору) в его цепочке прототипов.
21
Q
requestAnimationFrame и requestIdleCallback
A
requestAnimationFrame — это метод браузера, который позволяет выполнить функцию перед следующим перерисовыванием кадра. Используется в основном для создания плавных анимаций и оптимизации рендеринга.
requestIdleCallback — это метод, который позволяет выполнять задачи, когда браузер “свободен” — в периоды простоя.
22
Q
CSS Разница между script, async и defer
A
script (без атрибутов)
Скачивается и выполняется сразу, как только до него дойдет парсер HTML.
Блокирует парсинг HTML до завершения выполнения скрипта.
Подходит только для маленьких скриптов в конце страницы.
script async
Скрипт загружается асинхронно и выполняется сразу, как только загрузился.
Не гарантирует порядок выполнения (если несколько async-скриптов).
Подходит для сторонних скриптов (аналитика, реклама).
Поведение:
Не блокирует HTML-парсинг во время загрузки.
Может блокировать рендеринг при выполнении.
script defer
Скрипт загружается асинхронно, но выполняется после полной загрузки HTML.
Сохраняет порядок подключения скриптов.
Идеально для большинства современных приложений.
Поведение:
Не блокирует HTML.
Выполняется после завершения парсинга HTML, но до события DOMContentLoaded.
23
Q
Что такое Prop Drilling
A
— это ситуация, когда данные (пропсы) передаются через несколько уровней вложенных компонентов, даже если промежуточные компоненты их не используют напрямую.
24
Q
Методы жизненного цикла компонента в React
A
Жизненный цикл компонента в React — это последовательность этапов, через которые проходит компонент от его создания до удаления из DOM.
Жизненный цикл существует только у классовых компонентов, но его поведение можно повторить с помощью хуков в функциональных компонентах.
Этапы жизненного цикла
Жизненный цикл делится на 3 ключевых фазы:
Фаза Описание
Mounting Момент появления компонента в DOM
Updating Обновление компонента при изменениях
Unmounting Удаление компонента из DOM
Методы Mounting-фазы
Метод Когда вызывается
constructor В момент создания компонента
static getDerivedStateFromProps До рендера (редко используется)
render Обязательный метод, возвращает JSX
componentDidMount После монтирования в DOM
Методы Updating-фазы
Метод Когда вызывается
static getDerivedStateFromProps При обновлении пропсов
shouldComponentUpdate Перед ререндером (можно отменить его)
render При каждом обновлении
getSnapshotBeforeUpdate Снимок DOM до обновления
componentDidUpdate После обновления компонента
Метод Unmounting-фазы
Метод Когда вызывается
componentWillUnmount Перед удалением компонента из DOM
Аналоги в функциональных компонентах
Функции-хуки позволяют повторить поведение жизненного цикла:
Классовый метод Хук в функции
componentDidMount useEffect(() => {}, [])
componentDidUpdate useEffect(() => {…}, [dep])
componentWillUnmount useEffect(() => { return () => {…} }, [])
shouldComponentUpdate React.memo() + useCallback, useMemo
25
Что такое Portal в React
Portal (портал) — это механизм в React, который позволяет рендерить компонент вне основного DOM-дерева, но при этом он всё равно остаётся частью React-иерархии.
Это удобно, когда нужно отобразить модальные окна, тултипы, дропдауны, которые не должны быть вложены в родительские стили (например, overflow: hidden, z-index, transform).
Как создать портал?
React предоставляет специальный метод:
ReactDOM.createPortal(children, container)
children — элемент, который нужно отрисовать
container — DOM-элемент, в который будет помещён JSX вне текущего дерева
Пример использования портала
import { createPortal } from 'react-dom';
function Modal({ children }) {
return createPortal(
{children}
,
document.getElementById('modal-root') // вне корня приложения
);
}
HTML
Теперь компонент Modal не будет обёрнут родительскими стилями #root, но React по-прежнему будет управлять его состоянием и жизненным циклом.
26
Что такое React.PureComponent
— это специальный тип классового компонента в React, который автоматически реализует метод shouldComponentUpdate() с поверхностным сравнением props и state.
Если входные данные (props или state) не изменились, компонент не перерисовывается.
27
React.lazy и Suspense — ленивые компоненты в React
React.lazy и Suspense — это инструменты в React, которые позволяют лениво загружать компоненты, т.е. только тогда, когда они действительно нужны. Это называется code splitting (разделение кода), и оно помогает улучшить производительность приложения.
Зачем это нужно?
Сокращает время первой загрузки приложения
Делит код на отдельные чанки
Загружает тяжёлые компоненты по мере необходимости
Особенно важно для SPA и мобильных пользователей
React.lazy
Это функция, которая позволяет динамически импортировать компонент и возвращать его как обычный React-компонент.
Синтаксис:
const LazyComponent = React.lazy(() => import('./MyComponent'));
Что такое Suspense?
Так как загрузка ленивого компонента может занять время, React предлагает компонент Suspense, в котором указывается fallback — что показать, пока компонент загружается.
Пример Suspense
import React, { Suspense } from "react";
const LazyComponent = React.lazy(() => import("./MyComponent"));
function App() {
return (
Загрузка... }>
);
}
Пример с маршрутизацией
import { BrowserRouter, Routes, Route } from "react-router-dom";
import React, { lazy, Suspense } from "react";
const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));
function App() {
return (
28
Что такое React.memo и зачем он нужен
— это функция высшего порядка (Higher Order Component, HOC) в React, которая позволяет мемоизировать функциональные компоненты.
Она предотвращает лишние ререндеры, если пропсы не изменились.
Когда использовать React.memo?
Полезен, если:
Компонент часто получает одни и те же props
Он тяжёлый по вычислениям (например, содержит вложенные списки, графики)
Вы хотите избежать лишних ререндеров
Не нужен, если:
Компонент маленький и простой
Props всегда разные (например, функция создаётся заново каждый раз без useCallback)
Нет проблем с производительностью
29
Как работает useMemo
— это хук в React, который позволяет мемоизировать значение, то есть сохранить результат вычислений между рендерами, чтобы не пересчитывать его заново без необходимости.
Он особенно полезен, если вычисление ресурсоёмкое или зависит от переменных, которые редко меняются.
Зачем нужен useMemo
Реакт заново вызывает компонент при каждом ререндере, и все вычисления выполняются заново, даже если результат будет тот же. Если функция тяжёлая — это снижает производительность.
Важно:
useMemo не гарантирует кэш — он может очиститься при низком ресурсе памяти. Это подсказка для оптимизации, а не жёсткое хранилище.
30
Как работает useCallback
— это хук в React, который позволяет мемоизировать (запоминать) функцию между рендерами компонента.
Он возвращает ту же версию функции, если зависимости не изменились, и предотвращает создание новой функции при каждом рендере.
31
Зачем нужен useImperativeHandle в React
useImperativeHandle — это хук в React, который позволяет управлять тем, какие методы и свойства будут доступны родителю при использовании ref на дочернем компоненте.
Он используется в паре с forwardRef, чтобы настроить внешний интерфейс доступа к внутренним функциям/значениям компонента.
Синтаксис
useImperativeHandle(ref, () => ({
// методы, которые будут доступны извне
someMethod() {
// ...
},
}), [dependencies]);
ref — ссылка, переданная через forwardRef.
Функция () => ({...}) возвращает объект с публичным API.
[dependencies] — список зависимостей для обновления объекта.
Когда нужен useImperativeHandle
Когда вы хотите ограничить доступ к внутренним функциям компонента (инкапсуляция).
Когда нужно экспонировать методы дочернего компонента родителю (например, focus, reset, scrollToTop и др.).
Когда работаете с нестандартными или сложными DOM-элементами, кастомными компонентами, модальными окнами и т.д.
32
Как работает useLayoutEffect в React и чем он отличается от useEffect?
useLayoutEffect — это хук в React, который похож на useEffect, но с одной ключевой разницей: он выполняется сразу после изменений DOM, но до того, как браузер применит изменения и отобразит их на экране.
Как работает useLayoutEffect?
Синхронный эффект. В отличие от useEffect, который выполняется асинхронно после рендера, useLayoutEffect выполняется синхронно сразу после того, как React обновит DOM, но до того, как браузер нарисует изменения на экране. Это может быть полезно, если вам нужно измерить DOM или выполнить действия, которые могут повлиять на отрисовку.
Для работы с DOM. Этот хук чаще используется, когда необходимо сделать что-то с DOM напрямую (например, измерить размеры элементов или применить стили до того, как браузер отобразит обновления).
Отличия от useEffect
Время выполнения:
useEffect выполняется асинхронно после того, как браузер завершит рендеринг и отрисует изменения.
useLayoutEffect выполняется синхронно сразу после изменений DOM, но до того, как браузер применит изменения и отобразит их.
Использование:
useEffect подходит для большинства побочных эффектов, таких как запросы данных или подписки.
useLayoutEffect используется, когда необходимо синхронно работать с DOM, например, для измерений или изменений, которые должны произойти до отрисовки.
Производительность:
useEffect не блокирует рендеринг, так как выполняется после того, как браузер отобразит изменения.
useLayoutEffect может блокировать рендеринг, если он выполняет сложные вычисления или операции, которые требуют времени.
33
Что такое Web Workers?
Web Worker — это механизм в JavaScript, который позволяет запускать фоновый поток для выполнения тяжёлых или длительных операций без блокировки основного UI.
С помощью Web Workers можно:
выполнять сложные вычисления,
обрабатывать большие массивы данных,
работать с canvas или WebAssembly,
и при этом не замораживать интерфейс.
Что не умеет Web Worker?
Не имеет доступа к DOM
Не может обращаться к window, document, alert, localStorage
Может работать только через сообщения (message passing)
34
Что такое Service Worker?
Service Worker — это фоновый скрипт, который работает отдельно от основного потока браузера, перехватывает сетевые запросы, управляет кэшированием и обеспечивает офлайн-работу веб-приложений.
Он не имеет доступа к DOM, но может:
кэшировать ресурсы,
обрабатывать сетевые запросы,
показывать push-уведомления,
выполнять фоновую синхронизацию данных.
Зачем нужен?
Service Workers используются для:
Офлайн-доступа (Progressive Web Apps)
Ускорения загрузки через кэш
Обработки push-уведомлений
Фоновой синхронизации данных
Имитации серверного поведения (Mock API)
Жизненный цикл
Установка (install) — сервис-воркер загружается и подготавливает кэш.
Активация (activate) — очищаются старые данные, создаётся новый кэш.
Работа (fetch) — перехват и обработка всех запросов, управление кэшем.
Удаление — когда не используется, удаляется из браузера.
35
Что такое прогрессивный рендеринг в веб-разработке
— это техника, при которой части контента страницы отображаются по мере их загрузки, а не после полной загрузки всего документа.
Цель — сделать сайт или приложение воспринимаемо быстрым: пользователь видит что-то полезное как можно раньше.
Почему это важно?
Пользователь может начать взаимодействовать со страницей ещё до полной загрузки:
Уменьшается First Contentful Paint (FCP)
Улучшается восприятие скорости
Повышается UX, особенно в условиях плохой сети
Основные техники прогрессивного рендеринга
Lazy Loading (отложенная загрузка)
Загружаем только видимый контент, остальное — по мере прокрутки или запроса.
Применяется к изображениям, видео, heavy-компонентам.
В React: React.lazy, Suspense, dynamic import().
Streaming (HTML Streaming, SSR Streaming)
Сервер постепенно отправляет HTML в браузер.
Позволяет начать рендер до того, как весь контент будет готов.
// Пример в React 18 с SSR streaming
import { renderToPipeableStream } from "react-dom/server";
Очень полезно в SSR и больших приложениях.
Skeletons и Placeholder'ы
Вместо пустых блоков показываются скелеты или заглушки, пока идёт загрузка данных.
{isLoading ?
В React: React.lazy, Suspense, dynamic import().
Streaming (HTML Streaming, SSR Streaming)
Сервер постепенно отправляет HTML в браузер.
Позволяет начать рендер до того, как весь контент будет готов.
// Пример в React 18 с SSR streaming
import { renderToPipeableStream } from "react-dom/server";
Очень полезно в SSR и больших приложениях.
Skeletons и Placeholder'ы
Вместо пустых блоков показываются скелеты или заглушки, пока идёт загрузка данных.
{isLoading ?
36
37
Различие методов call apply bind
Различия:
call и apply сразу вызывают функцию, в то время как bind создает новую функцию, которую можно вызвать позже.
apply принимает аргументы в виде массива, call - в виде отдельных параметров, bind - как и call.
bind не вызывает функцию, а возвращает новую функцию, тогда как call и apply вызывают функцию сразу.
call и apply можно использовать для функций с произвольным числом аргументов, в то время как bind фиксирует аргументы при создании новой функции.
call:
Синтаксис: function.call(context, arg1, arg2, ...).
apply:
Синтаксис: function.apply(context, [arg1, arg2, ...]).
bind:
Синтаксис: function.bind(context, arg1, arg2, ...).
38
В чём разница между классической функцией и стрелочной (function expression и function declaration)
Синтаксис:
Классическая функция function expression:
function add(a, b) { return a + b }
Стрелочная функция function declaration:
const add = (a, b) => a + b;
Контекст (значение this):
Классическая функция:
Имеет свой собственный контекст this, который зависит от того, как она была вызвана.
Стрелочная функция:
Не имеет своего собственного контекста this; она заимствует контекст из родительского контекста в момент создания.
Связывание (bind):
Классическая функция:
Может быть привязана к определенному контексту с использованием метода bind.
Стрелочная функция:
Нельзя изменить контекст с помощью bind, так как у неё нет своего собственного this.
Аргументы arguments:
Классическая функция:
Имеет объект arguments, который содержит все переданные ей аргументы.
Стрелочная функция:
Не имеет собственного объекта arguments. Вместо этого, она использует аргументы из своего родительского контекста.
Ключевое слово new:
Классическая функция:
Может использоваться с ключевым словом new для создания экземпляра объекта.
Стрелочная функция:
Не может быть использована с ключевым словом new. Она не имеет собственного prototype, и попытка использовать new вызовет ошибку.
Длина функции (length):
Классическая функция:
Имеет свойство length, которое представляет количество параметров, объявленных в функции.
Стрелочная функция:
Не имеет собственного свойства length. Всегда возвращает 0, потому что не имеет собственных именованных аргументов.
Способ определения:
Классическая функция:
Лучше подходит для методов объектов, обработчиков событий, конструкторов и других случаев, где важен контекст this.
Стрелочная функция:
Удобна для кратких анонимных функций и в случаях, когда контекст this не является критически важным, например, для обработчиков событий или функций обратного вызова.
Выбор между классической и стрелочной функцией зависит от конкретного контекста использования и требований вашего кода.
39
Какие способы изоляции стилей ты знаешь
Изоляция стилей является важным аспектом веб-разработки для предотвращения конфликтов и воздействия стилей одного компонента на другие.
Inline Styles (Встроенные стили): Стили задаются непосредственно внутри тега элемента с использованием атрибута style(
).
CSS Modules:Позволяют изолировать стили на уровне компонента путем создания уникальных имен классов( index.module.css).
Shadow DOM: Позволяет создавать изолированный корневой узел DOM с его собственными стилями и селекторами. Внутри html в теге style все стили
BEM (Block Element Modifier):Методология именования классов, направленная на создание модульных и изолированных компонентов.(
40
В чем разница == и ===
Двойное равенство ==
Сравнивает значения с приведением типов.
Если типы операндов различаются, JavaScript попытается привести их к общему типу перед сравнением.
5 == "5" // true, так как "5" приводится к числу
Тройное равенство ===:
Сравнивает значения без приведения типов (строгое сравнение).
Возвращает true только в том случае, если значения и их типы совпадают.
5 === "5" // false, так как значения различаются по типу
41
Какими способами можно объявить переменные, назовите отличия
var,let,const,a=5
42
В чём разница между foreach и map
forEach и Map применяет функцию обратного вызова к каждому элементу массива.
forEach не создает новый массив и не возвращает результат.
Map создает новый массив и возвращает результат.
forEach - Может изменять элементы исходного массива(мутирует)
Map - Не изменяет исходный массив.
forEach Возвращает undefined.
Map Возвращает новый массив.
43
В чём отличие null от undefined
null и undefined - это два специальных значения в JavaScript, которые представляют отсутствие значения, но они имеют различия в своем использовании и семантике.
undefined:
Переменная, которой не было присвоено значение, по умолчанию имеет значение undefined.
Если функция не возвращает явно значение, её возвращаемое значение также будет undefined.
Параметры функции, которые не были переданы, имеют значение undefined.
Попытка обратиться к несуществующему свойству объекта также вернет undefined.
null:
null - это явное значение, которое используется для представления отсутствия значения или отсутствия ссылки на объект.
Если переменной присвоено значение null, это обозначает, что переменная явно не ссылается на какой-либо объект или значение.
null используется программистом для явного указания на отсутствие значения.
Различия:
undefined обычно означает, что значение отсутствует из-за неопределенности, в то время как null явно указывает на отсутствие значения.
undefined - это значение по умолчанию для неинициализированных переменных, а null - это значение, которое программист присваивает переменной.
При сравнении значений, null и undefined равны друг другу, но не равны никаким другим значениям.
undefined чаще возникает естественным образом в процессе выполнения кода, в то время как null обычно устанавливается программистом для явного указания на отсутствие значения.
44
Что такое дженерик
"дженерик" (или "generic") обозначает использование обобщенных (generic) типов данных или функций, которые могут работать с различными типами данных, без фиксированного привязывания к конкретному типу. Дженерики позволяют писать более универсальный и переиспользуемый код.
45
что такое utility types
В TypeScript существует несколько встроенных утилитных типов (utility types), которые предоставляют удобные инструменты для работы с типами данных.
46
Partial T
Создает тип, состоящий из всех возможных(необязательных) частичных вариантов типа T.
Пример:
typescript
interface User {
name: string;
age: number;
}
type PartialUser = Partial User;
// PartialUser имеет тип { name?: string; age?: number; }
47
Required T
Создает тип, состоящий из всех обязательных свойств типа T.
interface PartialUser {
name?: string;
age?: number;
}
type RequiredUser = Required PartialUser;
// RequiredUser имеет тип { name: string; age: number; }
48
Readonly T
Создает тип, состоящий из свойств типа T только для чтения.
interface User {
name: string;
age: number;
}
type ReadonlyUser = Readonly User;
// ReadonlyUser имеет тип { readonly name: string; readonly age: number; }
49
Record K, T
Создает тип объекта с ключами типа K и значениями типа T.
type UserRoles = Record string, string;
// UserRoles имеет тип { [key: string]: string; }
50
Pick T, K
Создает тип, выбирая из типа T только указанные свойства с ключами типа K.
interface User {
name: string;
age: number;
address: string;
}
type UserInfo = Pick User, 'name' | 'age';
// UserInfo имеет тип { name: string; age: number; }
51
Omit
Создает тип, исключая из типа T указанные свойства с ключами типа K.
Пример:
typescript
interface User {
name: string;
age: number;
address: string;
}
type WithoutAddress = Omit;
// WithoutAddress имеет тип { name: string; age: number; }
52
Exclude T, U
Создает тип, исключая из типа T все типы, которые также являются членами типа U.
type Numbers = 1 | 2 | 3 | 4 | 5;
type OddNumbers = Exclude Numbers, 2 | 4;
// OddNumbers имеет тип 1 | 3 | 5
53
Extract T, U
Создает тип, выбирая из типа T только те типы, которые также являются членами типа U
type Numbers = 1 | 2 | 3 | 4 | 5;
type EvenNumbers = ExtractNumbers, 2 | 4;
// EvenNumbers имеет тип 2 | 4
54
NonNullable T
Создает тип, исключая null и undefined из типа T
type NullableString = string | null | undefined;
type NonNullString = NonNullable "NullableString";
// NonNullString имеет тип string
55
Что такое мемоизация
Мемоизация - это оптимизационная техника в программировании, которая заключается в сохранении результатов выполнения функции для заданных входных данных (аргументов), чтобы избежать повторного вычисления для одних и тех же входных данных. Это особенно полезно, когда функция является ресурсоемкой и часто вызывается с одними и теми же аргументами.
Принцип мемоизации заключается в том, чтобы кэшировать результаты выполнения функции и возвращать закешированный результат, если функция вызывается с теми же аргументами, что и ранее. Это может значительно ускорить выполнение программы и снизить избыточные вычисления.
В языке программирования JavaScript мемоизация часто реализуется с использованием объекта для хранения кэша. Вот пример простой функции мемоизации на JavaScript:
function memoize(fn) {
const cache = {};
return function (...args) {
const key = JSON.stringify(args);
if (cache[key] === undefined) {
// Вычисление и кэширование результата, если он не найден в кэше
cache[key] = fn.apply(this, args);
}
return cache[key];
};
}
const memoizedExpensiveOperation = memoize(expensiveOperation);
console.log(memoizedExpensiveOperation(5)); // Вычисление для 5
console.log(memoizedExpensiveOperation(5)); // Значение взято из кэша для 5
console.log(memoizedExpensiveOperation(10)); // Вычисление для 10
console.log(memoizedExpensiveOperation(10)); // Значение взято из кэша для 10
В этом примере, если memoizedExpensiveOperation вызывается с теми же аргументами, результат берется из кэша, что позволяет избежать повторного выполнения дорогостоящей операции.
56
Можешь рассказать о семантическом вресионировании
Семантическое версионирование (Semantic Versioning или SemVer) - это система нумерации версий, предназначенная для упрощения понимания изменений в программном обеспечении. SemVer используется для ясного и структурированного представления версий библиотек, пакетов и приложений, а также для управления зависимостями между ними.
Версии в SemVer состоят из трех чисел: MAJOR.MINOR.PATCH. Каждая из этих частей имеет свою семантику:
MAJOR (главная версия):
Увеличивается, когда внесены несовместимые изменения API.
Это означает, что изменения в MAJOR могут привести к нарушению обратной совместимости с предыдущими версиями.
MINOR (минорная версия):
Увеличивается, когда добавлены новые функциональные возможности, сохраняя обратную совместимость.
Новые функции в MINOR версии не должны нарушать существующее API.
PATCH (патч):
Увеличивается, когда внесены обратно совместимые исправления ошибок.
PATCH версия не должна вносить изменений в API и предназначена для исправления ошибок.
Помимо основной тройки MAJOR.MINOR.PATCH, SemVer также поддерживает дополнительные метаданные и предварительные (pre-release) версии. Например, 1.0.0-alpha.1 - это предварительная версия версии 1.0.0.
Применение семантического версионирования упрощает процесс обновления и управления зависимостями, так как разработчики и системы автоматической сборки могут точно определить, какие изменения включает новая версия, и принимать решения о необходимости обновления на основе этой информации.
57
Что такое this
this - это ключевое слово в JavaScript, которое используется для обращения к текущему контексту выполнения. Значение this зависит от того, как функция вызывается и где она вызывается.
Глобальный контекст:
Вне зависимости от того, где находится код, в глобальном контексте выполнения this ссылается на глобальный объект, который в браузере часто представлен как window.
Когда функция вызывается в контексте объекта, this ссылается на этот объект.
const obj = {
name: "John",
greet: function() {
console.log("Hello, " + this.name);
}
};
Если функция вызывается как отдельная функция, вне контекста объекта, this ссылается на глобальный объект (в нестрогом режиме) или на undefined (в строгом режиме).
Контекст стрелочной функции:
Стрелочные функции не имеют собственного значения this; вместо этого, они заимствуют значение this из своего окружающего контекста.
58
В чём отличие хранения данных в local storage от куки
Local Storage и куки (Cookies) - это два различных механизма хранения данных в веб-браузерах, и у них есть несколько ключевых различий:
Объем данных:
Local Storage: около 5-10 МБ
Cookies: Куки обычно ограничены объемом до 4 КБ на домен.
Срок жизни:
Local Storage: могут сохраняться долгосрочно (постоянно),остаются доступными после закрытия браузера и перезапуска компьютера.
Cookies: Куки могут иметь различные сроки жизни, включая временные (только для текущей сессии), постоянные (сохраняются на долгий срок), или срок действия, устанавливаемый программно.
Передача данных на сервер:
Local Storage: Данные не отправляются на сервер автоматически при каждом запросе к серверу. То есть не участвуют в автоматическом обмене данными между клиентом и сервером.
Cookies: Куки автоматически включаются в каждый HTTP-запрос к серверу.
Доступность для JavaScript:
Local Storage: доступны для чтения и записи через JavaScript с использованием API localStorage.
Cookies: доступны через JavaScript с использованием document.cookie, но их API менее удобен для работы.
Безопасность:
Local Storage: Данные доступны только для того же источника (домена), который их создал. Доступ к данным из другого домена ограничен политиками безопасности браузера (same-origin policy).
Cookies: Куки также поддерживают политику same-origin, но могут быть настроены с использованием атрибутов Secure и HttpOnly для улучшения безопасности.
59
Cookies что это
Cookies (куки) - это небольшие текстовые файлы, которые веб-сайты отправляют и хранят на компьютере пользователя через веб-браузер. Куки содержат информацию о веб-сессии, предпочтениях пользователя, состоянии аутентификации и другие данные, которые могут быть использованы сайтом при последующих посещениях.
Основные характеристики куки:
Хранение данных:
Куки представляют собой текстовые файлы, которые содержат небольшие объемы данных, обычно в виде пар ключ-значение.
Передача на сервер:
Куки автоматически включаются в каждый HTTP-запрос к серверу, связанному с соответствующим доменом. Это позволяет серверу узнавать состояние пользователя и предоставлять персонализированный опыт.
Срок действия:
Куки могут иметь различные сроки действия, включая временные (браузерное сессия), постоянные (сохраняются на долгий срок), или срок действия, устанавливаемый программно.
Безопасность:
Куки поддерживают политику same-origin, что означает, что они могут быть доступны только для того же источника (домена), который их создал.
Доступ через JavaScript:
Куки можно читать и устанавливать через JavaScript с использованием объекта document.cookie. Однако, некоторые атрибуты кук, такие как HttpOnly, могут ограничивать доступ к кукам из JavaScript с целью повышения безопасности.
// Установка куки
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
// Чтение куки
const username = document.cookie.split('; ').find(row => row.startsWith('username=')).split('=')[1];
Куки широко используются для различных целей, включая сохранение сеансов аутентификации, отслеживание пользовательских предпочтений, аналитику и т.д. Однако, из-за своей природы, куки также являются объектом внимания вопросов конфиденциальности и безопасности, и существуют механизмы управления и ограничениями их использования, такие как политики SameSite.
60
Что такое localstorage + пример
localStorage - это API веб-браузера, предоставляющее простое хранилище данных в виде пар ключ-значение. localStorage предназначен для хранения данных на стороне клиента, и эти данные остаются доступными даже после закрытия веб-браузера или перезапуска компьютера. Это предоставляет простой способ сохранения состояния или локальных настроек веб-приложения.
// Сохранение данных в localStorage
localStorage.setItem('username', 'JohnDoe');
// Получение данных из localStorage
const savedUsername = localStorage.getItem('username');
// Получение объекта из localStorage
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser); // Выводит { name: 'John Doe', age: 30 }
Обратите внимание, что данные в localStorage хранятся на уровне домена, и доступ к ним осуществляется только с того же самого домена, который их создал. Кроме того, хотя localStorage обеспечивает удобство, следует быть внимательным при хранении чувствительной информации, поскольку она доступна и изменяема из JavaScript в контексте того же домена.
61
Какие бывают хуки и чля чего они нужны(без примеров кода)
Хуки (Hooks) в React - это функции, которые позволяют вам использовать состояние и другие возможности React в функциональных компонентах. Хуки предоставляют более простой и чистый способ организации логики компонентов, делают компоненты более переиспользуемыми и обеспечивают удобное управление состоянием.
Вот некоторые из основных хуков React:
useState:
Позволяет добавлять локальное состояние в функциональные компоненты.
useEffect:
Предоставляет возможность выполнять побочные эффекты в функциональных компонентах, такие как выполнение кода после отрисовки компонента или подписка на внешние события.
useContext:
Позволяет компонентам получать доступ к значению контекста из ближайшего провайдера контекста.
useReducer:
Предоставляет альтернативу useState для управления более сложными состояниями с использованием функции редуктора.
useCallback:
Мемоизирует функцию, предотвращая ее пересоздание при каждом рендере компонента. Это полезно, чтобы избежать ненужных ререндеров дочерних компонентов, которым передаются функции.
useMemo:
Мемоизирует результат вычислений, предотвращая их повторное выполнение при каждом рендере компонента. Это полезно для оптимизации производительности.
useRef:
Создает объект ref, который может быть использован для сохранения мутабельных данных между рендерами без вызова повторного рендера.
useImperativeHandle:
Позволяет настроить значение, которое передается родительскому компоненту при использовании React.forwardRef.
useLayoutEffect:
Похож на useEffect, но запускается синхронно после всех изменений DOM. Используется, когда требуется измерить или манипулировать DOM сразу после рендера.
useDebugValue:
Позволяет отображать дополнительные данные в инструментах разработчика React.
Хуки в React предоставляют простой и единообразный способ управления состоянием и жизненным циклом функциональных компонентов, что делает код более читаемым, понятным и поддерживаемым.
62
Расскажи про области видимости
Глобальная область видимости (Global scope):
Переменные и функции, объявленные в глобальной области видимости, доступны из любой части кода, включая другие функции и блоки кода.
Переменные и функции, объявленные без использования ключевых слов var, let, или const, автоматически становятся глобальными.
Локальная область видимости (Local scope):
Переменные и функции, объявленные внутри функции или блока кода (например, условного оператора if или цикла for), имеют локальную область видимости.
Они доступны только внутри этой функции или блока кода и не видны извне.
Область видимости блока (Block scope):
Введена с появлением ES6 (ECMAScript 2015).
Переменные, объявленные с использованием ключевых слов let и const, имеют область видимости блока, ограниченную фигурными скобками {}.
Такие переменные доступны только внутри блока, в котором они были объявлены, и не видны вне этого блока.
Область видимости функции (Function scope):
Это старый подход, который применяется к переменным, объявленным с использованием ключевого слова var.
Переменные, объявленные внутри функции с использованием var, имеют область видимости, ограниченную функцией, и не доступны вне ее.
63
Какие бывают значения у свойства position(5)
Свойство position в CSS определяет метод позиционирования элемента на веб-странице. Вот основные значения для этого свойства:
static:
Элемент размещается в нормальном потоке документа, и его позиция определяется обычным порядком в HTML-коде.
Свойства top, right, bottom, left игнорируются при использовании position: static.
relative:
Элемент также размещается в нормальном потоке, но его положение может быть смещено с использованием свойств top, right, bottom, left.
Окружающие элементы занимают место, которое элемент занимал бы в нормальном потоке.
absolute:
Элемент удаляется из нормального потока, и его позиция определяется относительно ближайшего позиционированного (не static) предка.
Если такого предка нет, позиция устанавливается относительно краев окна браузера.
fixed:
Элемент также удаляется из нормального потока, и его позиция задается относительно краев окна браузера, что делает элемент "прикрепленным" к экрану.
Элемент остается на месте при прокрутке страницы.
sticky:
Элемент начинает вести себя как relative, когда он в пределах контейнера, и как fixed, когда он выходит за границы контейнера во время прокрутки.
Это значит, что элемент "приклеивается" к верхней или нижней границе контейнера в зависимости от направления прокрутки.
64
Как использовать useeffect
Хук useEffect в React используется для выполнения побочных эффектов в функциональных компонентах. Побочные эффекты могут быть, например, запросы к серверу, подписка на события, изменение DOM после рендера компонента и так далее.
Первый аргумент useEffect - это функция, содержащая код для выполнения побочного эффекта.
Второй аргумент useEffect - это массив зависимостей. Если какие-то переменные из этого массива изменяются между рендерами, эффект будет вызван снова. Если массив зависимостей пуст или отсутствует, эффект будет вызываться после каждого рендера.
65
Что такое семантика
Семантика HTML (HyperText Markup Language) относится к использованию HTML-тегов для передачи смысла и значения структуре веб-документа. В контексте HTML семантика означает использование тегов и их атрибутов для ясного определения содержимого и его роли на веб-странице.
Принципы семантики HTML включают:
Ясное определение структуры документа:
Использование семантических тегов, таких как , , , , , , , позволяет четко определить различные части документа.
Корректное использование заголовков:
Заголовки ( до
до ) используются для организации информации в древовидной структуре, отражая иерархию и важность контента.
Описание списков и таблиц:
Семантические теги, такие как , , - ,
, - ,
- , а также теги для создания таблиц (, , , , , ), предоставляют ясное представление структуры списков и таблиц.
Использование адекватных тегов для мультимедийных элементов:
Для встраивания изображений, видео и аудио используются соответственно
![]()
, , , и дополнительные атрибуты и теги, чтобы обеспечить альтернативный контент и улучшить доступность.
Применение тегов форм:
Семантические теги форм, такие как , , , , , , помогают создавать интерактивные формы с четко определенными элементами.
Применение семантики в HTML важно для улучшения читаемости кода, поддержания доступности веб-страниц для всех пользователей, включая тех, которые используют устройства чтения с экрана, и повышения релевантности и индексации контента поисковыми системами. Это также способствует лучшему пониманию структуры документа программами и разработчиками.
- ,
- ,
- ,
- ,
- , а также теги для создания таблиц (, , , , , ), предоставляют ясное представление структуры списков и таблиц.
Использование адекватных тегов для мультимедийных элементов:
Для встраивания изображений, видео и аудио используются соответственно
, , , и дополнительные атрибуты и теги, чтобы обеспечить альтернативный контент и улучшить доступность. Применение тегов форм: Семантические теги форм, такие как , , , , , , помогают создавать интерактивные формы с четко определенными элементами. Применение семантики в HTML важно для улучшения читаемости кода, поддержания доступности веб-страниц для всех пользователей, включая тех, которые используют устройства чтения с экрана, и повышения релевантности и индексации контента поисковыми системами. Это также способствует лучшему пониманию структуры документа программами и разработчиками.
- ,
66
Что такое методолгия bem
BEM (Block, Element, Modifier) - это методология именования классов в CSS, предназначенная для организации кода веб-приложений. Она разработана и используется компанией Яндекс для упрощения разработки и обслуживания стилей в больших проектах.
Блок — это абсолютно независимый компонент страницы. Он отвечает только за отображение элементов — то есть, например, у него не может быть внешних отступов margin. Блоки могут включать в себя другие блоки. Имя блока совпадает с именем селектора по классу:
Элемент — это часть блока, которая имеет смысл только внутри своего блока и отдельно от него не используется. Имя селектора включает имя класса и — через двойное подчёркивание — имя элемента.
Модификатор — это сущность, которая описывает атрибуты блока или элемента: положение, состояние, поведение. Для разделения слов в именах всех сущностей используются дефисы. Модификатор в селекторе именуется через одно подчёркивание после имени элемента или блока.
67
Что такое прототипы
Прототипы в JavaScript - это механизм, который позволяет объектам наследовать свойства и методы других объектов. Каждый объект в JavaScript связан с другим объектом, который называется его прототипом. Прототипы создают цепочку, известную как цепь прототипов (prototype chain), по которой происходит поиск свойств и методов.
Каждый объект в JavaScript, кроме корневого объекта Object, имеет свой прототип. Например, у объекта, созданного с использованием литерала объекта {}, прототипом будет объект Object.prototype. Если мы создадим функцию, у нее будет прототип, связанный с Function.prototype. Это обеспечивает наследование методов и свойств между различными типами объектов.
Пример создания объекта с использованием прототипа:
javascript
Copy code
// Создание объекта с использованием литерала объекта
const myObject = {};
// Вывод прототипа объекта
console.log(Object.getPrototypeOf(myObject)); // Выведет Object.prototype
JavaScript предоставляет два способа работы с прототипами:
__proto__:
Это устаревший способ доступа и установки прототипа объекта. Лучше использовать методы, предоставляемые ECMAScript 2015 (ES6) и выше.
javascript
Copy code
const obj = {};
const prototypeObj = { key: 'value' };
// Установка прототипа через __proto__
obj.__proto__ = prototypeObj;
console.log(obj.key); // Выведет 'value'
Object.create():
Этот метод создает новый объект с указанным прототипом.
javascript
Copy code
const prototypeObj = { key: 'value' };
const obj = Object.create(prototypeObj);
console.log(obj.key); // Выведет 'value'
Прототипы играют важную роль в системе наследования JavaScript и являются основой для работы с объектами и создания их иерархии. Они обеспечивают механизм делегирования свойств и методов между объектами, что улучшает переиспользование кода и управление сложностью программ.
68
Что такое rest api
REST API (Representational State Transfer Application Programming Interface) — это архитектурный стиль для построения веб-сервисов, который основан на принципах REST. REST представляет собой набор ограничений и правил для построения распределённых систем.
69
основные принципы rest api(5)
Основные принципы REST:
Ресурсы (Resources):
Ресурсы представляют собой сущности или объекты, к которым можно получить доступ или с которыми можно взаимодействовать. Ресурсы идентифицируются уникальными URL-адресами.
Представление (Representation):
Ресурсы могут иметь различные представления, такие как JSON, XML или HTML. Клиенты могут обращаться к ресурсам, запросив нужное им представление.
Стейт (Stateless):
Каждый запрос от клиента к серверу должен содержать всю необходимую информацию для понимания и обработки запроса. Сервер не должен хранить состояние между запросами от клиента.
Операции CRUD (Create, Read, Update, Delete):
Операции, соответствующие базовым действиям с данными: создание (POST), чтение (GET), обновление (PUT или PATCH), удаление (DELETE).
Унификация интерфейса (Uniform Interface):
Интерфейс взаимодействия между клиентом и сервером должен быть унифицирован. Это достигается использованием стандартных методов (GET, POST, PUT, DELETE), явной передачей состояния через представления и идентификацией ресурсов.
70
Что такое dom дерево
DOM (Document Object Model) дерево - это иерархическое представление структуры документа в виде объектов, доступных для программного взаимодействия. DOM представляет собой интерфейс для работы с HTML и XML документами, предоставляя структуру документа в виде дерева объектов.
DOM предоставляет API для манипуляции содержимым и структурой документа с использованием JavaScript. Это позволяет программам и веб-браузерам взаимодействовать с веб-страницами и изменять их динамически.
71
Что такое двустороннее связывание
Двустороннее связывание (two-way binding) - это концепция в веб-разработке, когда изменения в пользовательском интерфейсе автоматически отражаются в данных и, наоборот, изменения в данных автоматически обновляют пользовательский интерфейс. Это позволяет синхронизировать состояние пользовательского интерфейса и данных без явных действий со стороны разработчика.
Примером двустороннего связывания является использование фреймворков или библиотек для разработки веб-приложений, таких как Angular, React с использованием библиотеки React, и Vue.js. Эти инструменты предоставляют механизмы для установки связи между данными и элементами интерфейса пользователя.
Принцип работы двустороннего связывания:
Обнаружение изменений:
Фреймворк следит за изменениями в элементах пользовательского интерфейса (например, изменениями в инпутах, чекбоксах, и т.д.) и обнаруживает их.
Обновление данных:
После обнаружения изменений в интерфейсе, фреймворк автоматически обновляет соответствующие данные в модели (например, объекте JavaScript или переменной).
Обновление интерфейса:
Если данные в модели изменяются программно, например, в результате асинхронных операций или взаимодействия с сервером, фреймворк автоматически обновляет соответствующие элементы интерфейса.
Хотя двустороннее связывание может упростить разработку и сделать код более декларативным, иногда оно может привести к неожиданным проблемам и затруднениям в отслеживании изменений. Некоторые разработчики предпочитают использовать одностороннее связывание (one-way binding) в определенных случаях, чтобы явно управлять потоком данных и изменениями.
72
Расскажи о map и set
Map и Set - это структуры данных в JavaScript, введенные стандартом ECMAScript 2015 (ES6), которые предоставляют эффективные способы хранения и обработки коллекций уникальных значений.
Map представляет собой коллекцию ключ-значение, где ключи и значения могут быть любого типа данных. Ключи в Map уникальны, и каждому ключу соответствует одно значение.
Set представляет собой коллекцию уникальных значений любого типа. Элементы в Set уникальны, и каждый элемент может встречаться только один раз.
73
В чём отличие хранения данных в local storage от сессий
localStorage и сессии (sessionStorage) - это два различных механизма хранения данных в веб-браузере, предоставляемых стандартом Web Storage API. Они оба предоставляют клиентскому приложению возможность сохранять данные на стороне клиента, но есть несколько ключевых различий между ними.
localStorage
Постоянность данных:
Данные, хранящиеся в localStorage, сохраняются даже после закрытия браузера и перезапуска компьютера. Они остаются доступными для приложения на долгий срок.
Доступность:
Данные в localStorage доступны для всех вкладок и окон браузера с одним и тем же происхождением (origin).
Объем хранения:
localStorage обычно предоставляет больший объем хранения по сравнению с sessionStorage. В различных браузерах это может быть от нескольких мегабайт до 10 мегабайт или более.
sessionStorage
Время жизни данных:
Данные, хранящиеся в sessionStorage, существуют только в течение времени жизни сессии браузера. Когда пользователь закрывает вкладку или окно браузера, данные удаляются.
Доступность:
Данные в sessionStorage доступны только в пределах той вкладки или окна, в которой они были установлены. Другие вкладки или окна браузера не могут получить доступ к данным из sessionStorage, установленным в другой вкладке или окне.
Объем хранения:
Объем хранения sessionStorage обычно меньше, чем у localStorage, и может варьироваться от нескольких мегабайт до 10 мегабайт или менее.
74
Что такое псевдоэлемент
Псевдоэлементы в CSS представляют собой части элемента, которые не являются реальными элементами DOM, но позволяют стилизовать определенные части содержимого или элемента. Они добавляются с использованием двойного двоеточия (::) перед именем псевдоэлемента.
Некоторые другие распространенные псевдоэлементы включают:
::before: добавляет контент перед содержимым элемента.
::after: добавляет контент после содержимого элемента.
::first-line: применяет стили к первой строке текста внутри элемента.
::first-letter: применяет стили к первой букве текста внутри элемента.
::selection: применяет стили к выделенному тексту пользователем.
Применение псевдоэлементов позволяет вам создавать эффекты и стили, которые не требуют дополнительных элементов в HTML-коде.
75
Что такое iife
IIFE (Immediately Invoked Function Expression) представляет собой JavaScript-функцию, которая вызывается немедленно после ее создания. Это конструкция, которая оборачивает функцию внутри группирующих скобок (обычно используется анонимная функция) и сразу же вызывает ее.
Синтаксис IIFE выглядит следующим образом:
(function() {
// код IIFE
})();
Основная идея IIFE заключается в создании локальной области видимости для предотвращения загрязнения глобальной области видимости переменными, которые используются внутри функции. Поскольку функция выполняется сразу после создания, любые переменные, объявленные внутри IIFE, не будут конфликтовать с переменными из внешнего контекста.
Пример IIFE:
javascript
Copy code
(function() {
var localVar = "This is a local variable";
console.log(localVar);
})();
// console.log(localVar); // Ошибка: localVar не определена в глобальной области видимости
В данном примере переменная localVar существует только внутри IIFE и не доступна за его пределами. Это позволяет избежать конфликтов и улучшает управление областями видимости в JavaScript.
IIFE также часто используются для создания замыканий, приватных переменных и модульного кода.
76
Что такое props
props (сокращение от "properties") в контексте React представляют собой объект, содержащий параметры (или свойства), передаваемые компоненту от его родительского компонента. С использованием props компоненты React могут взаимодействовать друг с другом, передавая данные от родителя к потомкам.
77
Какие селекторы знаешь
Селектор элемента (element selector):
Выбирает все элементы определенного типа.
Селектор идентификатора (id selector):
Выбирает единственный элемент с определенным идентификатором.
Селектор класса (class selector):
Выбирает все элементы с определенным классом.
Селектор потомка (descendant selector):
Выбирает все элементы-потомки указанного элемента.
Селектор дочернего элемента (child selector):
Выбирает все прямые дочерние элементы указанного элемента.
Селектор атрибута (attribute selector):
Выбирает элементы с определенным атрибутом или атрибутом, соответствующим определенному значению.
Селектор псевдокласса (pseudo-class selector):
Выбирает элементы в определенном состоянии или позиции.
Селектор псевдоэлемента (pseudo-element selector):
Выбирает определенную часть элемента.
Универсальный селектор (universal selector):
Выбирает все элементы.
Селектор проверки видимости (:visible, :hidden):
Выбирает элементы на основе их видимости.
78
Что означает слово каскад в css
Каскад (cascade) в CSS означает применение стилей к элементам веб-страницы в соответствии с набором правил и приоритетов, определенных в таблице стилей. Процесс применения стилей следует логике каскада, и он описывает, какие стили должны быть применены к конкретному элементу при наличии нескольких правил стилей.
79
Как поменять контекст функции
Использование методов bind, call и apply:
bind: Создает новую функцию с привязанным контекстом, но не вызывает ее.
call: Вызывает функцию с указанным контекстом и передает параметры в виде отдельных аргументов.
apply: Вызывает функцию с указанным контекстом и передает параметры в виде массива.
Использование стрелочных функций:
Стрелочные функции не имеют своего собственного контекста (this берется из окружающего контекста в момент создания функции).
80
Что такое деструктуризация
Деструктуризация (Destructuring) в программировании - это специальный синтаксис в языках программирования, который позволяет разбирать (деструктурировать) структурированные данные, такие как массивы или объекты, на более мелкие части, присваивая их переменным в одной строке. Это удобный и краткий способ работы с данными.
81
Что такое псевдоклассы
Псевдоклассы в CSS - это ключевые слова, которые добавляют дополнительные стили к определенным состояниям или частям элементов, которые не могут быть выбраны с использованием обычных селекторов. Псевдоклассы начинаются с двоеточия (:) и применяются к элементам в определенных условиях.
82
примеры псевдоклассов в css
:hover: Применение стилей при наведении курсора мыши на элемент.
:focus: Стилизация элемента, который в данный момент находится в фокусе (активном).
:active: Применение стилей к элементу в момент его активации (нажатие и удержание).
:nth-child(n): Стилизация каждого n-ного дочернего элемента.
:first-child: Применение стилей к первому дочернему элементу.
:last-child: Стилизация последнего дочернего элемента.
:nth-of-type(n): Стилизация каждого n-ного элемента определенного типа.
:not(selector): Применение стилей к элементам, не соответствующим указанному селектору.
:checked: Стилизация выбранных (отмеченных) элементов формы.
:disabled: Применение стилей к выключенным элементам формы.
:empty: Стилизация элементов, которые не содержат дочерних элементов или текстового содержимого.
:nth-last-child(n): Стилизация каждого n-ного дочернего элемента, начиная с конца.
:nth-last-of-type(n): Стилизация каждого n-ного элемента определенного типа, начиная с конца.
:first-of-type: Стилизация первого элемента определенного типа.
:last-of-type: Стилизация последнего элемента определенного типа.
83
E.Preventdefault() и e.Stopprepagination(), для чего нужны
e.preventDefault(): Используется для предотвращения стандартного поведения браузера в ответ на событие(пример: отмена перехода по ссылке, перезагрузке при отправке формы)
e.stopPropagation():Для предотвращения дальнейшего всплытия или погружения события в DOM. Это означает, что событие не будет передаваться выше по иерархии элементов (всплытие) или вглубь иерархии элементов (погружение).
84
Что ты знаешь про специфичность селекторов
Специфичность селекторов в CSS определяет, как браузер решает конфликты между правилами стилей, когда несколько правил применяются к одному элементу. Каждый селектор имеет свою уровень специфичности, и сумма этих уровней определяет, какое правило будет применено.
В CSS специфичность обычно выражается в виде четырехразрядного числа, где каждая цифра представляет собой уровень специфичности для соответствующего компонента:
85
Как отцентровать блок по горизонтали и по вертикали
Метод Flexbox (гибкий контейнер):
css
Copy code
.container {
display: flex;
justify-content: center; /* Центрирование по горизонтали */
align-items: center; /* Центрирование по вертикали */
height: 100vh; /* Высота 100% вьюпорта (окна браузера) */
}
2. Метод Grid (решетчатый контейнер):
css
Copy code
.container {
display: grid;
place-items: center; /* Краткая запись для центрирования как по горизонтали, так и по вертикали */
height: 100vh; /* Высота 100% вьюпорта (окна браузера) */
}
86
Как работает settimeout
setTimeout в JavaScript используется для установки таймера, который вызывает функцию или выполняет указанный код один раз после указанной задержки.
аргументы:
function: Функция или строка кода, которую нужно выполнить по истечении времени.
delay: Задержка в миллисекундах до выполнения функции.
Важно отметить, что функция setTimeout добавляет задачу в конец очереди событий браузера. То есть, даже если установленная задержка составляет 0 миллисекунд, выполнение функции все равно будет отложено до следующего цикла событий.
87
Что такое прототипное наследование
Прототипное наследование — это механизм наследования в языке программирования JavaScript, основанный на использовании объектов "прототипов". В этой модели каждый объект имеет свойство prototype (прототип), которое ссылается на другой объект. Этот прототип может также иметь свой собственный прототип, и так далее, образуя цепочку прототипов.
Когда происходит обращение к свойству или методу объекта, JavaScript ищет это свойство сначала в самом объекте, а затем в его прототипе. Если свойство не найдено, поиск продолжается в прототипе прототипа и так далее, пока свойство не будет найдено или не достигнут конечный объект Object.prototype.
88
Как работает наследование в css
В CSS наследование применяется к свойствам стилей, которые передаются от родительских элементов дочерним элементам внутри DOM-дерева. Когда свойство стиля устанавливается для родительского элемента, оно может быть унаследовано дочерним элементам, если это свойство является наследуемым.
Примеры наследуемых свойств:
color: Цвет текста элемента.
font-family: Семейство шрифта.
font-size: Размер шрифта.
line-height: Высота строки.
text-align: Выравнивание текста.
89
Расскажи про async await
async/await - это синтаксический сахар в JavaScript, который упрощает асинхронное программирование и работу с Promise. Он предоставляет читаемый и более линейный код для работы с асинхронными операциями, делая его более схожим с синхронным кодом.
Ключевые слова:
async: Слово async используется перед функцией для обозначения того, что она возвращает Promise. Функция с async всегда возвращает Promise, даже если внутри нее нет явного возвращения Promise.
await: Слово await используется внутри функций, объявленных с async, для ожидания завершения Promise. Оно приостанавливает выполнение кода внутри функции до тех пор, пока Promise не будет разрешен или отклонен.
90
Какими способами можно скрыть элемент
display: none; - Этот стиль полностью убирает элемент из потока документа, делая его невидимым и не занимающим место на странице.
visibility: hidden; также скрывает элемент, но при этом элемент продолжает занимать место на странице, сохраняя свой размер и расположение.
opacity: 0; делает элемент полупрозрачным, что делает его невидимым. Однако элемент остается в потоке документа и занимает место.
position: absolute; или position: fixed; с перемещением за пределы видимой области
.hidden-element {
position: absolute; /* или position: fixed; */
left: -9999px; /* или любое большое отрицательное значение */
top: -9999px; /* или любое большое отрицательное значение */
}
Этот метод выносит элемент за пределы видимой области, делая его невидимым для пользователя.
91
Что такое http
HTTP (HyperText Transfer Protocol) - это протокол передачи данных, используемый для обмена информацией между клиентом и сервером в сети Интернет. Он является основой для обмена данными в вебе. HTTP предоставляет стандартизированный способ отправки и получения текстовых и мультимедийных данных.
92
http основные черты
Основные черты HTTP:
Протокол запрос-ответ: Взаимодействие между клиентом и сервером происходит в виде обмена запросами (requests) и ответами (responses). Клиент отправляет HTTP-запрос, а сервер отвечает HTTP-ответом.
Безсостояточность (stateless): Каждый запрос считается независимым от предыдущих запросов. Сервер не сохраняет состояние между запросами от одного клиента. Это облегчает масштабирование и управление ресурсами сервера.
Текстовый протокол: HTTP-запросы и ответы часто представляют собой текстовые строки в формате ASCII. Однако, с развитием веб-технологий, также используются бинарные форматы, такие как JSON, XML, и другие.
Клиент-серверная архитектура: HTTP работает на основе модели "клиент-сервер", где клиент отправляет запросы, а сервер предоставляет ответы.
Состоит из методов (methods): HTTP-методы определяют тип запроса, который клиент отправляет серверу. Некоторые из распространенных методов включают GET (получение данных), POST (отправка данных на сервер), PUT (обновление данных на сервере), DELETE (удаление данных на сервере) и т. д.
93
что такое cors
CORS (Cross-Origin Resource Sharing) - это механизм веб-безопасности, который позволяет или запрещает запросы к ресурсам на другом домене (origin) из веб-страницы. Стандарт CORS предназначен для предотвращения проблем с безопасностью, которые могут возникнуть при выполнении AJAX-запросов между разными источниками.
Когда веб-страница загружается из одного домена, а JavaScript пытается выполнить запрос к ресурсам на другом домене (например, запрос к API с другого сервера), браузер блокирует такие запросы из соображений безопасности. CORS предоставляет способы для серверов сообщать браузерам, что определенные источники (origin) безопасны для выполнения запросов, и что браузер может разрешить эти запросы.
94
Какие проблемы решает react
Обновление DOM эффективно:
- (изменение DOM затратно) Virtual DOM минимизируtn количество реальных манипуляций с DOM.
- (трудностям в поддержке, переиспользования и масштабировании кода, отсутствие стандарта) Компонентный подход. Изоляция и масштабирование
- (Следить за состоянием тяжело) Введение однонаправленного потока данных (однонаправленного связывания данных) и использование управляемых компонентов для упрощения управления состоянием.
- (Необходимость ручного обновления интерфейса при изменении данных.) Автоматический механизм обновления интерфейса
- (Неоднородные инструменты и отсутствие стандартов.) Активное сообщество и экосистема инструментов,
95
Что такое чистая функция
Чистая функция (Pure Function) - это функция, которая, при одинаковых входных данных, всегда возвращает одинаковый результат, и не имеет побочных эффектов, влияющих на состояние программы или окружающую среду. Такие функции особенно ценятся в функциональном программировании за их предсказуемость и легкость тестирования.
96
Какие основные характеристики чистой функции
Основные характеристики чистых функций:
Детерминированность: Для одних и тех же входных данных функция всегда должна возвращать один и тот же результат. Нет случайных элементов или неопределенных значений внутри функции.
Отсутствие побочных эффектов: Функция не должна влиять на состояние программы или изменять внешние переменные. Она не должна выполнять запись в файлы, модифицировать глобальные переменные, отправлять запросы к серверу и так далее.
97
Почему важно указывать ширину и высоту для картинок
1.Предотвращение мерцания (layout reflow): Если размеры изображения не указаны, браузеру приходится адаптировать макет страницы после загрузки изображения. Это может вызвать мерцание содержимого, когда браузер пересчитывает размеры элементов на странице. Указание размеров изображения позволяет браузеру зарезервировать нужное место для изображения заранее, предотвращая мерцание и улучшая визуальный опыт пользователя.
2.Оптимизация производительности: Указание размеров изображений позволяет браузеру правильно распределять место под изображение, что может ускорить отрисовку страницы. Это особенно важно при работе с большим количеством изображений на веб-странице.
3.Подгонка изображений в макете: Задавая размеры изображений, вы можете точно контролировать их отображение в макете страницы. Это важно для обеспечения правильного расположения и визуального взаимодействия с другими элементами на странице.
98
Для чего нужен promiseall
Promise.all - это метод в JavaScript, который используется для выполнения нескольких промисов параллельно и ожидания, пока все они завершатся. Этот метод принимает массив промисов и возвращает новый промис, который разрешится, когда все переданные промисы завершат свое выполнение, или отклонится, если хотя бы один из промисов отклонится.
99
Как сравнить объекты в js
1. Преобразовать объекты в строки с помощью JSON.stringify и затем сравнить строки.
2. Сравнить каждый ключ и значение в объектах вручную. Получить списки ключей через Object.keys и сравнивать между собой (obj1[key] === obj2[key])
3. Сторонние библиотеки, такие как lodash с его методом isEqual, который учитывает вложенные объекты.
100
Как можно оптимизировать перерисовки(10)
1. Использование виртуального DOM:
Фреймворки, такие как React, Vue и Angular, используют виртуальный DOM для минимизации фактических манипуляций с реальным DOM. Виртуальный DOM предоставляет эффективный механизм сравнения изменений и обновления только необходимых частей интерфейса.
2 .Анимации с помощью CSS:
Используйте CSS для анимаций вместо JavaScript, где это возможно. Анимации средствами CSS GPU ускоряются и могут работать вне потока событий JavaScript.
3.Использование shouldComponentUpdate (React):
В React вы можете оптимизировать перерисовки компонентов, реализовав метод shouldComponentUpdate. Этот метод позволяет предотвратить лишние перерисовки, если компонент не изменил свои данные.
4. Мемоизация и использование мемоизированных селекторов (Redux, Reselect)
В Redux и других подобных библиотеках можно использовать мемоизацию и мемоизированные селекторы для избежания лишних вычислений и обновлений в случае, если данные не изменились.
5. Ленивая загрузка (Lazy Loading):
Загружайте компоненты, ресурсы и изображения только тогда, когда они действительно нужны, чтобы уменьшить объем данных, передаваемых по сети, и ускорить инициализацию страницы.
6. Оптимизация изображений:
Используйте сжатые и форматированные изображения. Иногда, использование изображений с меньшим разрешением (для различных устройств) также может быть полезным.
7. Использование CSS-трансформаций вместо позиционирования:
При анимациях предпочтительнее использовать CSS-трансформации, так как они могут быть более эффективными, чем изменения свойств позиционирования.
8. Веб-шрифты с оптимальной загрузкой:
Загружайте только необходимые шрифты и используйте форматы, поддерживаемые браузерами.
9. Использование Web Workers:
Выносите тяжелые вычисления и задачи в фоновые потоки с использованием Web Workers, чтобы не блокировать основной поток выполнения.
10. Оптимизация CSS и JS кода:
Удаляйте неиспользуемый CSS и JS код. Минифицируйте и объединяйте файлы для уменьшения размеров файлов и ускорения загрузки.
101
В чем разница uselayuouteffect и useeffect
useEffect вызывается после завершения текущей операции рендеринга и отрисовки на экране, то есть после того, как браузер выполнил перерасчеты макета (layout) и покрасил элементы на странице.
useLayoutEffect срабатывает сразу после завершения операции рендеринга, но перед тем, как браузер выполнит перерасчеты макета (layout) и покрасит элементы на странице.
102
Когда лучше использовать useEffect илил useLoyautEffect
seEffect: Обычно предпочтительно использовать useEffect в большинстве случаев, особенно если ваши действия не влияют на макет страницы и могут быть выполнены асинхронно после рендеринга.
useLayoutEffect: Если ваши действия зависят от текущего макета страницы и требуют синхронного выполнения до перерасчетов макета, то useLayoutEffect может быть более подходящим выбором. Однако, следует использовать его с осторожностью, так как синхронные операции могут замедлить обновление интерфейса пользователя.
103
С помощью чего скопировал бы объект
1.Поверхностное копирование:
a. Спред-оператор ({...}):
b. Метод Object.assign():
2.Глубокое копирование:
a. JSON.parse(JSON.stringify(originalObject))
b. Библиотеки для глубокого копирования(lodash - cloneDeep)
c.(от себя). Написать функцию самому
104
Что такое falsy значения
В JavaScript, значения, которые приводятся к логическому "false" в контексте условных выражений, называются "falsy" (ложными) значениями. Когда вы используете условие в операторе if, while, или в другом контексте, JavaScript автоматически приводит значение к логическому типу (true или false). Значения, которые приводятся к "false", считаются "falsy".
105
Перечисли все falsy значения(8)
false: Логическое значение false.
null: Представляет отсутствие значения.
undefined: Обозначает неинициализированное значение.
0: Числовой литерал 0.
NaN: Представляет "Not-a-Number" и является результатом некорректных математических операций.
'' или "": Пустая строка.
document.all: Старое свойство, которое также приводится к "false".
0n: Логический false для BigInt.
106
Что такое ssr
SSR расшифровывается как Server-Side Rendering (Рендеринг на стороне сервера). Это подход в веб-разработке, при котором HTML-страница формируется на сервере и отправляется клиенту как готовый HTML-код. После этого браузер клиента начинает загружать и выполнять JavaScript, связанный с этой страницей.
107
Какие преимущества у SSR
Улучшенная производительность по SEO: Поисковые системы обычно лучше индексируют контент, полученный при SSR, по сравнению с SPA (Single-Page Application), где контент формируется динамически с использованием JavaScript.
Лучшая начальная загрузка: Пользователи видят начальный контент быстрее, так как он поступает от сервера.
Улучшенный опыт пользователей с медленным интернет-соединением: Пользователи с медленным интернет-соединением могут увидеть контент быстрее, чем если бы они ждали загрузки всего JavaScript.
Однако SSR также может повлечь за собой больше нагрузки на сервер и создание сложных архитектур для управления состоянием и поведением на клиентской и серверной сторонах.
108
Как проверить, что поле является массивом
Оператор Array.isArray()
Проверка через конструктор Array (if (myArray.constructor === Array))
Проверка с использованием instanceof (if (myArray instanceof Array))
109
Что такое usecontext
useContext - это хук в библиотеке React, который позволяет функциональным компонентам получать значение из контекста. Контекст в React предоставляет способ передачи данных глубоко вниз по дереву компонентов без явной передачи пропсов через каждый промежуточный компонент.
110
Зачем нужен redux
Redux - это библиотека для управления состоянием в приложениях на языке JavaScript, особенно в приложениях, построенных с использованием библиотеки React. Основной принцип Redux заключается в том, чтобы хранить все состояние приложения в одном централизованном хранилище, что облегчает управление и обновление состояния приложения.
111
преимущества redux
Централизованное управление состоянием: Redux предлагает единственное место для хранения всего состояния вашего приложения. Это делает управление данными более прозрачным и предсказуемым.
Предсказуемость и единообразие: Состояние в Redux неизменяемо. Все изменения состояния осуществляются путем создания новых объектов. Это обеспечивает предсказуемость изменений и упрощает отслеживание действий, влияющих на состояние.
Легкость отслеживания изменений: Redux предоставляет мощный механизм подписки, который позволяет отслеживать изменения состояния. Это упрощает реагирование на изменения данных в приложении.
Управление асинхронностью: Redux позволяет управлять сложной логикой и асинхронными операциями с использованием middleware, такого как Redux Thunk или Redux Saga. Это особенно полезно при работе с сетевыми запросами и обработкой асинхронных событий.
Легкость тестирования: Одним из преимуществ Redux является легкость тестирования. Действия и редукторы могут быть протестированы независимо, что облегчает создание юнит-тестов для вашего кода.
Подходит для крупных приложений: Redux предоставляет масштабируемую архитектуру для управления состоянием, что делает его подходящим для крупных и сложных приложений.
Широкое сообщество и экосистема: Redux имеет большое сообщество и обширную экосистему плагинов, middleware и инструментов разработки, что упрощает использование и расширение функциональности.
112
Жизненный цикл компонента React
Жизненный цикл компонента React - это набор методов, которые вызываются в различные моменты времени при создании, обновлении и уничтожении компонента. Эти методы предоставляют возможность выполнять определенные действия на разных этапах жизненного цикла компонента
113
Основные методы жизненного цикла компонента React:
constructor():
Вызывается при создании экземпляра компонента.
Используется для инициализации состояния и привязки методов.
render():
Отвечает за возвращение элементов, которые будут отрисованы.
Обязательный метод.
componentDidMount():
Вызывается после вставки компонента в DOM.
Используется для выполнения запросов к серверу, подписок на события и др.
shouldComponentUpdate():
Определяет, следует ли компоненту обновиться.
Возвращает true или false.
componentDidUpdate():
Вызывается после обновления компонента.
Используется для выполнения действий после обновления.
componentWillUnmount():
Вызывается перед удалением компонента из DOM.
Используется для очистки ресурсов.
static getDerivedStateFromProps():
Вызывается перед каждым рендером при получении новых свойств.
Используется для обновления состояния на основе новых свойств.
getSnapshotBeforeUpdate():
Вызывается перед фактическим изменением DOM.
Используется для получения информации о DOM до изменений.
static getDerivedStateFromError():
Вызывается, если во время рендеринга произошла ошибка.
Используется для обновления состояния компонента.
componentDidCatch():
Вызывается после того, как произошла ошибка в компоненте.
Используется для обработки ошибок, записи в логи и др.
Эти методы предоставляют возможность выполнения различных действий на различных этапах жизненного цикла компонента в React.
114
Что такое схлопывание границ
Схлопывание границ (Collapsing Margins) - это феномен в CSS, когда верхний и нижний внешние отступы (margins) двух соседних блочных элементов объединяются в один отступ. Этот процесс применяется только к вертикальным внешним отступам.
115
Из-за чего происходит схлопывание границ
Вертикальное схлопывание границ у блочных элементов:
Когда верхний отступ одного блочного элемента идет после нижнего отступа предыдущего блока.
Высота схлопнутого отступа будет равна наибольшему из двух отступов.
css
Copy code
/* Пример вертикального схлопывания границ */
.block1 {
margin-bottom: 20px;
}
.block2 {
margin-top: 30px;
}
В этом примере высота схлопнутого отступа между block1 и block2 будет 30px (максимум из 20px и 30px).
Границы блока и его потомка:
Если блок содержит потомка с верхним отступом, схлопывание границ также может произойти.
css
Copy code
/* Пример схлопывания границ между блоком и его потомком */
.parent {
margin-bottom: 20px;
}
.child {
margin-top: 30px;
}
В этом примере высота схлопнутого отступа будет также 30px.
116
Как избежать схлопывания границ.Какими свойствами(2)
display: inline-block
display: flex;
flex-direction: column;
117
Что такое самовызывающаяся функция
Самовызывающаяся функция (Immediately Invoked Function Expression, IIFE) - это функция в JavaScript, которая вызывается немедленно после своего определения. Она обычно создается и вызывается в одном выражении, и ее целью часто является создание локальной области видимости для изоляции переменных от глобальной области видимости.
(function() {
// код самовызывающейся функции
})();
118
Что такое интерполяция
Интерполяция - это процесс вставки значений переменных или выражений внутри строки или текста. В контексте программирования и шаблонизации, интерполяция обеспечивает динамическое создание строк, где значения переменных подставляются в определенные места в тексте. Это позволяет создавать строки, зависящие от переменных или выражений во время выполнения программы.
119
Что такое миксины
В контексте препроцессоров CSS, таких как Sass или Less, миксины представляют собой специальные блоки кода, которые могут быть определены один раз и затем многократно использованы в различных частях стилевого файла. Миксины позволяют создавать набор стилевых правил, который можно вставлять в другие селекторы или даже в другие миксины.
Пример миксина на Sass:
scss
Copy code
// Определение миксина
@mixin border-radius($radius) {
border-radius: $radius;
}
// Использование миксина в селекторе
.button {
@include border-radius(5px);
}
.card {
@include border-radius(10px);
}
В этом примере border-radius - это миксин, который принимает аргумент $radius и добавляет стилевое правило border-radius с указанным радиусом. Затем миксин используется в двух разных селекторах .button и .card с различными значениями для border-radius.
120
Flexbox свойство отвечающее за перенос элементов на новую строку
flex-wrap
nowrap (по умолчанию): Флекс-элементы умещаются в одной строке. Если не хватает места, они могут быть обрезаны или уменьшены.
css
Copy code
.flex-container {
display: flex;
flex-wrap: nowrap;
}
wrap: Флекс-элементы переносятся на новую строку, если не хватает места.
css
Copy code
.flex-container {
display: flex;
flex-wrap: wrap;
}
wrap-reverse: То же, что и wrap, но строки переносятся в обратном порядке.
css
Copy code
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Пример с использованием flex-wrap:
css
Copy code
.flex-container {
display: flex;
flex-wrap: wrap; /* флекс-элементы переносятся на новую строку */
}
.flex-item {
flex: 1;
min-width: 200px;
margin: 10px;
}
В этом примере, если ширина .flex-container становится слишком узкой, флекс-элементы будут переноситься на новую строку.
121
Как увеличить в размере при наведении элемент, не сдвигая соседние
Чтобы увеличить размер элемента при наведении без сдвига соседних элементов, можно использовать CSS и псевдокласс :hover. Вот пример:
css
Copy code
.enlarge-on-hover {
transition: transform 0.3s ease-in-out;
}
.enlarge-on-hover:hover {
transform: scale(1.1); /* Увеличение в 1.1 раза */
}
В этом примере:
transition применяет анимацию к свойству transform, делая изменения более плавными с продолжительностью 0.3 секунды и функцией ускорения-замедления (ease-in-out).
Свойство transform: scale(1.1) при наведении увеличивает элемент в 1.1 раза. Это создает визуальный эффект увеличения без сдвига соседних элементов.
.enlarge-on-hover {
transition: transform 0.3s ease-in-out;
}
.enlarge-on-hover:hover {
transform: scale(1.1); /* Увеличение в 1.1 раза */
}
122
Что делает box-sizing: border-box
Свойство box-sizing: border-box в CSS определяет, что размер элемента включает в себя ширину и высоту содержимого, а также отступы (padding) и границу (border), но не внешние отступы (margin).
Таким образом, если вы добавляете паддинг, размер элемента останется постоянным, и паддинг будет "внутри" элемента, не увеличивая его общие размеры.
свойство box-sizing наследуется от родительского элемента, что означает, что вы можете установить его на более общий элемент, такой как , и это будет влиять на все дочерние элементы. Это может быть удобным, если вы хотите применить одинаковую модель размеров для всего документа.
123
Что такое селектор в html
В веб-разработке селектор - это паттерн, который используется для выбора и стилизации HTML-элементов на веб-странице. Селекторы в CSS указывают, на какие элементы должны применяться стили.(теги, классы,ид)
124
Что такое адаптивная верстка
Адаптивная верстка (или responsive web design) — это подход к созданию веб-страниц таким образом, чтобы они эффективно адаптировались к различным размерам экранов и устройствам, начиная от маленьких мобильных телефонов и планшетов до больших настольных мониторов.
125
Что такое solid
Принципы SOLID — это набор пяти основных принципов объектно-ориентированного программирования и проектирования, предложенных Робертом Мартином (Robert C. Martin). Эти принципы помогают создавать более гибкий, понятный и поддерживаемый код. Акроним SOLID состоит из первых букв каждого из этих принципов:
Принцип единственной ответственности (Single Responsibility Principle - SRP):
Каждый класс должен иметь только одну причину для изменения. То есть, класс должен быть ответственным только за одну важную часть функциональности программы.
Принцип открытости/закрытости (Open/Closed Principle - OCP):
Программные сущности (классы, модули, функции и т. д.) должны быть открыты для расширения, но закрыты для модификации. Это означает, что поведение сущности может быть расширено без изменения её исходного кода.
Принцип подстановки Барбары Лисков (Liskov Substitution Principle - LSP):
Объекты базового класса должны быть заменяемыми объектами производного класса без изменения корректности программы. Если S - это подтип T, то объекты типа T могут быть заменены объектами типа S без изменения корректности программы.
Принцип разделения интерфейса (Interface Segregation Principle - ISP):
Клиенты не должны зависеть от интерфейсов, которые они не используют. Это означает, что не следует насильно навязывать клиентам интерфейсы с методами, которые им не нужны.
Принцип инверсии зависимостей (Dependency Inversion Principle - DIP):
Высокоуровневые модули не должны зависеть от низкоуровневых модулей. Оба должны зависеть от абстракций. Более того, абстракции не должны зависеть от деталей. Детали должны зависеть от абстракций.
126
Для чего служат vh, vw при указании размеров
vh (viewport height) и vw (viewport width) — это относительные единицы измерения, которые используются в CSS для задания размеров элементов относительно размеров видимой области (viewport) браузера.
vh: Определяет высоту элемента в процентах от высоты видимой области браузера. Например, если установить height: 50vh;, это будет означать, что высота элемента составит половину высоты видимой области.
vw: Определяет ширину элемента в процентах от ширины видимой области браузера. Например, если установить width: 25vw;, это будет означать, что ширина элемента составит четверть ширины видимой области.
Эти единицы измерения часто используются в адаптивном дизайне для создания элементов, размеры которых зависят от размеров экрана устройства.
Кроме того, существуют и другие относительные единицы измерения, такие как:
em: Определяет размеры относительно размера шрифта родительского элемента.
rem: Аналогичен em, но размеры определяются относительно размера шрифта корневого элемента (html).
%: Определяет размеры относительно размеров родительского элемента.
Комбинирование различных относительных единиц измерения позволяет более гибко настраивать размеры элементов в зависимости от различных условий и требований дизайна.
127
Перечисли основные методы life cycle(5)
1.constructor(props): конструктор, в котором происходит начальная инициализация компонента
2.render(): рендеринг компонента
3.componentDidMount(): вызывается после рендеринга компонента. Здесь можно выполнять запросы к удаленным ресурсам
4.componentWillUnmount(): вызывается перед удалением компонента из DOM
5.componentDidUpdate(prevProps, prevState, snapshot): вызывается сразу после обновления компонента (если shouldComponentUpdate возвращает true). В качестве параметров передаются старые значения объектов props и state. Третий параметр - значение, которое возвращает метод getSnapshotBeforeUpdate
128
Что такое ооп
ООП (Объектно-Ориентированное Программирование) — это парадигма программирования, основанная на концепциях объектов, которые представляют собой экземпляры классов, и взаимодействуют друг с другом для выполнения задач программы.
ООП способствует более четкому и модульному проектированию программ, облегчает повторное использование кода, упрощает поддержку и обеспечивает лучшую организацию программных систем. JavaScript (в контексте создания объектов через прототипы), поддерживают ООП и предоставляют средства для его реализации.
129
Инкапсуляция (Encapsulation):
Объединение данных и методов, которые работают с этими данными, внутри одного объекта. Это позволяет скрыть внутренние детали реализации и предоставить интерфейс для взаимодействия с внешним миром.
130
Наследование (Inheritance):
Наследование (Inheritance): Механизм создания новых классов на основе существующих. Класс-наследник (подкласс) получает свойства и методы класса-родителя (суперкласса), что позволяет повторно использовать код и создавать иерархии классов.
131
Полиморфизм (Polymorphism)
Полиморфизм (Polymorphism): Возможность использования одного и того же интерфейса для различных типов данных или объектов. Это может быть реализовано через перегрузку методов, интерфейсы, абстрактные классы и другие механизмы.
132
Абстракция в ООП
Абстракция (Abstraction): Способность абстрагировать (упрощать) сложные системы, выделяя основные характеристики и игнорируя детали. В ООП абстракция часто реализуется с использованием абстрактных классов и интерфейсов.
133
Расскажи про event loop
Event Loop (цикл событий) - это ключевой компонент в асинхронном программировании и веб-разработке. Он позволяет управлять порядком выполнения задач в однопоточных средах, таких как браузер или Node.js.
- отдельный механизм, который позволяет использовать неблокирующую модель ввода и вывода. Не является частью движков(таких как v8), Цикл событий предоставляется средой(например браузер).
**Web api** - связывает стэк с задачами. Задачи регистрируются в нем.
Пример вызова функции `settimeout(() ⇒ console.log(’timeout’),3000)`. Сначала попадет в webapi и внутри него начинается отчет трёх секунд, после этого попадет в очередь задач, а уже после в стек вызовов.
134
Порядок выполнения задач в Event loop
1. Выполняются все синхронные задачи (сразу попадают в стек вызовов)
2. Выполняются все микротаски
3. Выполняется 1 (одна) макротаска - если внутри себя она содержит микротаски, то сначала выполняется все внутри этой макротаски
4. Выполняются следующая макротаска (всегда по одной) и т.д.
135
Что такое Callback Queue (Очередь обратных вызовов) в Event Loop:
Callback Queue (Очередь обратных вызовов): Здесь хранятся функции обратного вызова (callback), которые должны быть выполнены после завершения текущего цикла событий.
Event Loop: Постоянно мониторит стек вызовов и очередь обратных вызовов. Если стек вызовов пуст, а в очереди есть функции, то они перемещаются в стек и выполняются.
136
Что такое макро таски
**Macro tasks** или очередь событий. Создают - таймеры(settimeout) и события(addEventListener) - выполняется всегда по 1 штуке, если внутри себя содержит микротаски сначала выполняет их.
137
Что такое микро таски
**Micro tasks** или очередь задач - Создают в большей части(98+%) промисы(promise) и queveMicrotaks (прямое создание через функцию). Новые задачи добавляются когда списко пустой. Выполняются все за раз.
138
Что такое Call Stack (Стек вызовов)
Call Stack (Стек вызовов): Здесь сохраняются функции, которые должны быть выполнены. Когда функция вызывается, она помещается в стек. Когда функция завершает выполнение, она удаляется из стека.
**Call Stack** или стэк вызовов - Обрабатывает синхронные операции. Работатет по принципу LIFO(стопка бумаг). Может переполниться.
139
Основные концепции event loop(2)
1. Однопоточность: JavaScript выполняется в одном потоке, что означает, что он может обрабатывать только одну задачу в определенный момент времени.
2. Событийная модель: JavaScript основывается на событийной модели, где определенные действия или события приводят к выполнению соответствующих обработчиков.
140
Что такое замыкание
Замыкание (closure) - это особенность в языках программирования, позволяющая функции сохранять доступ к переменным из внешней области видимости, даже после того, как она завершила выполнение.
141
Для чего используют замыкания(2)
1. Инкапсуляция: Создавать приватные переменные и методы, скрывая их от внешнего доступа.
2. Функции обратного вызова: (Callback Functions): Замыкания часто используются для передачи функций в качестве параметров.
142
Основные концепции замыканий
Основные концепции замыканий:
Область видимости (Scope):
В JavaScript переменные могут иметь глобальную, локальную (внутри функции) или блочную (внутри блока кода) область видимости.
Внутренние и внешние переменные:
Внутренние переменные: Те, которые определены внутри функции.
Внешние переменные: Те, которые определены в более высокой (родительской) области видимости.
143
Что такое Shadow DOM
Дополнительный механизм инкапсуляции стилей.
Реализуется через html тег 'template' с аттрибутом 'shadowroot="open"'
ВНУТРИ тега подключаются стили .css или инлайн
Пример:
{тут контент}
144
Что такое grid
— это мощный механизм разметки, предоставляемый CSS для создания двумерных сеток (строк и колонок) на веб-странице. Он предоставляет разработчикам более гибкий и удобный способ организации элементов на странице, чем традиционные методы разметки, такие как Flexbox или float
145
Что такое flex
это модель макета в CSS, предназначенная для создания гибких и эффективных по пространству макетов внутри контейнера. Она позволяет управлять распределением пространства между элементами внутри контейнера и выравниванием элементов по оси.
146
Разница между flex и grid(3)
1. Flexbox ориентирован на размещение элементов в строку или колонку, Grid и там и там.
2.Flex предоставляет управление распределением пространства между элементами внутри flex-контейнера вдоль ОДНОЙ оси (строки или колонны), Grid предоставляет более сложные и гибкие возможности(позволяет создавать сложные сетки и выравнивать элементы в обеих направлениях.)
3.Flexbox хорошо подходит для создания гибких и адаптивных макетов.Grid особенно полезен для создания сеток, где каждый элемент может занимать разное количество ячеек в сетке.
147
что такое data атрибуты
Специальные HTML атрибуты, которые позволяют разработчикам добавлять произвольные данные к элементам, не вмешиваясь в стандартные атрибуты. Начинаются с префикса "data-" и могут содержать любые пользовательские данные в виде строк.
148
Для чего используются data атрибуты
1.Передача данных(для хранения и получения значений)
2. Конфигурация и параметры(data-theme="dark")
3.CSS и стилизация(data-status="active")
149
как добавить css свойство к data атрибуту
Content
div[data-theme="dark"] {
background-color: black;
color: white;
}
150
как я могу получить значение из data атрибута
1. Найти данный елемент(getElementBy__/querrySelector)
2.Использовать dataset(value = myElement.dataset.)
151
Значения свойства display(6) и их краткое описание
1.block - занимает всю доступную ширину контейнера
2.inline - строчный элемент, занимает только необходимую ширину
3.inline-block - отображается как строчный, но при этом обладает свойствами блочного элемента. Он не начинает новую строку, но при этом может иметь ширину и высоту
4.none - не отображается на странице. Не занимает места в макете
5.flex - ображается как блочный.элементы распределяются по главной оси и переносятся в соответствии с параметрами flex-контейнера
6.grid - тображается как блочный. rid контейнера элементы распределяются по сетке, определенной с использованием свойства grid-template
152
Что делает браузер когда он получил html от сервера(10)
1.Парсинг HTML: Браузер разбирает HTML-код на теги и создает начальное DOM-дерево.
2.Построение DOM-дерева(cтруктура HTML документа).
3.Получение и парсинг внешних ресурсов(стили CSS, скрипты JavaScript, изображения и др).
4.Построение CSSOM.
5.Объединение DOM и CSSOM(создает Render Tree)
6.Выполнение JavaScript(JavaScript может изменять DOM, добавлять новые элементы, устанавливать обработчики событий и т.д.).
7.Расчет расположения элементов (Layout): Браузер вычисляет размеры и позиции каждого элемента в Render Tree, учитывая как стили CSS, так и изменения, внесенные JavaScript.
8.Отрисовка (Paint): Браузер рендерит каждый элемент Render Tree в пиксели на экране, учитывая их расположение и стили.
9.Финальное отображение на экране.
10.Оптимизация и перерисовка при необходимости.
153
