asd

Question 1

HTML это

Answer 1

HTML – язык гипертекстовой разметки, чтобы размещать на странице элементы вроде текста, картинок, видео, аудио и тд.

Question 2

Виды списков

Answer 2

маркированный (ul>li), нумерованный (ol>li), определений(dl>dt)

Question 3

Атрибуты для чего

Answer 3

Атрибуты – дополняют функциональность либо меняют поведение элемента по умолчанию.

Answer 4

Блочная модель документа - правила по которым браузер определяет размер элемента на странице. Высота, ширина, отступы и тд

Question 5

Семантика

Answer 5

Семантика – чтобы сайт определялся в поисковых системах. Использование правильных тегов для всех элементов для страницы. Важна для скринридеров. Если например тег b просто выделит текст, то strong даст понять скринридеру что нужно читать с другой интонацией

Question 6

Валидность

Answer 6

Валидность – грамотное расположение тегов друг в друге. Наличие необходимых атрибутов.

Question 7

Доступность

Answer 7

Доступность – возможность работать с сайтом людям инвалидам с доп. инструментами.

Question 8

SEO

Answer 8

SEO – использование правильных мета тегов для поиска страниц

Question 9

DOM

Answer 9

DOM - объектная модель документа, это представление html-документа в виде дерева тегов. Позволяет манипулировать его элементами через js

Question 10

Где можно хранить данные в браузере

Answer 10

В localStorage – после закрытия сохраняется
В сессиях – после закрытия не сохраняются
У куки – есть время жизни которое мы выставляем + с каждым запросом на сервер они отправляются и сервер может их перезаписовать.

Question 11

Как работает браузер во время ввода url

Answer 11

Когда мы вводим какой-то url, нажимаем Enter у нас отправляется на сервер get запрос и на этот get запрос
1. Получаем html страницу,
2. Рендерится dom дерево,
3. Стили применяются,
4. Js слушатели подключаются и мы можем взаимодействовать с страницей

Question 12

Атрибуты загрузки скриптов

Answer 12

Атрибуты загрузки скриптов – src, async, deffer. Они предназначены для подгрузки скриптов, различаются строгостью подгрузки (порядком)

Question 13

Corse

Answer 13

Corse – браузерная штука которая позволяет запретить или разрешить доступ для разных источников. Когда запрашиваем ресурсы с одного источника у на html и запросы происходят в рамках одного источника url’a и браузер считает это безопасным, но когда мы пытаемся запросить из другого источника это считается с точки зрения браузера небезопасным, и через corse мы можем настраивать с каких источников мы разрешаем доступ, для другиг блокируем. Для кук, для хедеров, для методов какие то можем разрешить а какие то запретить. Делается это с помощью заполнение этих хедеров.

Question 14

Как работают токены JWT

Answer 14

Отправляем логин и пароль на бэкенд, бэкенд генерит токены(refresh I access) отправляет ответом куками. И с каждым запросом мы подставляем этот токен в хедеры и бэкенд нас распознает.

Question 15

Что содержит http запрос

Answer 15

1. Метод запроса
2. Путь запроса (url)
3. Версию http протокола и header
4. И опционально body

Question 16

Версии http протокола

Answer 16

1. Текстовая
2. Двоичный формат (благодаря ему обрабатываются запросы быстрее)

Question 17

Какие существуют коды респонс ответа

Answer 17

1. 100 – информационный
2. 200 – успешный
3. 300 – редирект (реализован с помощью хедеров)
4. 400 – клиентская ошибка
5. 500 – серверная ошибка

Question 18

CSS

Answer 18

CSS — формальный язык описания внешнего вида документа (веб-страницы),

Question 19

Разница между div и span

Answer 19

Разница заключается в том, что тег div является блочным элементом, а тег span – строковым. Блочный элемент – элемент, который является блоком. Каждый блок без использования дополнительных стилей будет отображаться с новой строки, так как в ширину они по умолчанию занимают 100% ширины экрана.

Question 20

