Вопросы по frontend
Studied by 1 person
Learn
Practice Test
Spaced Repetition
Match
Flashcards1/63
Earn XP
Description and Tags
Часто задаваемые на собеседованиях вопросы
Name | Mastery | Learn | Test | Matching | Spaced |
|---|
No study sessions yet.
64 Terms
none
block : вся ширина, размер → стили, переносится
inline : одна строка, размер→содержимое
inline-block : одна строка, размер → стили
flex : позволяет удобно управлять расположением, порядком, размерами и отступами между элементами веб-страницы. Сайты, свёрстанные «флексами», получаются адаптивными.
grid : наиболее гибок. можно объединять отдельные ячейки, менять размеры строк и столбцов, регулировать отступы между ними. Также гриды хорошо приспосабливаются к разным размерам экрана, что делает их адаптивными.
display основные значения
определяет ключевые кадры анимации
Keyframes для чего нужны
static дефолтное
relative двигается относительно своего положения
absolute выпадет из flow. позиционируется относительно ближайшего позиционированного родителя
fixed выпадет из flow, остается на странице при прокрутке
sticky цепляется к родителю в рамках одного блока
свойство position
смена bg через псевдокласс :checked для родительского label
Как написать свой checkbox
display:flex;
align-item:center;
justify-content:center;
как отцентровать блок
включает рамку и padding в размер элемента
позволяет не рассчитывать размер блока каждый раз
что делает
box-sizing:border-box
Формирует DOM-дерево из HTML
Загружает стили
Формирует дерево рендеринга из HTML и CSS
Рассчитывает положение каждого элемента
Отрисовывает страницу
Как браузер обрабатывает веб-страницу
!important
inline-style
#id
.class
<tag> :pseudoclass
приоритет стилей
Outline не является частью блочной модели. На него не действует скругление. Это визуальный эффект
чем отличается border от outline
Резиновая (относительные размеры % rem em)
Flex, grid layout
медиазапросы под разные размеры
Адаптивная вёртска
Как сделать сайт адаптивным.
% - от родителя
em - от шрифта родителя
rem - от шрифта <html>
vh vw - от ширины/высоты окна
Относительные единицы измерения
Блок→Элемент→Модификатор
Разделение интерфейса на независимые блоки
Позволяет переиспользовать код избегая копипаста
Подход БЭМ
добавить ссылке атрибут
target=”_blank”
как открыть ссылку в новом окне
Margin - внешний
Padding - внутренний
Margin
Padding
Позволяет поисковым роботам лучше индексировать и выше ранжировать страницу. Их 13
<main> Определяет основной контент документа
<section> определяет раздел в документе
<nav> для блока навигационных ссылок
<footer> "подвала" документа или раздела
<header> "шапка" документа или раздела
<aside> Определяет блок сбоку от основного контента
<article> Определяет статью
<details> дополнительная информацию, которую пользователь может открывать или закрывать
<summary> Определяет видимый заголовок элемента <details>
<figure> группировка самодостаточных элементов
<figcaption> Определяет пояснение для элемента
<mark> Определяет маркированный текст
<time> Определяет дату/время
Семантические теги
hidden - скрыть выходящее за блок
Также есть самостоятельные свойства overflow-x и overflow-y для полос прокрутки
свойство Owerflow
у блока указать свойство
cursor: pointer/grab
как изменить курсор
flex-direction: column/row/-reverse
Изменение оси flexbox контейнера
margin
border
padding
content
Из чего строится размер элемента?
На перекрытие элементов
Влияет только на спозиционированные элементы
На что влияет z-index
button
checkbox
file
hidden
image
password
radio
reset
submit
text
Какие виды инпутов бывают?
justify-content расположение на главной оси
align-item расположение на второстепенной оси
На что влияют
justify-content
align-item
li{
list-style:none
}
Как убрать маркер у списка?
Псевдоклассы описывают состояние элемента. Они не отображаются в документе и не принадлежать DOM
:hower
:focused
:checked
:disabled
:nth-child
Что такое псевдоклассы?
Псевдоэлементы ведут как псевдоклассы, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам.
| Соответствует элементу, который допускает стилизацию и появляется после текущего содержимого порождающего элемента. |
| Соответствует элементу, который допускает стилизацию и появляется перед текущим содержимым порождающего элемента. |
| Соответствует первой букве элемента. |
| Соответствует первой строке содержимого порождающего элемента. |
Псевдоэлементы
flex-wrap: wrap
Перенос во Flexbox
<script> синхронно, сверху вниз
<script async> ассинхронно сразу же
<script defer> ассинхронно после загрузки HTML
Разница между
<script> <script async> <script defer>
transform : scale(n)
Как увеличить элемент не сдвигая остальные
@media screen and (max-width: 400 px){
}
Как пишется медиа-запрос
text-transform: uppercase/lowercase
Как перевести текст в заглавные или строчные
Для создания подсказок без использования JS
<div data-name=”description”>
Для чего data-атрибуты?
Выбор элемента по атрибутуtag[attribute=value]
Селектор атрибутов
А + B { }
Как изменить стили элемента A следующего за элементом B
opacity:0;
или
visibility:hidden;
Как скрыть элемент сохранив его пространство на странице
box-shadow: 2px 2px 2px color
для текста:text-shadow: 2px 2px 2px color
Как сделать тень элементу?
transform: rotateZ(45deg)
чтобы заметно было вращение по Х и У нужно странице добавить свойство perspective: 500px
Как повернуть элемент на 45 градусов?
программа, которая расширяет возможности чистого CSS, добавляя такие опции как: примеси, вложенные правила, селекторы наследования и миксины(переиспользуемые участки). Эти особенности облегчают работу с CSS: упрощают чтение кода и его дальнейшую поддержку.
SASS
LESS
Stylus
PostCSS
Что такое препроцессоры?
Прогрессивный рендеринг — это когда веб-страница загружается и отображается по частям. Сначала показывается самое важное, а потом уже всё остальное. Это как если бы вы собирали пазл: сначала берёте самые крупные детали, а потом уже мелкие. Такой подход полезен для людей, у которых медленный интернет или которые смотрят сайт на телефоне. Они увидят самое важное сразу, а не будут ждать, пока загрузится всё.
Что такое прогрессивный рендеринг?
Прогрессивный рендеринг на стороне сервера (PSSR) — это когда сервер сначала отправляет клиенту только часть веб-страницы, а потом постепенно подгружает остальное.
Это как если бы вы смотрели фильм, а он сначала показывал бы вам только начало, а потом постепенно добавлял бы новые сцены.
PSSR работает так:
* Сервер разделяет страницу на части.
* Каждая часть управляется своим скриптом.
* Когда часть появляется в поле зрения пользователя или нужна для взаимодействия, она рендерится.
Это быстрее, чем если бы сервер сразу отправлял всю страницу, потому что не нужно ждать, пока загрузится всё.
Что такое прогрессивный SSR?
Плюсы SSR:
1. Скорость загрузки страницы.
2. Улучшенная оптимизация SEO.
3. Последовательность в доставке контента и лучшая доступность.
Минусы SSR:
1. Повышенная нагрузка на сервер.
Плюсы CSR:
1. Улучшенный пользовательский опыт.
2. Сниженная нагрузка на сервер.
Минусы CSR:
Проблемы с оптимизацией под SEO. Поисковикам сложно проиндексировать контент, который генерируется с помощью JavaScript.
При загрузке сложных приложений долго грузятся. Браузеру нужно сначала загрузить и запустить JavaScript, чтобы отобразить контент.
SSR (Server-Side Rendering) и CSR (Client-Side Rendering) плюсы и минусы?
Прогрессивные веб-приложения (PWA) — это как бы сайт, но в виде приложения. Они работают на мобильных устройствах, но при этом выглядят как обычный сайт.
PWA похожи на мобильные приложения, но работают по-другому. Они не скачиваются из AppStore или Google Play, а просто открываются в браузере на устройстве.
PWA — это как бы продвинутые версии сайтов, которые подстраиваются под устройство пользователя. Они могут работать автономно и отправлять уведомления.
Что такое Progressive Web Application (PWA)?
Кроссбраузерность — это когда сайт хорошо отображается во всех популярных браузерах, не глючит и не ломается. И текст на нём можно легко прочитать. Это важно и для поисковиков, и для пользователей.
Что такое кроссбраузерность?
Модель OSI — это как бы схема, по которой данные передаются от одного приложения к другому. Она помогает разным устройствам в сети работать вместе и не мешать друг другу.
Что такое OSI модель?
Поток документа — это как элементы выводятся на страницу. В HTML элементы идут сверху вниз, как написано в коде. Верхний слой кода появится на странице раньше, чем нижний.
Есть три типа потока документа:
1. Нормальный. Блочные и строчные элементы идут друг за другом в том порядке, как они отмечены в файле.
2. Плавающий. Создаётся с помощью свойства float в CSS.
3. С абсолютным позиционированием. Создаётся с помощью свойства position: absolute. Элемент выдергивается из потока и может быть расположен в любой части документа.
Что такое поток документа?
Разница между адаптивным и отзывчивым дизайнами в том, что адаптивный дизайн подстраивается под размер устройства. У него есть несколько статичных макетов для разных девайсов: мобильных, планшетов и компьютеров. И каждая версия оптимизирована под конкретное устройство.
А отзывчивый дизайн использует гибкую сетку и медиазапросы CSS, чтобы элементы на сайте подстраивались под разные экраны. Так получается один дизайн, который плавно меняется от мобильных устройств до компьютеров.
Разница между адаптивным (adaptive) и отзывчивым (responsive) дизайнами?
Progressive enhancement и graceful degradation — это два разных подхода к созданию веб-приложений.
Progressive enhancement — это когда мы делаем базовую версию сайта, которая будет работать даже на старых устройствах. Потом мы постепенно улучшаем её.
Graceful degradation — это когда мы сразу делаем сайт с кучей фишек, а потом упрощаем его для старых устройств и браузеров.
Если у большинства людей современные гаджеты и браузеры, то лучше делать progressive enhancement. А если много людей с устаревшими устройствами и браузерами, то graceful degradation.
Разница между Progressive Enhancement и Graceful Degradation?
Веб-компоненты помогают создавать и использовать разные элементы на сайтах. Они работают по принципу инкапсуляции, то есть каждый элемент имеет свою собственную область, в которой он работает. Чтобы создать веб-компонент, можно использовать разные технологии: Пользовательские элементы — это такие API, которые позволяют определить элементы и их поведение. Их можно использовать в любом документе. Shadow DOM — это набор JavaScript API, который позволяет прикрепить инкапсулированное теневое DOM-дерево к элементу. Этот элемент будет отображаться отдельно от основного DOM-документа. Также с помощью Shadow DOM можно контролировать функциональность элемента. Многие разработчики используют открытые стандарты и типовые решения, чтобы создать веб-компоненты.
Что такое Веб-компоненты и какие технологии в них используются?
Shadow DOM — это технология, которая позволяет создавать изолированные деревья DOM внутри основного дерева DOM веб-страницы .
Shadow DOM используется для инкапсуляции . Благодаря ему в компоненте есть собственное «теневое» DOM-дерево, к которому нельзя просто так обратиться из главного документа. У него могут быть изолированные CSS-правила и т. д.
Основное отличие Shadow DOM от обычного DOM заключается в том, что он позволяет создавать более сложные и надёжные веб-компоненты, которые могут быть повторно использованы в различных местах на странице или даже на других страницах.
Shadow DOM может быть скрыт от внешнего мира с помощью CSS-селекторов, что делает его полезным для создания пользовательских элементов, которые не должны быть доступны для стилизации или изменения извне
.<show-hello name="John"></show-hello>
<show-hello name="John"> ===$0
#shadow-root (open)
<p>Hello, John!</p>
</show-hello>RESTful API — это такой стиль проектирования, который используют для создания и управления веб-сервисами. С его помощью можно делать всё: создавать данные на сервере, читать их, обновлять и удалять.
RESTful API работает по чётким правилам, которые позволяют ему справляться с большим количеством данных и разными устройствами. Благодаря этому разные программы могут работать вместе.
RESTful API использует обычные методы HTTP, такие как GET, POST, PUT и DELETE. Они помогают клиентам, например, браузерам или мобильным приложениям, общаться с серверами.
Данные, которые передаются через RESTful API, обычно выглядят как JSON или XML.
Что такое RESTful api??
Принципы REST-архитектуры — это шесть правил, по которым строятся API. Вот они:
1. Разделение на клиента и сервер. Клиент не должен знать, что происходит на сервере, а сервер не должен знать, что делает клиент.
2. Отсутствие состояния. Сервер не должен помнить, что делал клиент, и наоборот.
3. Кэширование. Клиент может сохранить ответ сервера и использовать его позже.
4. Единообразие интерфейса. Все запросы и ответы должны быть в одном формате.
5. Многоуровневая система. Иногда клиент общается напрямую с сервером, а иногда с промежуточным узлом.
6. Код по требованию. Клиент может загрузить код с сервера и расширить свои возможности.
REST-архитектура делает сервисы надёжными, гибкими и быстрыми. А если нужно что-то изменить или добавить, делает это проще.
Принципы REST-архитектуры
Модель зрелости Ричардсона — это такая штука, которая помогает понять, насколько крут веб-API.
Есть четыре уровня этой модели:
1. Уровень 0 — это когда у вас просто данные. API работает как обычный сервис.
2. Уровень 1 — это когда появляются ресурсы. API начинает работать с ресурсами, например, URL представляет ресурсы. Но принципы REST ещё не используются.
3. Уровень 2 — это когда API становится более похожим на REST. Используются стандарты HTTP (методы, статусы) и адресация ресурсов.
4. Уровень 3 — это когда API становится гипермедиа-управляемым. Клиенты могут исследовать API и взаимодействовать с ним динамически.
Основные уровни модели зрелости Ричардсона?
HTML5 History API — это такая штука, которая даёт доступ к истории браузера. В JavaScript она работает через объект window.history.
История переходов — это журнал, в котором браузер записывает все переходы, которые ты делаешь в одном окне или вкладке. Эти переходы браузер хранит, пока ты сидишь в этом окне или вкладке. А потом, если ты нажмёшь «Назад», ты сможешь вернуться на любую из этих страниц.
Что такое History API в браузере?
Веб-хранилище — это такая штука в HTML5, которая позволяет веб-странице сохранять данные на компе посетителя.
Данные могут быть временные — они удалятся после того, как вы закроете браузер. А могут быть и постоянные — они останутся, даже если вы закроете браузер и откроете страницу снова.
Есть два вида веб-хранилищ:
1. Локальное хранилище. Оно использует localStorage, чтобы хранить данные для всего сайта.
2. Хранилище данных сеансов. Оно использует sessionStorage, чтобы хранить данные для одного окна или вкладки браузера.
Что такое веб-хранилище (web storage)?
LocalStorage — позволяет хранить данные, и они не пропадут, даже если закрыть браузер.
SessionStorage работает похоже, но данные в нём пропадают после закрытия браузера. Это удобно, если нужно хранить что-то, что нужно только на время работы с сайтом, например, данные формы.
Cookies — это такие файлы, которые сайт может записать на компьютер. Они небольшие, до 4 килобайт, и у них есть срок годности. Они могут быть на всех страницах сайта и сохраняться между сеансами, так что их удобно использовать, чтобы запомнить, кто ты. Но их можно отключить, так что они не очень надёжные.
Разница между cookie, sessionStorage и localStorage?
HTTP — это клиент-серверный протокол передачи данных. Он может передавать разные типы файлов: видео, аудио, текст. Но сам протокол состоит только из текста.
Что такое HTTP?
HTTP-запрос состоит из четырёх основных частей:
1. Строка запроса. В ней указывается метод передачи, адрес (URI) и версия протокола HTTP. Например, GET / HTTP/1.1.
2. Заголовки. В них описываются параметры запроса, передаются различные сведения.
3. Пустая строка. Это символ перевода строки, который разделяет заголовок и тело запроса.
4. Тело сообщения. Это данные, которые передаются в запросе. Тело сообщения может отсутствовать.
Между заголовком и телом запроса есть пустая строка не у всех запросов. Например, для методов GET, HEAD, DELETE, OPTIONS тело, как правило, не нужно.
Из чего состоит HTTP-запрос?
Всего их 8:
* GET — чтобы получить содержимое ресурса.
* POST — чтобы отправить данные на сервер.
* PUT — чтобы отправить данные на сервер и создать новый ресурс.
* DELETE — чтобы удалить ресурс.
* HEAD — чтобы получить заголовки ответа.
* OPTIONS — чтобы узнать, какие методы сервер поддерживает.
* TRACE — чтобы проверить, не меняется ли запрос при прохождении через серверы.
* CONNECT — чтобы установить защищённое соединение.
Какие методы может иметь
HTTP-запрос
Куки — это такие маленькие кусочки данных, которые сервер отправляет в браузер. Браузер может их сохранить и отправлять на сервер, когда нужно.
Куки нужны для разных вещей:
* Чтобы управлять сеансом, например, логинами и корзинами для покупок.
* Чтобы сделать сайт более удобным, например, запомнить язык, размер шрифта и любимые цвета пользователя.
* Чтобы отслеживать поведение пользователей: какие страницы они посещают, как долго находятся на них и по каким ссылкам переходят.
С помощью кук можно хранить любую информацию о состоянии. Сам по себе HTTP-протокол этого не умеет.
Что такое HTTP cookie? Для чего они используются?
Разница между HTTP и HTTPS в том, что HTTPS — это как бы защищённый протокол. Он шифрует информацию, поэтому её нельзя перехватить и прочитать. А HTTP передаёт данные открыто.
Чтобы работать с HTTPS, нужен специальный сертификат. Он подтверждает, что сайт настоящий, и защищает данные.
Ещё отличие в том, что по умолчанию HTTP работает на порту 80, а HTTPS — на 443. Это помогает сетевым устройствам, типа маршрутизаторов и брандмауэров, различать трафик и защищать данные.
Поисковые системы тоже не любят HTTP. Они считают его небезопасным и предупреждают об этом пользователей.
Разница между HTTP и HTTPS?
HTTP 1 и HTTP 2 — это два разных протокола передачи данных. В HTTP 1 данные передаются в текстовом формате, а в HTTP 2 — в бинарном. Это значит, что в HTTP 2 данные меньше по размеру, поэтому они быстрее передаются и разбираются, а нагрузка на сеть меньше.
В старой версии для каждого запроса нужно было отдельное TCP-соединение. Чем больше запросов, тем медленнее работал браузер.
В HTTP 2 есть технология мультиплексирования, которая позволяет загружать много статического контента паралельно. Это сильно улучшает производительность.
В HTTP 2 клиенты могут указывать приоритеты запросов. Сервер может оптимизировать ответы и сначала отправлять более важные ресурсы.
Разница между HTTP/1 и HTTP/2?
«Тройное рукопожатие» — это когда клиент и сервер в интернете здороваются.
Всё просто:
1. Клиент говорит серверу: «Привет! Будем общаться!» и отправляет специальный сигнал.
2. Сервер отвечает: «Давай!» и тоже отправляет сигнал.
3. Клиент с сервером понимают, что всё ок, и начинают передавать данные.
Что такое “трехстороннее рукопожатие” (Triple handshake)?
Разница между PUT и POST запросами в том, что они делают.
PUT нужен, чтобы создать или обновить ресурс. Если ресурс уже есть, то PUT его обновит. Если ресурса нет, то сервер может его создать.
POST нужен, чтобы отправить данные на сервер. Когда клиент отправляет POST, он передаёт данные в теле запроса. Сервер может сделать с этими данными что угодно.
POST не «идемпотентный». Это значит, что если отправить один и тот же POST с одинаковыми данными, то результат может быть разным.
Какой запрос выбрать — PUT или POST — зависит от ситуации.
Разница между PUT- и POST-запросами?
Есть два вида передачи данных: TCP и UDP.
TCP — это когда сначала нужно установить соединение, а потом уже передавать данные. Это надёжно, но медленно.
А UDP — это когда можно сразу передавать данные, не устанавливая соединение. Это быстрее, но ненадёжно.
TCP проверяет, не потерялись ли данные, и если что-то потерялось, то передаёт заново. А UDP не проверяет.
Из-за этого с UDP данные могут потеряться или прийти не в том порядке.
TCP всегда передаёт данные в том порядке, в каком их отправили. А с UDP данные могут прийти в любом порядке.
TCP нужен, когда надо точно передать данные и убедиться, что их получили. Это может быть отправка фоток или переписка в интернете.
А UDP подойдёт для голосовых сообщений и видео с IP-камер.
Разница между протоколами TCP и UDP?
WebSocket — это такой протокол, который позволяет общаться между сервером и браузером в реальном времени. Он работает так: вы открываете соединение, и данные передаются туда-сюда, как будто вы разговариваете по телефону.
Сервер может сам отправлять информацию, а не только отвечать на запросы. Это удобно, потому что данные передаются быстро и без задержек.
Через WebSocket можно отправлять текстовые сообщения, картинки, аудио и видео. А если нужно, то и зашифрованные сообщения.
Что такое WebSocket? В чем принцип его работы?