Css правило

Answer 20

селектор>свойство>значение

Question 21

Crossbrowsing

Answer 21

Crossbrowsing – одинаковая работа и отображение элементов для всех браузеров.

Question 22

Псевдо элементы, псевдо классы

Answer 22

:before :after – псевдо элементы для создание контента
:hover :active – псевдо классы

Question 23

БЭМ

Answer 23

БЭМ (Блок, Элемент, Модификатор) — это методология разработки, для удобного, структурированного и повторно используемого CSS-кода.
Блок: Независимый компонент интерфейса
Пример: menu, button, header.
Элемент: Часть блока, которая не может существовать отдельно от него.
Пример: menu__item, button__icon.
Модификатор: Определяет внешний вид, состояние или поведение блока или элемента.
Пример: button–disabled, menu__item–active.

Question 24

Специфичность селекторов

Answer 24

Специфичность селекторов – браузер определяет какой стиль будет применен к элементу. каждый селектор обладает своей специфичностью. Даже есть таблица, по тегу специфичность будет 1, по классу условно – 10, по id – 100. Inline стили – 1000, а important 10000. Чем выше эта специфичность тем приоритетней стиль и он может перезатереть предыдущий

Question 25

Responsive, Adaptive дизайн

Answer 25

Responsive дизайн – по мере того как изменяем ширину нашего браузера верстка будет подстраиваться под размер нашего браузера
Adaptive дизайн – заранее верстка выполнена так что у него есть допустим 3 состояния под который сайт будет подстраиваться в зависимости от устройства

Question 26

CSS position

Answer 26

static (по умолчанию) – остается в потоке документа и его нельзя смещать
relative – остается в потоке документа и можно смещать top, right, left, bottom
absolute – удаляется из нормального потока и позиционируется относительно ближайшего позиционированного предка (relative, absolute, fixed или sticky). Если таких предков нет, то относительно <html>.
fixed - Элемент удаляется из потока и позиционируется относительно окна просмотра вне зависимости от прокрутки страницы.
sticky - Элемент ведёт себя как relative, пока находится в видимой области контейнера, но становится fixed, как только достигает заданного положения (используя top, right, bottom, left).

Question 27

Чистая функция

Answer 27

Чистая функция – функция которая выполняет вычисление на основе своих аргументов, возвращает какое-то значение и не имеет пообочных эффектов. Побочные эффекты это манипуляции с дом деревом, запросы на сервер, мутации каких-то входящих аргументов, консоль лог тоже например является побочным эффектом

Question 28

Иммутабельность

Answer 28

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

Question 29

Javascript

Answer 29

Язык программирования, который добавляет интерактивность на веб сайт

Question 30

Область видимости и его виды

Answer 30

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

Question 31

Что такое синхронный асинхронный код

Answer 31

Синхронный код – выполняется сразу и сразу возвращает значение.
Асинхронный код может выполнится сразу но возвращает значение через время.
Фетч делает запрос, и если он ответил моментально то он не вернет сразу же значение, результатом будет промис, из них нельзя асинхронно получить значение

Question 32

Event loop

Answer 32

Event loop – браузерный механизм, бесконечный цикл в котором выполняются все обработчики событий, браузер распределяет эти обработчики по очередям. Выделяет очередь микрозадач, макрозадач.

Микрозадачам относятся промисы, queveMictotask, mutationObserver.
К макрозадачам Таймеры(setInterval, setTimeout) , События(клик, загрузка, изображения), Браузерные нюансы(рендер).

Порядок выполнения кода такой что сначала выполняется весь синхронный код, после этого сначала все микрозадачи потом макрозадача берется. Опять выполняется проверка на синхронного кода потом микрозадачи и так по кругу.

Синхронный код попадает в callstack и выбирается из callstack’a.
Асинхронный код попадает в webApi потом попадает в callbackque потом попадает в callstack после того как он очистится. Все это нужно для того чтобы приоритизировать задачи. Т.к. js у нас однопоточный когда мы делаем запрос на сервер чтобы у нас не блокировался интерфейс, event loop как раз для этого был изобретен

Question 33

Все типы данных

Answer 33

8 типов данных – number, string, biginit, symbol, Boolean, null, undefined, obj.
Number, string, Boolean, symbol, bigInt– примитивные
Остальное сложные

Question 34

prototype, __proto__, прототипная цепочка

Answer 34

Prototype – есть у каждого объекта, объект который выступает шаблоном от которых другие объекты наследуют свои свойства и методы. Есть только у функций конструкторов (классов, function declaration | expression) у остальных типов данных его нету

proto - сеттер геттер ссылается на прототип функции конструктора благодаря которому он был создан

Прототипная цепочка – есть какой-то класс, который наследует от другого класса методы и свойства которые лежат у него в прототипе, на конце этой цепочки лежит null, и если мы обращаемся к свойству какого-то объекта то оно будет искаться в этой цепочке прототипов. Сначала начнет поиск в текущем объекте и до конца цепочки пока не дойдет до null

Question 35

Событийная модель, всплытие

Answer 35

Событийная модель – dom event, есть фаза погружения, целевая фаза и фаза всплытия.
Сначала событие идет сверхну вниз, достигает цели, и начинает всплывать. Фаза погружения вообще по дефолту отключена, чтобы ее включить нужно в addEventListener объект с значением capture: true.
Остановить всплытие – event.stopPropagation
Отменить дефолнтое поведение – event.preventDefault - сначала происходит погружение

Question 36

Object

Answer 36

Объекты они же ассоциативные массивы реализованы не так как в других языках. Объект это набор свойств и каждое состоит из имени и значение ассоциированное с этим именем. Объект это самостоятельная единица имеющая свойство и определенный тип. Сравним например с чашкой. У чашки есть цвет, форма, вес и тд. Также и объекты имеют свойства

Question 37

Async, await это

Answer 37

Async, await – синтаксис благодаря которому мы можем делать функции асинхронными. Async перед функцией Await перед асинхронными операциями и код станет синхронным и будет выполняться в последовательном режиме

Question 38

Promise это

Answer 38

Promise – объект который предназначен для работы с асинхронным кодом хранит в себе какое-то состояние (resolve, rejected, pending)

Question 39

Promise.all, Promise.allSetteled, Promise.raise, Promise.any

Answer 39

Promise.all, Promise.allSetteled, Promise.raise, Promise.any,
Promise.all – позволяет выполнять промисы параллельно, принимает массив промисов и возвращает промис который ожидает выполнения всех этих промисов и потом возвращает массив с результатами обернутый в промис. Если один из промисов хотя бы упадет то он вернет ошибку, а promise.allSettled нет. А promise.allSettled вернет массив с объектами со статусами fulfilled либо rejected и причину ошибку reason.
Promise.raise – принимает массив промисов и возвращает промис возвращает промис самого быстрого из переданных и неважно с ошибкой или нет, а any ожидает первый успешно выполнившийся промис а остальные игнорирует

Question 40

call, apply, bind

Answer 40

Call, aply, bind – позволяют задавать выполнение функции в определенном контексте который мы присваиваем в эту функцию.
Bind – просто присваивает контекст этой функции
Call, Aplly – сразу вызывают
Call – параметры через запятую
Aplly - массив

Question 41

var, const, let

Answer 41

var – функционально или глобально область видимости и ее можно изменять в отличии от const
const и let это уже стандарт новый относительно, при этом они имеют блочную область видимости
и const нельзя менять за исключением массивов или объектов если это поля

Question 42

Замыкание

Answer 42

Замыкание – есть внешняя функция и вложенная в нее функция имеет доступ к переменным которые находятся во внешней функции даже после того как она завершила свое выполнение. Происходит из-за лексического окружения. После того как внешняя функция убирается из стэка ее лексическое окружение остается в памяти и благодаря этому внутренняя имеет доступ

Используется в setStat’ax функциях которые делают setState. В кастомных хуках, они также замыкают какое-то лексическое окружение.

Question 43

Копирование объектов

Answer 43

Копирование объектов – глубокое и поверхноснтное. При глубоком копируются все значения вложенные и тд. При поверхстном скопируется только на первом уровне, а если есть глубокие то скопируется просто по ссылке.
Глубокое копирование можно реализовать встроенным методом structuredClone, либо написать функцию либо lodash использовать. JSON.parse JSON.stringify копирует глубоко но оно не все данные может копировать, date либо symbol, function превращаются в undefined

Question 44

Виды функций

Answer 44

f Expression – когда мы создаем переменную пишем = function и тд и тп
f Declaration – напрямую пишем function название этой функции и арг тело и тд
Самовызывающаяся функция – в скобки оборачиваем f – перимущество scope и мы можем сделать асинхронной использовать async await

Question 45

Хостинг

Answer 45

Хостинг – переменная или функция может всплывать и мы можем ее использовать раньше чем мы ее объявили. Считывание кода идет 2 раза.

Question 46

map, reduce, filter, forEach

Answer 46

Map, reduce, filter – методы массива с функционального программирования, все они возвращают какое-то новое значение
map - с массива одного вида в массив другого вида + callback применяется к каждому элементу массива и видоизменяет его,
filter - отфильтровывает массив и возвращает только те элементы callback для которых вернул true ,
reduce – возвращает результат вычислений (функция благодаря аккумулятору при каждой итерации позволяет сделать подсчет каких-то данных, что-то куда-то записать и все в таком духе)
forEach – ничего не возвращает просто перебор элементов

Question 47

yagni, dry, kiss

Answer 47

Yagni – you aren’t gonna need it
Dry – don’t repeat yourself
Kiss – keep it simple stupid

Question 48

React это

Answer 48

React – JS библиотека для создания пользовательских интерфейсов.
Используется для компонентного подхода, комопоненты – строительные блоки пользовательского интерфейса, которые могут быть переиспользованы.
Решает проблему манипуляций с реальным dom деревом за счет vDom, хранится он в виде объекта js и мы можем его изменять без проблем с производительностью и не затрагивать реально dom дерево пока это не понадобится.

Question 49

Юристический алгоритм

Answer 49

Юристический алгоритм – используется из-за упрощения сложности.
1. Если изменились корневые элементы уничтожается старое дерево и строится новое с нуля (поменялся span на div).
2. Нунжо использовать ключи чтобы реакт мог сопоставлять элементы при ререндере, для оптимизации.

Question 50

SPA почему используется

Answer 50

SPA – гибкий, быстрый, сейчас везде используется. Вместо кучи статичных страниц используется одна которая с помощью js подгружаются нужные компоненты, динамично, без перезагрузок.

Question 51

Жизненные фазы классового компонента

Answer 51

Компонент обладает жизненным циклом – фаза монтирования, обновления, демонтирования. У классового component update, didmount, onmount.

Question 52

Компонент высшего порядка (HOC) это

Answer 52

Компонент высшего порядка – компонент который возвращает другой компонент. Нужны для переиспользования (хочешь вернуть логику компонента но при этом его дополняешь)

Question 53

Разница между контролируемым и неконтролируемым компонентом

Answer 53

Разница между контролируемым и неконтролируемым компонентом ●Контролируемый компонент обладает своим стейтом, управляемый React
● Неконтролируемые компоненты обладают внутренним стейтом (как пример значение тега textarea)

Question 54

Расскажи все про redux

Answer 54

Redux – библиотека управления состоянием, глобальное хранилище. У нас есть глобальный store и корневой reducer который мы разбиваем на n-нное количество редюсеров.
Reducer – функция которая принимает в себя state и action
Action – объект который должен как-то определяться обычно с помощью типа и в зависимости от типа мы видоизменяем state
А чтобы произошло изменение нам нужно вызвать dispatch – функция которая как раз берет action и прокидывает в нужный reducer, а reducer как я уже сказал место где хранится логика по определению типа action’a и изменению stat’a
Store – объект который содержит в себе state, dispatch, (короче все что есть в redux’e). И в нем происходят изменения за счет action’ov редюсеров и тд
Redux – синхронный, но если нужно выполнять какие-то асинхронные action’ы. Можно подключить middleware, redux thunk, redux toolkit

Question 55

Преимущества использования бандла при загрузке компонентов:

Answer 55

• Ускоряет первоначальную загрузку страницы — пользователю не нужно ждать загрузки всех компонентов сразу, только тех, которые нужны сейчас.
• Экономит ресурсы устройства — приложение загружает меньше данных сразу, что оптимально для мобильных устройств и слабых сетей.
• Улучшает производительность — благодаря отложенной загрузке компоненты подгружаются плавно по мере взаимодействия пользователя с приложением.

Question 56

Преимущества использования React.lazy с бандлом

Answer 56

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

Question 57

React хуки

Answer 57

Хуки – функции для функциональных компонентов.
UseEffect – управление жизненным циклом компонента
useLayourEffect – выполняется асинхронно, может заблокировать рендер, выполняется до отрисовки браузера, но уже после того как они появились в dom деревере но еще не были отрисованы, а useEffect после. Есть массив зависимостей, если не указать то будет вызываться при каждом рендере, если передать пустой массив то будет запускаться при монтировании, если массив с элементами то будет запускаться при изменении этих элементов
UseState – управление состоянем
UseCallback, UseMemo – меморизировать компоненты во избежании лишних перерисовок
useCallback – стоит использовать если мы его передаем в компонент обернутый в react.memo, либо в зависимости другим хукам чтобы на каждый ререндер он не вызывался потому что если не обернуть в useCallback, то на каждый рендер будет создаваться новая ссылка на функцию и будет вызываться этот эффект.
React.memo – оборачивает компонент и проверяет если старые пропсы равны новым но он не будет делать перерисовку. Выравнивает поверхностным сравнением. Можем поменять передавая callback вторым аргументом для сравнения пропсов

UseRef – с помощью его получаем доступ к Dom элементу, и избежание перерисовки при использовании current (обычно исопльзуется с setInterval, setTimeout) и тд
UseMemo – помогает избежать ненужных вычислений, принимает callback и меморизирует возвращаемые из этого callback’a значения.
useId - используется для генерации уникальных идентификаторов (ID) в компонентах. Это важно для случаев, когда нужно обеспечить уникальность идентификаторов в рамках страницы, чтобы избежать конфликтов в HTML-разметке.
useReducer: Хук принимает редюсер и начальное состояние, возвращая текущее состояние и функцию отправки действий (dispatch).

useContext – глобальное хранилище, можем туда что-то закинуть что-то вытащить оттуда (ТЕМУ САЙТА)
useDebugValue - помогает разработчикам следить за состоянием кастомных хуков, предоставляя дополнительную информацию о том, что происходит внутри этих хуков. Это особенно полезно, когда у вас есть сложные кастомные хуки, и вы хотите видеть в React Dev Tools, как их состояние или возвращаемые значения меняются в процессе работы приложения.
1. Если мы передаем эту функцию обернутую в коллбэк через пропсы компоненту который обернут в React.memo.
2. Если мы передаем эту функцию в массив зависимостей

Question 58

Меморизация

Answer 58

Меморизация – сравнение ссылок которые мы сравниваем чтобы не перещитывать какие то значения если они не меняются

Question 59

Для чего VirtualDom

Answer 59

У нас есть обычное dom дерево в браузере
Если бы мы писали просто на js то операции по обращению элементов к dom дереву очень тяжеловесны и тогда бы страница очень медленно работала
у реакта есть vDom это грубо говоря копия dom дерева из браузера
И реакт смотрит когда в каком то компоненте изменилось состояние он сравнивает vDom ДО и vDom ПОСЛЕ и перерисовывает только отдельные элементы,