Repository: FedorovAlexander/Front-end-Job-Interview-Questions
Branch: master
Commit: ebee47c05f3b
Files: 128
Total size: 99.0 KB
Directory structure:
gitextract_9rh0t374/
├── CSS/
│ ├── 1.md
│ ├── 10.md
│ ├── 11.md
│ ├── 12.md
│ ├── 13.md
│ ├── 14.md
│ ├── 15.md
│ ├── 16.md
│ ├── 17.md
│ ├── 18.md
│ ├── 19.md
│ ├── 2.md
│ ├── 20.md
│ ├── 21.md
│ ├── 22.md
│ ├── 23.md
│ ├── 24.md
│ ├── 25.md
│ ├── 26.md
│ ├── 27.md
│ ├── 28.md
│ ├── 3.md
│ ├── 4.md
│ ├── 5.md
│ ├── 6.md
│ ├── 7.md
│ ├── 8.md
│ ├── 9.md
│ └── README.md
├── Coding/
│ └── README.md
├── General/
│ ├── 1.md
│ ├── 10.md
│ ├── 11.md
│ ├── 12.md
│ ├── 13.md
│ ├── 14.md
│ ├── 15.md
│ ├── 16.md
│ ├── 2.md
│ ├── 3.md
│ ├── 4.md
│ ├── 5.md
│ ├── 6.md
│ ├── 7.md
│ ├── 8.md
│ ├── 9.md
│ └── README.md
├── HTML/
│ ├── 1.md
│ ├── 10.md
│ ├── 11.md
│ ├── 2.md
│ ├── 3.md
│ ├── 4.md
│ ├── 5.md
│ ├── 6.md
│ ├── 7.md
│ ├── 8.md
│ ├── 9.md
│ └── README.md
├── JavaScript/
│ ├── 1.md
│ ├── 10.md
│ ├── 11.md
│ ├── 12.md
│ ├── 13.md
│ ├── 14.md
│ ├── 15.md
│ ├── 16.md
│ ├── 17.md
│ ├── 18.md
│ ├── 19.md
│ ├── 2.md
│ ├── 20.md
│ ├── 21.md
│ ├── 22.md
│ ├── 23.md
│ ├── 24.md
│ ├── 25.md
│ ├── 26.md
│ ├── 27.md
│ ├── 28.md
│ ├── 29.md
│ ├── 3.md
│ ├── 30.md
│ ├── 31.md
│ ├── 32.md
│ ├── 33.md
│ ├── 34.md
│ ├── 35.md
│ ├── 36.md
│ ├── 37.md
│ ├── 38.md
│ ├── 39.md
│ ├── 4.md
│ ├── 40.md
│ ├── 41.md
│ ├── 42.md
│ ├── 43.md
│ ├── 44.md
│ ├── 45.md
│ ├── 46.md
│ ├── 47.md
│ ├── 48.md
│ ├── 49.md
│ ├── 5.md
│ ├── 50.md
│ ├── 51.md
│ ├── 52.md
│ ├── 6.md
│ ├── 7.md
│ ├── 8.md
│ ├── 9.md
│ └── README.md
├── Network/
│ ├── 1.md
│ ├── 2.md
│ ├── 3.md
│ ├── 4.md
│ ├── 5.md
│ └── README.md
├── Performance/
│ ├── 1.md
│ ├── 2.md
│ ├── 3.md
│ └── README.md
├── README.md
├── Testing/
│ ├── 1.md
│ ├── 2.md
│ ├── 3.md
│ └── README.md
└── _config.yml
================================================
FILE CONTENTS
================================================
================================================
FILE: CSS/1.md
================================================
### Что такое специфичность CSS-селекторов и как она работает?
В следующем списке типы селекторов расположены по возрастанию специфичности:
0. Селекторы типов элементов (например, `h1`) и псевдоэлементов (например, `::before`)
1. Селекторы классов (например, `.example`), селекторы атрибутов (например, `[type="radio"]`) и псевдоклассов (например, `:hover`)
2. Селекторы идентификаторов (например, `#example`)
Универсальный селектор (`*`), комбинаторы (`+`, `>`, `~`, `' '`) и отрицающий псевдокласс (`:not()`) не влияют на специфичность. (Однако селекторы, объявленные внутри `:not()`, влияют)
Стили, объявленные в элементе (например, `style="font-weight:bold"`), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.
**Расчёт специфичности**
- Тег и псевдоэлемент имеют специфичность 0001
- Класс, псевдокласс, атрибут - 0010
- ID имеет специфичность 0100
- Инлайновый стиль имеет приоритет 1000
---
<div align="right">
<a href="2.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/10.md
================================================
### Использовали ли вы систему сеток, и если да, то какую вы предпочитаете?
Использовал сетку Bootstrap, Material UI, CSS grid, Tailwind, а также самодельные кастомные сетки. Предпочитаю Tailwind.
---
<div align="right">
<a href="9.md">Предыдущий вопрос</a> | <a href="11.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/11.md
================================================
### Приходилось ли вам использовать или реализовывать медиазапросы или вёрстку под мобильные устройства?
Да, приходилось. Доля использования мобильных устройств при выходе в интернет увеличивается с каждым годом. В наше время сайт должен быть адаптивным.
В своей работе для реализации адаптивности я использовал сетку Bootstrap, а также медиа выражения.
---
<div align="right">
<a href="10.md">Предыдущий вопрос</a> | <a href="12.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/12.md
================================================
### Вы знакомы со стилизацией SVG?
Стилизация SVG отличается от стилизации HTML. SVG основан на XML и стилевые свойства отличаются по названию. Fill вместо background-color, stroke вместо border и т.д.
Изображение в формате SVG можно стилизоввать в SVG-разметке, а также в CSS файлах. Если вы используете SVG-спрайты, то стилизовать svg можно только в разметке. Также не получится динамически изменить свойства SVG js-ом.
---
<div align="right">
<a href="11.md">Предыдущий вопрос</a> | <a href="13.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/13.md
================================================
### Можете ли вы привести пример свойства `@media`, отличного от screen?
Медиа запросы поволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевые браузеры, устройства Брайля, телевизоры и так далее.
1. **all** -
Подходит для всех устройств.
2. **print** -
Для принтеров.
3. **screen** -
Предназначен в первую очередь для цветных компьютерных экранов.
4. **speech** -
Предназначен для синтезаторов речи.
---
<div align="right">
<a href="12.md">Предыдущий вопрос</a> | <a href="14.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/14.md
================================================
### На что нужно обратить внимание при написании эффективного CSS?
Для написания эффективного CSS должна быть система. **БЭМ**, **RSCSS**, **OOCSS** - кому что больше подходит. Я использую БЭМ. У каждого элемента уникальный класс, все элементы имеют одинаковую специфичность. Код можно переиспользовать.
---
<div align="right">
<a href="13.md">Предыдущий вопрос</a> | <a href="15.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/15.md
================================================
### Какие преимущества/недостатки в использовании CSS препроцессоров? Опишите, что вам нравится и не нравится в CSS препроцессорах, которыми вы пользовались.
**Преимущества:**
- Вложенность. Удобно писать по БЭМу.
- Переменные.
- Миксины.
**Недостатки:**
- Можно увлечься и начать "программировать на CSS". Код становится сложно понять и поддерживать другим разработчикам.
---
<div align="right">
<a href="14.md">Предыдущий вопрос</a> | <a href="16.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/16.md
================================================
### Как вы реализуете макет, который использует нестандартные шрифты?
Буду подключать шрифты с помощью `@font-face` для каждого `font-weight`.
---
<div align="right">
<a href="15.md">Предыдущий вопрос</a> | <a href="17.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/17.md
================================================
### Объясните, как браузер определяет, на какие элементы накладывать CSS стили?
Браузер сравнивает селекторы справа налево. Браузер находит все элементы DOM, соответствующие ключевому (самому правому) селектору. Дальше проходит до его родителя и ищет соответствия. Чем короче цепь селекторов, тем быстрее браузер найдет элемент.
---
<div align="right">
<a href="16.md">Предыдущий вопрос</a> | <a href="18.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/18.md
================================================
### Объясните, что такое псевдоэлементы и для чего они нужны.
Псевдоэлемент - это ключевое слово, добавляемое к селектору, которое позводяет стилизовать определенную часть выбранного элемента. Они могут использоваться для украшения (`:first-line`, `:first-letter`) или для добавления элементов к разметке (вместе c `content: ...`) без изменения HTML.
---
<div align="right">
<a href="17.md">Предыдущий вопрос</a> | <a href="19.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/19.md
================================================
### Объясните своими словами, что такое блочная модель.
Блочная модель отвечает за определение того, сколько места займет блочный элемент, схлопнутся или нет border или margin, размеры блока.
Правила блочной модели:
- Размеры блочного элемента складываются из `width`, `height`, `padding`, `border`, and `margin`.
- Если высота (height) блока не задана, то высота блока равна: высота контента этого блока + padding'и.
- Если ширина блока не задана, то блоки, для которых не задано float, будут иметь ширину: ширина родителя - padding'и родителя.
---
<div align="right">
<a href="18.md">Предыдущий вопрос</a> | <a href="20.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/2.md
================================================
### В чем разница между «сбросом» и «нормализацией» CSS? Что бы вы выбрали и почему?
**CSS Reset**:
- Удаляет все встроенные стили браузера
- Более агрессивный подход
- Требует переопределения общих стилей
- Примеры: Eric Meyer's Reset, Universal Reset
**CSS Normalize**:
- Сохраняет полезные стили по умолчанию
- Исправляет баги и несоответствия между браузерами
- Улучшает юзабилити
- Более современный подход
- Проще поддерживать
Я бы выбрал Normalize.css, потому что:
1. Сохраняет полезные стили браузера по умолчанию
2. Обеспечивает лучшую кроссбраузерность
3. Требует меньше переопределений стилей
4. Активно поддерживается сообществом
---
<div align="right">
<a href="1.md">Предыдущий вопрос</a> | <a href="3.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/20.md
================================================
### Что делает `* { box-sizing: border-box; }`? В чём его преимущества?
По умолчанию все элементы имеют box-sizing: content-box. Размеры блока рассчитываются из размеров контента.
box-sizing: border-box меняет то, как расчитываются width и height. Border и padding включаются в расчёт. Высота будет состоять из: высота контента + вертикальные padding'и + ширина вертикальных border. Ширина будет состоять из: ширина контента + горизонтальные padding'и + ширина горизонтальных border.
---
<div align="right">
<a href="19.md">Предыдущий вопрос</a> | <a href="21.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/21.md
================================================
### Что означает свойство display и можете ли вы привести несколько примеров его использования?
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
`none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`, `flex`, `grid`.
---
<div align="right">
<a href="20.md">Предыдущий вопрос</a> | <a href="22.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/22.md
================================================
### В чём разница между строчным и блочно-строчным элементом?
Для лучшего сравнения я добавил блочный элемент.
**block**
- Начинается с новой строки родительского элемента и занимает всю строку.
- Можно задавать ширину и высоту.
- Можно выровнять с помощью `vertical-align`.
- Margins и paddings работают со всех сторон.
**inline-block**
- Размер зависит от контента.
- Можно задавать ширину и высоту.
- Можно выровнять с помощью `vertical-align`.
- Margins и paddings работают со всех сторон.
**inline**
- Размер зависит от контента.
- Ширину и высоту задавать нельзя.
- Можно выровнять только по горизонтали. Место, которое занимает элемент по вертикали, зависит от line-height.
- Ведёт себя как блочный элемент, если задать вертикальные margins и paddings.
### Какие преимущества в использовании препроцессоров CSS?
Препроцессоры CSS добавляют некоторую дополнительную функциональность, которая улучшает CSS файлы и делает их более поддерживаемыми. Вот несколько преимуществ:
- Переменные
- Вложенность
- Операторы
- Миксины
- Наследование
- Функции
---
<div align="right">
<a href="21.md">Предыдущий вопрос</a> | <a href="23.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/23.md
================================================
### В чём разница между относительным, фиксированным, абсолютным и статически позиционированным элементом?
- **static** - значение по умолчанию. Свойства top, right, bottom, left и z-index не применяются.
- **relative** - элемент выстраивается относительно самому себе без изменения разметки.
- **absolute** - элемент выдёргивается из потока и выстраивается относительно ближайшего элемента-предка с position: relative. Если его нет, то относительно body. Абсолютно спозиционированные элементы могут иметь margin и padding и не схлопываются с margin и padding других элементов. Никак не влияют на другие элементы.
- **fixed** - элемент выдёргивается из потока и остаётся на позиции относительно окна документа и не меняет положение при скроле.
- **sticky** - смесь relative и fixed. Элемент ведёт себя как относительно спозиционированный, пока не достигнет заданной позиции, после которой ведёт себя как fixed элемент.
---
<div align="right">
<a href="22.md">Предыдущий вопрос</a> | <a href="24.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/24.md
================================================
### Какими CSS-фреймворками вы пользовались? Что бы вы хотели в них изменить/улучшить?
Использовал Bootstrap. CSS-фреймворки накладывают ограничения и добавляют работы по переопределению дефолтных свойств элементов. Если нет чётких требований использования фреймворков, стараюсь их избегать.
---
<div align="right">
<a href="23.md">Предыдущий вопрос</a> | <a href="25.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/25.md
================================================
### Пользовались ли вы Flexbox или Grid?
Да. Использую flexbox, когда не нужно поддерживать Internet Explorer ниже 11 версии.
У grid всё ещё не такая широкая поддержка браузеров.
---
<div align="right">
<a href="24.md">Предыдущий вопрос</a> | <a href="26.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/26.md
================================================
### Можете ли вы объяснить разницу между отзывчивым (responsive) сайтом и сайтом, сделанным по принципу mobile-first?
Отзывчивая и mobile-first верстки служат для того, чтобы пользователь мог пользоваться сайтом с разных устройств. Верстка подстраивается под различные размеры экрана, разрешения, контекст использования, механизмы контроля и т.д.
**Отзывчивая верстка** начинается с верстки десктопной версии сайта. Затем она адаптируется для меньших экранов.
**Mobile-first** начинается с верстки версии сайта для мобильных устройств.
---
<div align="right">
<a href="25.md">Предыдущий вопрос</a> | <a href="27.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/27.md
================================================
### Вы имеете опыт работы с ретиновой графикой? Если да, то какие методы вы использовали?
- Для иконок использовал SVG.
---
<div align="right">
<a href="26.md">Предыдущий вопрос</a> | <a href="28.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/28.md
================================================
### В каком случае вы предпочтёте использовать `translate()` вместо абсолютного позиционирования и наоборот? И почему?
Для анимации лучше использовать CSS анимацию. Браузер хорошо ее оптимизирует. У translate() большая частота кадров за счет более быстрого рендеринга.
Анимация с помощью абсолютного позиционирования для движения использует пиксельную сетку, поэтому могут наблюдаться скачки. Translate() же использует субпиксельную интерполяцию.
---
<div align="right">
<a href="27.md">Предыдущий вопрос</a>
</div>
================================================
FILE: CSS/3.md
================================================
### Объясните, что такое плавающие элементы (floats) и как они работают?
Float - это свойство CSS, которое позволяет элементу "плавать" влево или вправо от своего контейнера, позволяя тексту и инлайновым элементам обтекать его.
**Основные значения**:
- `float: left` - элемент плавает влево
- `float: right` - элемент плавает вправо
- `float: none` - элемент не плавает (по умолчанию)
**Очистка float**:
1. `clear: both/left/right` - на следующем элементе
2. Clearfix hack на родителе:
```css
.clearfix::after {
content: '';
display: table;
clear: both;
}
```
3. `overflow: hidden/auto` на родителе
**Современные альтернативы**:
- Flexbox
- Grid
- Multi-column layout
Рекомендуется использовать современные методы вёрстки (Flexbox/Grid) вместо float, кроме случаев, когда нужно именно обтекание текстом.
---
<div align="right">
<a href="2.md">Предыдущий вопрос</a> | <a href="4.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/4.md
================================================
### Опишите z-index и как формируется контекст наложения.
Z-index управляет вертикальным положением элементов на странице (по оси Z). Работает только с позиционированными элементами (position: relative/absolute/fixed/sticky).
**Контекст наложения**:
- Корневой элемент (`<html>`) создает контекст наложения
- Позиционированные элементы с z-index ≠ auto создают новый контекст
- Элементы с opacity < 1
- Элементы с transform, filter, perspective, clip-path, mask
- Элементы с will-change
- Элементы с isolation: isolate
**Правила наложения** (от нижнего к верхнему):
1. Корневой элемент
2. Позиционированные элементы с отрицательным z-index
3. Непозиционированные элементы
4. Позиционированные элементы с z-index: auto
5. Позиционированные элементы с положительным z-index
Пример:
```css
.parent {
position: relative;
z-index: 1;
}
.child {
position: absolute;
z-index: 2; /* Будет выше родителя только внутри его контекста */
}
```
**Важно помнить**:
- Z-index работает только между элементами одного контекста наложения
- Дочерние элементы не могут быть ниже фона родителя
- Значение z-index может быть только целым числом
---
<div align="right">
<a href="3.md">Предыдущий вопрос</a> | <a href="5.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/5.md
================================================
### Объясните, что такое блочный контекст форматирования и как он работает.
**Блочный контекст форматирования** — часть механизма отображения веб-страницы в CSS. Это регион страницы, в котором блоки размещаются в привычном для блоков порядке, и в котором плавающие элементы взаимодействуют с другими элементами.
Блочный контекст форматирования может быть создан чем-либо из этого списка:
- корневой элемент или что-то, что содержит его
- плавающие элементы (элементы, у которых float не равно none)
- абсолютно позиционированные элементы (элементы, значение position которых либо absolute, либо fixed)
- «строчные блоки» (элементы с display: inline-block)
- ячейки таблицы (элементы с display: table-cell, являющимся значением по умолчанию для ячеек таблицы в HTML)
- заголовки таблицы (элементы с display: table-caption, являющимся значением по умолчанию для заголовков таблицы в HTML)
- анонимные ячейки таблицы, неявно создаваемые элементами с display: table, table-row, table-row-group, table-header-group, table-footer-group (значения по умолчанию для таблиц, строк таблиц, «шапок», «подвалов» и тел таблиц в HTML соответственно) либо inline-table
- элементы, у которых значение свойства overflow отличается от visible
- флекс-элементы (непосредственные потомки элемента с display: flex или inline-flex)
- грид-элементы (непосредственные потомки элемента с display: grid или inline-grid)
многоколоночные контейнеры (элементы, у которых column-count или column-width не равно auto, включая элементы с column-count: 1)
- column-span: all должно всегда создавать блочный контекст форматирования, даже если элемент с column-span: all не находится в многоколоночном контейнере (изменение в спецификации, баг Chrome).
---
<div align="right">
<a href="4.md">Предыдущий вопрос</a> | <a href="6.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/6.md
================================================
### Какие вы знаете методы запрета обтекания (clearing) и в каких случаях они применяются?
**Clear** устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.
**Значения**
**none** - отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.
**both** - отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно, с какой стороны.
**left** - отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
**right** - отменяет обтекание с правой стороны элемента.
**inherit** - устанавливает значение родителя.
---
<div align="right">
<a href="5.md">Предыдущий вопрос</a> | <a href="7.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/7.md
================================================
### Как вы решаете стилевые проблемы, связанные с особенностями браузеров?
- Использую normalize или reset CSS
- Использую autoprefixer
---
<div align="right">
<a href="6.md">Предыдущий вопрос</a> | <a href="8.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/8.md
================================================
### Как вы обеспечиваете отображение страниц в браузерах с ограниченными возможностями? Какие приёмы/процессы вы при этом используете?
- Использую autoprefixer
- [«Graceful degradation»](../General/5.md)
- [«Progressive enhancement»](../General/5.md)
---
<div align="right">
<a href="7.md">Предыдущий вопрос</a> | <a href="9.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/9.md
================================================
### Какими способами можно визуально скрыть элемент (оставив его доступным только для скринридера)?
- visibility: hidden
- width: 0px; height: 0px;
---
<div align="right">
<a href="8.md">Предыдущий вопрос</a> | <a href="10.md">Следующий вопрос</a>
</div>
================================================
FILE: CSS/README.md
================================================
## Вопросы по CSS
* [Что такое специфичность CSS-селекторов и как она работает?](1.md)
* [В чем разница между «сбросом» и «нормализацией» CSS? Что бы вы выбрали и почему?](2.md)
* [Объясните, что такое плавающие элементы (floats) и как они работают.](3.md)
* [Объясните, что такое z-index и как формируется контекст наложения.](4.md)
* [Объясните, что такое блочный контекст форматирования и как он работает.](5.md)
* [Какие вы знаете методы запрета обтекания (clearing) и в каких случаях они применяются?](6.md)
* [Как вы решаете стилевые проблемы, связанные с особенностями браузеров?](7.md)
* [Как вы обеспечиваете отображение страниц в браузерах с ограниченными возможностями? Какие приёмы/процессы вы при этом используете?](8.md)
* [Какими способами можно визуально скрыть элемент (оставив его доступным только для скринридера)?](9.md)
* [Использовали ли вы систему сеток, и если да, то какую вы предпочитаете?](10.md)
* [Приходилось ли вам использовать или реализовывать медиазапросы или вёрстку под мобильные устройства?](11.md)
* [Вы знакомы со стилизацией SVG?](12.md)
* [Можете ли вы привести пример свойства `@media`, отличного от screen?](13.md)
* [На что нужно обратить внимание при написании эффективного CSS?](14.md)
* [Какие преимущества/недостатки в использовании CSS препроцессоров? Опишите, что вам нравится и не нравится в CSS препроцессорах, которыми вы пользовались.](15.md)
* [Как вы реализуете макет, который использует нестандартные шрифты?](16.md)
* [Объясните, как браузер определяет, на какие элементы накладывать CSS стили?](17.md)
* [Объясните, что такое псевдоэлементы и для чего они нужны.](18.md)
* [Объясните своими словами, что такое блочная модель.](19.md)
* [Что делает `* { box-sizing: border-box; }`? В чем его преимущества?](20.md)
* [Что означает свойство display и можете ли вы привести несколько примеров его использования?](21.md)
* [В чем разница между строчным и блочно-строчным элементом?](22.md)
* [В чем разница между относительным, фиксированным, абсолютным и статически позиционированным элементом?](23.md)
* [Какими CSS-фреймворками вы пользовались? Что бы вы хотели в них изменить/улучшить?](24.md)
* [Пользовались ли вы Flexbox или Grid?](25.md)
* [Можете ли вы объяснить разницу между отзывчивым (responsive) сайтом и сайтом, сделанным по принципу mobile-first»](26.md)
* [Вы имеете опыт работы с ретиновой графикой? Если да, то какие методы вы использовали?](27.md)
* [В каком случае вы предпочтёте использовать `translate()` вместо абсолютного позиционирования и наоборот? И почему»](28.md)
================================================
FILE: Coding/README.md
================================================
## Примеры кода на JavaScript
Вопрос: Какое значение будет у foo?
~~~~javascript
var foo = 10 + '20';
~~~~
Ответ: '1020'. Приведение типов преобразует 10 в строку и сложит 2 строки.
Вопрос: Что будет выведено в консоль?
~~~~javascript
console.log(0.1 + 0.2 == 0.3);
~~~~
Ответ: false. Из-за плавающей точки результатом вычисления будет 0.30000000000000004. Чтобы справится с этой проблемой нужно округлять числа до десятков.
Вопрос: Как сделать так, чтобы приведенный ниже код работал?
~~~~javascript
add(2, 5); // 7
add(2)(5); // 7
~~~~
Ответ:
~~~~javascript
function add(a, b) {
return a && b ? a + b : function (c) { return a + c; };
}
~~~~
Вопрос: Какое значение будет возращено?
~~~~javascript
"i'm a lasagna hog".split("").reverse().join("");
~~~~
Ответ: `'goh angasal a m\'i'`
Вопрос: Какое значение будет у window.foo?
~~~~javascript
( window.foo || ( window.foo = "bar" ) );
~~~~
Ответ: 'bar'
Вопрос: Какой будет результат приведенного ниже кода?
~~~~javascript
var foo = "Hello";
(function() {
var bar = " World";
alert(foo + bar);
})();
alert(foo + bar);
~~~~
Ответ:
1. `Hello World` из функции.
2. `ReferenceError: bar is not defined` т.к переменная `bar` бар определена в области видимости функции и не видна за ее пределами.
Вопрос: Чему равно foo.length?
~~~~javascript
var foo = [];
foo.push(1);
foo.push(2);
~~~~
Ответ: 2;
Вопрос: Чему равно foo.x?
~~~~javascript
var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};
~~~~
Ответ: `undefined`.
`foo.x = foo = {n: 2}` то же, что и `foo.x = (foo = {n: 2})`. `foo` на которую ссылается `foo.x` "устанавливается" перед тем, как `foo` изменится. `foo.x` ссылается на старое значение `foo`. Это значит, что в старом `foo` появится новое свойство `x` равное `{n: 2}`. А в новое `foo` запишется `{n: 2}`. Значение старого `foo` находится в `bar`.
~~~~javascript
{
n: 1,
x: {
n: 2
}
}
~~~~
Так как при дальнейшем выводе `foo.x` наше `foo` ссылается на его новое значение, в котором отстутствует `x`, то `foo.x` будет неопределено.
Вопрос: Что будет выведено в консоль?
~~~~javascript
console.log('one');
setTimeout(function() {
console.log('two');
}, 0);
Promise.resolve().then(function() {
console.log('three');
})
console.log('four');
~~~~
Ответ: 'one', 'four', 'three', 'two'. `setTimeout` часть основной очереди (main task queue), тогда как `Promise` в miscro task queue, которая выполняется перед основной. Поэтому сначала выведентся 'three', а потом 'two'.
================================================
FILE: General/1.md
================================================
### Какие методы для повышения производительности вы использовали при создании или обслуживании сайта?
1. async и defer
**async** - для всех внешних скиптов, которым не нужно знать о HTML (google analytics, tracking scripts).
Загружается вместе с html, после своей загрузки приостанавливает загрузку html, выполняется. Затем возобновляется загрузка html.
**defer** - для внешних скриптов, которые не очень важны
Загружается вместе с html, ждет пока html загрузится до конца. Потом выполняется.
2. Оптимизация изображений.
3. Конкатенация и углификация файлов.
4. Инлайновый CSS. Стили вставляются инлайном в HTML.
---
<div align="right">
<a href="2.md">Следующий вопрос</a>
</div>
================================================
FILE: General/10.md
================================================
### Опишите, как бы вы реализовали примитивное слайд-шоу.
**HTML**
```html
<div class="slide-page">lorem</div>
<div class="slide-page">ipsum</div>
<div class="slide-page">dolor</div>
```
**CSS**
```css
html,
body,
.slide-page {
width: 100%;
height: 100%;
}
.slide-page {
position: fixed;
top: 0;
left: 0;
display: none;
}
.slide-page:first-child {
display: block;
}
```
**JS**
```javascript
window.addEventListener('click', () => {
document.querySelector('.slide-page').remove();
});
```
---
<div align="right">
<a href="9.md">Предыдущий вопрос</a> | <a href="11.md">Следующий вопрос</a>
</div>
================================================
FILE: General/11.md
================================================
### Если бы у вас была возможность освоить новую технологию в этом году, что бы это было?
**Node.js**
Потому что с Node.js можно разрабатывать серверные приложения на JavaScript.
---
<div align="right">
<a href="10.md">Предыдущий вопрос</a> | <a href="12.md">Следующий вопрос</a>
</div>
================================================
FILE: General/12.md
================================================
### Объясните важность стандартов и комитетов по стандартам.
Использование стандартов автоматически делает страницу кроссбраузерной и кроссплатформенной. Благодаря стандартам сеть стабильна, несмотря на постоянное появление новых технологий. Сокращается время на отладку и устранение неполадок.
---
<div align="right">
<a href="11.md">Предыдущий вопрос</a> | <a href="13.md">Следующий вопрос</a>
</div>
================================================
FILE: General/13.md
================================================
### Что такое FOUC (Flash Of Unstyled Content)? Как его избежать?
FOUC (Flash Of Unstyled Content) - это появление неоформленного контента при загрузке.
Избежать его можно путём вставки критичного CSS в тег `<head>`. Критичный CSS — это минимальный набор блокирующего CSS, требуемого для рендеринга первого экрана с контентом пользователю.
---
<div align="right">
<a href="12.md">Предыдущий вопрос</a> | <a href="14.md">Следующий вопрос</a>
</div>
================================================
FILE: General/14.md
================================================
### Объясните, что такое ARIA и скринридеры, а также как сделать сайт доступным.
**WAI-ARIA** - технологический стандарт для предоставления возможности полноценного использования интернета людьми с ограниченными возможностями (нарушениями работы орагнов зрения и опорно-двигательного аппарата).
**Скринридер** - программа позволяющая определять и интерпретировать (обычно в виде звуковых и/или голосовых) оповещений события происходящие на экране, например:
1. читать вслух текст который сейчас выбран пользователем
2. читать вслух название выбранной пользователем графической кнопки
3. зачитывать тексты "всплывающих окон" системных уведомлений
**Способы сделать сайт доступным**
- Масштабируемая верстка (изменение шрифта)
- Контрастность цвета фона и текста
- Возможность работы сервиса с клавиатуры
**WAI-ARIA предоставляет разработчикам следующее:**
- Роли для описания типа элемента управления, такие как menu, treeitem, slider[en], progressbar.
- Роли для описания структуры веб-страницы (заголовки, секции, таблицы и т. д.).
- Свойства для описания состояний элементов управления.
- Свойства для обозначения блоков страницы, содержание которых может обновляться.
- Свойства для перетаскивания объектов, обозначающие что нужно переместить и куда.
- Возможность описания навигации по сайту при помощи клавиатуры.
---
<div align="right">
<a href="13.md">Предыдущий вопрос</a> | <a href="15.md">Следующий вопрос</a>
</div>
================================================
FILE: General/15.md
================================================
### Какие преимущества и недостатки у CSS и JavaScript анимаций?
**CSS**
**Плюсы**
- Простота
**Минусы**
- Ограниченные возможности
**JS**
**Плюсы**
- Позволяет полностью контролировать анимацию. Рекомендуется выбрать одну из множества JS-библиотек.
**Минусы**
- Сложность
---
<div align="right">
<a href="14.md">Предыдущий вопрос</a> | <a href="16.md">Следующий вопрос</a>
</div>
================================================
FILE: General/16.md
================================================
### Что означает CORS и какую проблему решает?
**Cross-origin resource sharing (CORS)** предоставляет веб-серверам возможность контролировать междоменные запросы и позволяет производить безопасный обмен данными между разными доменами.
---
<div align="right">
<a href="15.md">Предыдущий вопрос</a>
</div>
================================================
FILE: General/2.md
================================================
### Можете ли вы описать некоторые методы SEO, которые вы использовали в последнее время?
Можно рассказать про:
- Уникальные теги `<title>` и `<meta name="description" content="...">`
- Про то, что нельзя забывать теги заголовков `<h1>, <h2>, <h3>`
- Атрибут **alt** у изображений
- Валидация вёрстки. Например на [этом](http://validator.w3.org/) сайте.
---
<div align="right">
<a href="1.md">Предыдущий вопрос</a> | <a href="3.md">Следующий вопрос</a>
</div>
================================================
FILE: General/3.md
================================================
### С какими системами контроля версий вы знакомы?
Наиболее известные системы контроля версий это Git, SVN и Mercurial.
Подробное сравнение можно посмотреть [тут](https://biz30.timedoctor.com/ru/c%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0-%D0%BA%D0%BE%D0%BD%D1%82%D1%80%D0%BE%D0%BB%D1%8F-%D0%B2%D0%B5%D1%80%D1%81%D0%B8%D0%B9/).
---
<div align="right">
<a href="2.md">Предыдущий вопрос</a> | <a href="4.md">Следующий вопрос</a>
</div>
================================================
FILE: General/4.md
================================================
### Если у вас есть 5 разных файлов со стилями, какой лучший способ интегрировать их в сайт?
Лучше всего соединить все 5 файлов в один (например, с помощью gulp) и подключить этот файл. Это уменьшает количество запросов к серверу.
---
<div align="right">
<a href="3.md">Предыдущий вопрос</a> | <a href="5.md">Следующий вопрос</a>
</div>
================================================
FILE: General/5.md
================================================
### Можете ли вы описать разницу между прогрессивным улучшением (progressive enhancement) и изящной деградацией (graceful degradation)?
**Прогрессивное улучшение** - разработка приложения, начиная с самых простых вещей, которые будут работать во всех браузерах. Постепенное добавление новых технологий.
**Изящная деградация** - разработка приложения с использованием самых современных технологий. Далее делаются фолбэки для старых браузеров.
---
<div align="right">
<a href="4.md">Предыдущий вопрос</a> | <a href="6.md">Следующий вопрос</a>
</div>
================================================
FILE: General/6.md
================================================
### Как можно оптимизировать загрузку внешних ресурсов на странице?
Внешние файлы js подключать внизу страницы перед закрывающим тегом `</body>`. Внешние .js-файлы блокируют параллельную загрузку. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Таким образом, если картинки для вашего сайта располагаются на разных хостах, вы получите более 2-х параллельных загрузок. А когда загружается скрипт, браузер не будет начинать никаких других загрузок, даже с других хостов.
---
<div align="right">
<a href="5.md">Предыдущий вопрос</a> | <a href="7.md">Следующий вопрос</a>
</div>
================================================
FILE: General/7.md
================================================
### Сколько ресурсов браузер может одновременно загружать с одного домена?
**Для HTTP/1.1:**
IE 6 and 7: 2 <br/>
IE 8: 6 <br/>
IE 9: 6 <br/>
IE 10: 8 <br/>
IE 11: 8 <br/>
Firefox 2: 2 <br/>
Firefox 3: 6 <br/>
Firefox 4 to 46: 6 <br/>
Opera 9.63: 4 <br/>
Opera 10: 8 <br/>
Opera 11 and 12: 6 <br/>
Chrome 1 and 2: 6 <br/>
Chrome 3: 4 <br/>
Chrome 4 to 23: 6 <br/>
Safari 3 and 4: 4 <br/>
**Для HTTP/2(SPDY)**
Поддерживает множество запросов. Одно TCP соединение для всех запросов.
**Исключение**
Когда мы используем несколько поддоменов, указывающих один и тот же домен, мы можем повысить количество параллельно загружаемых ресурсов.
---
<div align="right">
<a href="6.md">Предыдущий вопрос</a> | <a href="8.md">Следующий вопрос</a>
</div>
================================================
FILE: General/8.md
================================================
### Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального).
- Реальные способы
1. Минифицировать и соединить CSS. Минифицировать и соединить JS.
2. Оптимизировать изображения. Сжать изображения без видимых потерь качества. Сшить иконки в спрайты для уменьшения количества запросов к серверу.
- Воспринимаемый:
3. Вставить критичный CSS в тег `<head>`. Критичный CSS - это минимальный набор блокирующего CSS, требуемого для рендеринга первого экрана с контентом пользователю.
---
<div align="right">
<a href="7.md">Предыдущий вопрос</a> | <a href="9.md">Следующий вопрос</a>
</div>
================================================
FILE: General/9.md
================================================
### Если вы присоединились к проекту, где для форматирования используются табы, а вы привыкли использовать пробелы, как вы поступите?
Буду использовать табы, потому что нужно сохранить форматирование кода.
---
<div align="right">
<a href="8.md">Предыдущий вопрос</a> | <a href="10.md">Следующий вопрос</a>
</div>
================================================
FILE: General/README.md
================================================
## Общие вопросы
* [Какие методы для повышения производительности вы использовали при создании или обслуживании сайта?](1.md)
* [Можете ли вы описать некоторые методы SEO, которые вы использовали в последнее время?](2.md)
* [С какими системами контроля версий вы знакомы?](3.md)
* [Если у вас есть 5 разных файлов со стилями, какой лучший способ интегрировать их в сайт?](4.md)
* [Можете ли вы описать разницу между прогрессивным улучшением (progressive enhancement) и изящной деградацией (graceful degradation)?](5.md)
* [Как можно оптимизировать загрузку внешних ресурсов на странице?](6.md)
* [Сколько ресурсов браузер может одновременно загружать с одного домена?](7.md)
* [Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального).](8.md)
* [Если вы присоединились к проекту, где для форматирования используются табы, а вы привыкли использовать пробелы, как вы поступите?](9.md)
* [Опишите, как бы вы реализовали примитивное слайд-шоу.](10.md)
* [Если бы у вас была возможность освоить новую технологию в этом году, что бы это было?](11.md)
* [Объясните важность стандартов и комитетов по стандартам.](12.md)
* [Что такое FOUC (Flash Of Unstyled Content)? Как его избежать?](13.md)
* [Объясните, что такое ARIA и скринридеры, а также как сделать сайт доступным.](14.md)
* [Какие преимущества и недостатки у CSS и JavaScript анимаций?](15.md)
* [Что означает CORS и какую проблему решает?](16.md)
================================================
FILE: HTML/1.md
================================================
### Для чего нужен doctype?
`<!DOCTYPE>` указывает тип документа, который используется при написании html кода. Doctype необходим, чтобы браузер понимал как обрабатывать текущую веб-страницу, так как существует несколько версий языка HTML, а еще есть XHTML.
---
<div align="right">
<a href="2.md">Следующий вопрос</a>
</div>
================================================
FILE: HTML/10.md
================================================
### Для чего используется атрибут srcset в теге изображения? Опишите процесс, который использует браузер при оценке содержимого этого атрибута.
**Srcset** - атрибут, который позволяет вам указывать разные типы изображений для разных размеров экрана/ориентации/типов отображения. Использование действительно просто, вы просто предоставляете множество разных изображений, разделяя их запятой следующим образом: `<img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">`. Вот пример: `srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x`.
---
<div align="right">
<a href="9.md">Предыдущий вопрос</a> | <a href="11.md">Следующий вопрос</a>
</div>
================================================
FILE: HTML/11.md
================================================
### Приходилось ли вам работать с языками HTML-шаблонизации?
Да. Pug, Haml, Handlebars, Smarty.
### Что такое элемент output в HTML5?
Элемент `<output>` представляет собой контейнер, в котором сайты могут отображать результат вычисления или пользовательских действий.
---
<div align="right">
<a href="10.md">Предыдущий вопрос</a>
</div>
================================================
FILE: HTML/2.md
================================================
### Как следует оформлять страницу, содержимое которой может быть на разных языках?
Когда к серверу делается HTTP-запрос, то браузер пользователя обычно отсылает информацию о предпочитаемом языке в заголовке Accept-Language. Сервер может использовать эту информацию, чтобы вернуть версию документа на подходящем языке, если такая возможность есть. В возвращенном HTML-документе обязательно должен быть указан атрибут lang у тега `<html>`, к примеру `<html lang="en">`.
На бэкенде HTML-разметка будет содержать плейсхолдер i18n, а контент для конкретного языка будет хранится в YML- или JSON-формате. Сервер динамически формирует HTML-страницу с контентом на конкретном языке, чаще всего при помощи бэкенд-фреймворка.
---
<div align="right">
<a href="1.md">Предыдущий вопрос</a> | <a href="3.md">Следующий вопрос</a>
</div>
================================================
FILE: HTML/3.md
================================================
### На что необходимо обратить внимание при разработке мультиязычных сайтов?
- Используй атрибут lang в HTML.
- Перенаправляй пользователей на версию сайта на их языке. Позволяйте быстро и без проблем изменить страну и язык.
- Текст на картинках плохо поддается адаптации. Многие до сих пор помещают текст на картинки чтобы получить хорошо выглядящий несистемный шрифт на любом компьютере. Однако чтобы перевести текст картинкой, нужно иметь подготовленную картинку с каждой строкой текста для каждого языка. При большом количестве текста это быстро выйдет из под контроля.
- Ограничение длины слов и предложений. Некоторый контент может быть длиннее при написании на другом языке. Будьте внимательны к макету и проверяйте поведение блоков при переполнении. Количество символов важно в таких элементах, как заголовки, лейблы и кнопки. Но не так важно в основном тексте или в блоке комментария.
- Помните о восприятии цветов. В разных языках и культурах цвета имеют разное значение. Дизайн должен учитывать эти особенности.
Форматируете даты и валюты. Календарные даты иногда пишутся по-разному. Например, «Май 31, 2012» в Америке или «31 мая 2012» в большинстве стран Европы.
- Не склеивайте переведенные строки. Не пишите что-то вроде "Сегодняшняя дата " + date. Эта фраза будет выглядеть коряво на языках с другим порядком слов. Вместо этого используйте параметры шаблона.
- Разные направления чтения. В русском мы читаем слева направо, сверху вниз. В традиционном японском языке текст читается сверху вниз, справа налево.
---
<div align="right">
<a href="2.md">Предыдущий вопрос</a> | <a href="4.md">Следующий вопрос</a>
</div>
================================================
FILE: HTML/4.md
================================================
### Для чего нужны атрибуты, начинающиеся с data-?
Такие атрибуты предназначены для хранения частных данных пользователя прямо в DOM, для котрых не существует более подходящих атрибутов или элементов, на странице или в приложении.
На сегодняшний день использование data-атрибутов не поощряется.
---
<div align="right">
<a href="3.md">Предыдущий вопрос</a> | <a href="5.md">Следующий вопрос</a>
</div>
================================================
FILE: HTML/5.md
================================================
### Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?
1. Семантика. Позволяет более точно описать из чего состоит контент.
2. Связанность. Позволяет общаться с сервером новыми и инновационными способами.
3. Офлайн и хранилище. Позволяют страницам хранить данные локально на клиентской стороне и более эффективно работать в офлайне.
4. Мультимедиа. Ставит создание видео и аудио на первое место в вебе.
5. 2D- и 3D-графика и эффекты. Позволяет расширить возможности презентации.
6. Производительность и интеграция. Обеспечивает большую скорость оптимизации и лучшее использование аппаратных средств.
7. Доступ к устройствам. Позволяет взаимодействовать с различными устройствами ввода и вывода.
8. Стилизация. Позволяет создавать более сложные темы оформления.
---
<div align="right">
<a href="4.md">Предыдущий вопрос</a> | <a href="6.md">Следующий вопрос</a>
</div>
================================================
FILE: HTML/6.md
================================================
### Объясните разницу между cookie, sessionStorage и localStorage.
**Cookie**
- **Инициатор:** клиент или сервер. Сервер может использовать заголовок Set-Cookie.
- **Срок хранения:** устанавливается вручную.
- **Хранение между сессиями:** зависит от установки срока хранения.
- **Связь с доменом:** да.
- **Отправка на сервер с каждым HTTP-запросом:** автоматически, с помощью заголовка Cookie.
- **Емкость, на один домен:** 4 КБ.
- **Доступность:** в любом окне.
**Local Storage**
- **Инициатор:** клиент.
- **Срок хранения:** всегда.
- **Хранение между сессиями:** да.
- **Связь с доменом:** нет.
- **Отправка на сервер с каждым HTTP-запросом:** нет.
- **Емкость, на один домен:** 5 МБ.
- **Доступность:** в любом окне.
**Session Storage**
- **Инициатор:** клиент.
- **Срок хранения:** до закрытия вкладки.
- **Хранение между сессиями:** нет.
- **Отправка на сервер с каждым HTTP-запросом:** нет.
- **Емкость, на один домен:** 5 МБ.
- **Доступность:** в той же вкладке.
---
<div align="right">
<a href="5.md">Предыдущий вопрос</a> | <a href="7.md">Следующий вопрос</a>
</div>
================================================
FILE: HTML/7.md
================================================
### Объясните разницу между `<script>`, `<script async>` и `<script defer>`.
`<script>` — отрисовка HTML блокируется, скрипт извлекается и выполняется немедленно, отрисовка HTML возобновляется после окончания выполнения скрипта.
`<script async>` — скрипт будет извлечен и обработан параллельно с отрисовкой HTML, его выполнение закончится как только это будет возможно (обычно до того, как закончилась отрисовка HTML). Используйте async тогда, когда скрипт не зависит от других скриптов на странице, например для аналитики.
`<script defer>` — скрипт будет извлечен параллельно с отрисовкой HTML, его выполнение произойдет после того, как вся страница будет загружена. Если таких скриптов несколько, то каждый из них будет исполнятся в том порядке, в котором они расположены в документе. Если скрипту нужен полностью распарсеный DOM, то атрибут defer обеспечит уверенность в том, что на момент отработки скрипта весь HTML отрисован. Нет особой разницы со скриптами, расположенными перед тегом `<body>`. Отложенный скрипт не должен содержать `document.write`.
---
<div align="right">
<a href="6.md">Предыдущий вопрос</a> | <a href="8.md">Следующий вопрос</a>
</div>
================================================
FILE: HTML/8.md
================================================
### Почему хорошей практикой считается располагать `<link>` для подключения CSS между `<head></head>`, а `<script>` для подключения JS ставить перед `</body>`? Знаете ли вы исключения?
**Размещение `<link>` внутри `<head>`**
Необходимость помещать теги `<link>` внутри шапки сайта описана в спецификации. Кроме того, размещение в верхней части разметки позволяет загружать страницу постепенно, что хорошо отражается на опыте использования. Проблема, возникающая при размещении таблиц стилей в нижней части страницы, заключается в том, что этот порядок препятствует прогрессивной загрузке страницы во многих браузерах. В том числе в Internet Explorer. Некоторые браузеры блокируют загрузку страницы, чтобы избежать перерисовки элемента, если его стили изменятся. Все это время пользователь будет пялиться на белый экран. Такое поведение браузеров предотвращает мерцание или отрисовку нестилизованых элементов.
**Размещение `<script>` прямо перед `</body>`**
Теги `<script>` блокируют отрисовку HTML на то время, пока они скачиваются и исполняются. Скачивание скриптов в конце позволяет сперва распарсить и показать пользователю весь HTML.
Исключением является случай, когда в вашем скрипте содержится document.write(). Но на сегодняшний день его использование не считается хорошей практикой. К тому же, расположение скриптов внизу разметки означает, что браузер не может начать их скачивать до тех пор, пока не отрисован весь документ. Единственным рабочим способом, при котором `<script>` будет расположен внутри `<head>`, является добавление атрибута defer.
---
<div align="right">
<a href="7.md">Предыдущий вопрос</a> | <a href="9.md">Следующий вопрос</a>
</div>
================================================
FILE: HTML/9.md
================================================
### Что такое прогрессивная отрисовка?
**Прогрессивный рендеринг** — имя, данное технологиям, используемым для ускорения отрисовки страниц (в частности, уменьшение времени загрузки), чтобы показать пользователю контент как можно скорее.
До того, как широкополосный интернет распространился повсеместно, прогрессивный рендеринг встречался довольно часто. Но этот подход по прежнему полезен в современной разработке, поскольку все более популярным (и ненадежным) становится мобильный доступ в интернет.
Примеры технологий:
1. Ленивая загрузка картинок. Картинки на странице не загружаются все разом. JavaScript подгрузит картинки тогда, когда пользователь доскроллит до той части страницы, на которой они расположены.
2. Приоритизация видимого контента. Только минимум CSS, контента, скриптов, необходимых для отрисовки той части страницы, которую пользователь увидит первой. Вы можете использовать отложенные скрипты или слушать события DOMContentLoaded или load, чтобы загрузить остальные ресурсы и контент.
3. Асинхронные фрагменты HTML. Отправка в браузер частей HTML-страницы, созданной на бэкенд.
---
<div align="right">
<a href="8.md">Предыдущий вопрос</a> | <a href="10.md">Следующий вопрос</a>
</div>
================================================
FILE: HTML/README.md
================================================
## Вопросы по HTML
* [Для чего нужен doctype?](1.md)
* [Как следует оформлять страницу, содержимое которой может быть на разных языках?](2.md)
* [На что необходимо обратить внимание при разработке мультиязычных сайтов?](3.md)
* [Для чего нужны атрибуты, начинающиеся с data-?](4.md)
* [Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?](5.md)
* [Объясните разницу между cookie, sessionStorage и localStorage.](6.md)
* [Объясните разницу между `<script>`, `<script async>` и `<script defer>`.](7.md)
* [Почему хорошей практикой считается располагать `<link>` для подключения CSS между `<head></head>`, а `<script>` для подключения JS ставить перед </body>? Знаете ли вы исключения?](8.md)
* [Что такое прогрессивная отрисовка?](9.md)
* [Для чего используется атрибут srcset в теге изображения? Опишите процесс, который использует браузер при оценке содержимого этого атрибута.](10.md)
* [Приходилось ли вам работать с языками HTML-шаблонизации?](11.md)
================================================
FILE: JavaScript/1.md
================================================
### Объясните делегирование событий.
Всплытие событий позволяет реализовать один из самых важных приёмов разработки - **делегирование**.
Он заключается в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому - мы ставим один обработчик на их общего предка. Из него можно получить целевой элемент `event.target`, понять на каком потомке произошло событие и обработать его.
**Алгоритм:**
1. Вешаем обработчик на контейнер.
2. В обработчике: получаем event.target.
3. В обработчике: если event.target или один из его родителей в контейнере (this) – интересующий нас элемент – обрабатываем его.
**Зачем использовать:**
- Упрощает инициализацию и экономит память: не нужно вешать много обработчиков.
- Меньше кода: при добавлении и удалении элементов не нужно ставить или снимать обработчики.
- Удобство изменений: можно массово добавлять или удалять элементы путём изменения innerHTML.
---
<div align="right">
<a href="2.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/10.md
================================================
### В чём разница между host-объектами и нативными объектами?
- Собственные объекты: `Object` (конструктор), `Date`, `Math`, `parseInt`, `eval`, строковые методы, такие как `indexOf` и `replace`, методы массивов и т.д. - основные предопределённые объекты, всегда доступные в JavaScript.
- Объекты хоста (при условии среды браузера): `window`, `document`, `location`, `history`, `XMLHttpRequest`, `setTimeout`, `getElementsByTagName`, `querySelectorAll` и т.д. - Они отличаются от встроенных объектов, потому что не все окружения будут иметь одни и те же объекты хоста.
---
<div align="right">
<a href="9.md">Предыдущий вопрос</a> | <a href="11.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/11.md
================================================
### В чем разница между: function Person(){}, var person = Person(), и var person = new Person()?
`function Person(){}` - Мы создаем функцию с именем Person.
`var person = Person()` - Мы вызываем функцию Person и результат сохраняем в переменную person.
`var person = new Person()` - Мы создаем новый объект, используя функцию-конструктор Person.
---
<div align="right">
<a href="10.md">Предыдущий вопрос</a> | <a href="12.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/12.md
================================================
### В чем разница между .call и .apply?
Сходство заключается в том, что и `.call`, и `.apply` используются для вызова функций, а также первый параметр будет использоваться как значение `this` внутри функции. А разница в том, что `.call` в качестве следующих аргументов принимает аргументы, разделенные запятыми, в то время как `.apply` в качестве следующих аргументов принимает массив аргументов.
```javascript
function add(a, b) {
return a + b;
}
console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3
```
---
<div align="right">
<a href="11.md">Предыдущий вопрос</a> | <a href="13.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/13.md
================================================
### Что делает и для чего нужна функция Function.prototype.bind?
Метод `bind()` создает новую функцию, которая при вызове устанавливает в качестве контекста выполнения `this` предоставленное значение. В метод также передается набор аргументов, которые будут установлены перед переданными в привязанную функцию аргументами при ее вызове.
---
<div align="right">
<a href="12.md">Предыдущий вопрос</a> | <a href="14.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/14.md
================================================
### В чём разница между feature detection (определение возможностей), feature inference (предположение возможностей) и анализом строки user-agent?
**Feature detection** (определение возможностей)
Определение возможностей браузера заключается в определении, поддерживает ли браузер определенный блок кода — и если нет, то будет выполняться другой код, так что браузер всегда сможет обеспечить работоспособность и предотвратить сбои/ошибки в некоторых браузерах. Например:
```javascript
if ('geolocation' in navigator) {
// Можно использовать navigator.geolocation
} else {
// Обработка отсутствия возможности
}
```
**Feature inference** (предположение возможностей)
Предположение возможностей проверяет на наличие определённых возможностей, как и предыдущий подход, но использует другую функцию, которая предполагает, что определённая возможность уже существует, например:
```javascript
if (document.getElementsByTagName) {
element = document.getElementById(id);
}
```
Этот подход не рекомендуеся. Первый подход более надёжен.
**Строка User Agent**
Это строка, сообщаемая браузером, которая позволяет узлам сетевого протокола определить тип приложения, операционную систему, поставщика программного обеспечения или версию программного обеспечения пользователя, от которого исходит запрос. Доступ к ней можно получить через `navigator.userAgent`. Тем не менее строка User Agent сложна для обработки и может быть подделана. Например, браузер Chrome идентифицируется как Chrome и как Safari, нужно проверить на наличие строки Safari и отсутствие строки Chrome. Следует избегать этот метод.
---
<div align="right">
<a href="13.md">Предыдущий вопрос</a> | <a href="15.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/15.md
================================================
### Расскажите об Ajax как можно более подробно.
Ajax (аббревиатура от "Asynchronous Javascript And Xml) - технология обращения к серверу без перезагрузки страницы.
За счёт этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.
Использовать XML не обязательно, под AJAX подразумевают любое общение с сервером без перезагрузки страницы, организованное при помощи JavaScript.
**Элементы интерфейса**
AJAX полезен для форм и кнопок, связанных с элементарными действиями: добавить в корзину, подписаться, и т.п.
**Динамическая подгрузка данных**
Например, дерево, которое при раскрытии узла запрашивает данные у сервера.
**Живой поиск**
Классический пример использования AJAX, взятый на вооружение современными поисковыми системами.
Обычно для обмена данными используются форматы:
- JSON - для отправки и получения структурированных данных, объектов.
- XML - если сервер почему-то работает в формате XML, то можно использовать и его.
- HTML/текст - можно и просто загрузить с сервера код HTML или текст для показа на странице.
- Бинарные данные, файлы - гораздо реже, в современных браузерах есть удобные средства для них.
---
<div align="right">
<a href="14.md">Предыдущий вопрос</a> | <a href="16.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/16.md
================================================
### Какие преимущества и недостатки в использовании Ajax?
**Преимущества**
- Повышение интерактивности. Новые данные с сервера могут быть добавлены динамически без перезагрузки всей страницы.
- Сокращение количества подключений к серверу, поскольку сткипты и таблицы стилей нужно запрашивать только один раз.
- Состояние может быть сохранено на странице. Переменные JavaScript и состояние DOM сохраняется, поскольку главная страница контейнера не перезагружается.
**Недостатки**
- Сложнее реализовать добавление динамической веб-страницы в закладки.
- Не работает, если в браузере отключен JavaScript.
- Некоторые поисковые роботы не выполянют JS и не видят данные, загружаемые при помощи JS.
---
<div align="right">
<a href="15.md">Предыдущий вопрос</a> | <a href="17.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/17.md
================================================
### Объясните, как работает JSONP (и почему это не совсем AJAX).
**JSONP** - это способ, часто используемый для обхода политики ограничения домена в браузерах, потому что Ajax-запросы с текущей страницы к серверу, находящемуся в другом домене, запрещены.
JSONP работает, отправляя запрос к серверу в другом домене через тег `<script>` и обычно с параметром запроса callback, например: `https://example.com?callback=printData`. Затем сервер обернет данные внутри функции с именем `printData` и вернет их клиенту.
У клиента должна быть функция `printData` в своей глобальной области видимости, и эта функция будет выполена клиентом, когда будет получен ответ с сервера из другого домена.
JSONP может быть небезопасным. Нужно быть увереным в поставщике данных JSONP.
---
<div align="right">
<a href="16.md">Предыдущий вопрос</a> | <a href="18.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/18.md
================================================
### Вы когда-нибудь использовали шаблонизацию на JavaScript? Если да, то какие библиотеки вы использовали?
Да. Handlebars и JSX. Также сейчас можно использовать строковые литералы шаблонов ES2015 в качестве быстрого способа создания шаблонов.
```javascript
const template = `<div>My name is: ${name}</div>`;
```
---
<div align="right">
<a href="17.md">Предыдущий вопрос</a> | <a href="19.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/19.md
================================================
### Расскажите, что такое поднятие (hoisting) переменных.
Поднятие (hoisting) — это термин, используемый для объяснения поведения объявлений переменных в коде. Переменные, объявленные при помощи ключевого слова var, будут перемещены в верхнюю часть текущей области, что мы называем "поднятием". Поднимается только объявление переменной, присвоение значения (если оно имеется) останется на прежнем месте.
```javascript
// объявления переменных через var поднимаются.
console.log(foo); // undefined
var foo = 1;
console.log(foo); // 1
// объявления переменных через let/const НЕ поднимаются.
console.log(bar); // ReferenceError: bar is not defined
let bar = 2;
console.log(bar); // 2
```
При объявлении функции её тело поднимается наверх, в то время как у функциональных выражений (когда переменной присваивается функция) поднимается только переменная.
---
<div align="right">
<a href="18.md">Предыдущий вопрос</a> | <a href="20.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/2.md
================================================
### Объясните, как this работает в JavaScript.
Использование this гарантирует, что функция работает именно с тем объектом, в контексте которого вызвана, если это не стрелочная функция. У стрелочных функций контекст this определяется в момент создания функции.
Значение this называется контекстом вызова и будет определено в момент вызова функции. Значением this является объект перед точкой, в контексте которого вызван метод.
---
<div align="right">
<a href="1.md">Предыдущий вопрос</a> | <a href="3.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/20.md
================================================
### Объясните, что такое всплытие событий (event bubbling)
При наступлении события, обработчики сначала срабатывают на самом вложенном элементе, затем на его родителе, затем выше и так далее, вверх по цепочке вложенности.
Всплытие событий является механизмом, на котором основано делегирование событий.
---
<div align="right">
<a href="19.md">Предыдущий вопрос</a> | <a href="21.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/21.md
================================================
### В чём разница между «атрибутом» (attribute) и «свойством« (property)?
Атрибуты определены в разметке HTML, а свойства определены в DOM. Большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов. Но они не идентичны.
**Атрибуты**
- Всегда являются строками.
- Их имя нечувствительно к регистру.
- Видны в innerHTML.
**Свойства**
- Могут иметь любое значение.
- Названия свойств чувствительны к регистру.
- Работают за счёт того, что DOM-узлы являются объектами JS.
---
<div align="right">
<a href="20.md">Предыдущий вопрос</a> | <a href="22.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/22.md
================================================
### Почему не следует расширять нативные JavaScript-объекты?
Расширение встроенного (нативного) объекта JS означает добавление свойств (функций) к его прототипу. Хотя на первый взгляд это может показаться хорошей идеей, на практике это опасно. Например, ваш код использует несколько библиотек, которые расширяют `Array.prototype`, добавляя один и тот же метод `contains`. В результате код будет работать неверно, если поведение этих двух методов не будет одинаковым.
Единственный случай, при котором можно расширить нативный объект — это при создании полифила, создав собственную реализацию метода, который является частью спецификации JS, но может отстутствовать в устаревших браузерах.
---
<div align="right">
<a href="21.md">Предыдущий вопрос</a> | <a href="23.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/23.md
================================================
### В чём разница между событием document load и событием document DOMContentLoaded?
Событие `DOMContentLoaded` вызывается, когда исходный HTML-документ полностью загружен и обработан, не дожидаясь окончания загрузки таблиц стилей, изображений и скриптов.
Событие `load` происходит только после загрузки DOM и всех зависимых ресурсов.
---
<div align="right">
<a href="22.md">Предыдущий вопрос</a> | <a href="24.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/24.md
================================================
### В чём разница между == и ===?
- `==` - это оператор абстрактного сравнения, а `===` - оператор строгого сравнения. Оператор `==` будет сравнивать на равенство после выполнения любых необходимых преобразований типов. Оператор `===` не будет выполнять преобразование типов, поэтому, если два занчения не одного типа, `===` просто вернет `false`.
---
<div align="right">
<a href="23.md">Предыдущий вопрос</a> | <a href="25.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/25.md
================================================
### Объясните same-origin policy в контексте JavaScript.
**Same-origin policy** (принцип одинакового источника) не позволяет JS выполнять запросы за границами домена. Источник определяется как комбинация схемы URI, имени хоста и номера порта. Этот принцип не позволяет вредоносному сценарию на одной странице получить доступ к конфиденциальным данным на другой через объектную модель документа этой страницы.
---
<div align="right">
<a href="24.md">Предыдущий вопрос</a> | <a href="26.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/26.md
================================================
### Сделайте так, чтобы этот код работал: duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
```javascript
function duplicate(arr) {
return arr.concat(arr);
}
duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
```
---
<div align="right">
<a href="25.md">Предыдущий вопрос</a> | <a href="27.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/27.md
================================================
### Почему тернарный оператор так называется?
"Тернарный" означает три. Троичное выражение принимает три операнда: условие, выражение "then" и выражение "else".
---
<div align="right">
<a href="26.md">Предыдущий вопрос</a> | <a href="28.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/28.md
================================================
### Что делает строчка "use strict";? Какие достоинства и недостатки от её использования?
'use strict' это директива, используемая для включения строгого режима во всем скрипте или отдельных функциях.
**Преимущества**
- Не позволяет случайно создавать глобальные переменные.
- Любое присваивание, которое в обычном режиме завершается неудачей, в строгом режиме выдаст исключение.
- При попытке удалить неудаляемые свойства выдаст исключение (в то время как в нестрогом режиме никакого действия бы не произошло).
- Требует, чтобы имена параметров функции были уникальными.
- this в глобальной области видимости равно undefined.
- Перехватывает распространённые ошибки, выдавая исключения.
- Исключает неочевидные особенности языка.
**Недостатки**
- Нельзя использовать некоторые особенности языка, к котороым привыкли некоторые разработчики.
- Нет доступа к `function.caller` и `function.arguments`.
- Объединение скриптов, написанных в строгом режиме, может вызвать проблемы.
---
<div align="right">
<a href="27.md">Предыдущий вопрос</a> | <a href="29.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/29.md
================================================
### Напишите цикл, который перебирает числа до 100, возвращая "fizz" на числа кратные 3, "buzz" на числа кратные 5 и "fizzbuzz" на числа кратные 3 и 5
```javascript
for (var i = 0; i <= 100; i++) {
if (i % 3 == 0 && i % 5 == 0) {
console.log('fizbuzz');
} else if (i % 3 == 0) {
console.log('fizz');
} else if (i % 5 == 0) {
console.log('buzz');
} else {
console.log(i);
}
}
```
---
<div align="right">
<a href="28.md">Предыдущий вопрос</a> | <a href="30.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/3.md
================================================
### Расскажите, как работает прототипное наследование.
Прототипом объекта А называется объект B, свойства и методы которого доступны для объекта A как собственные.
- У любого объекта есть прототип, на который указывает его свойство `__proto__` и который также является объектом.
- У любой функции есть ассоциированный с ней объект, на который в контексте функции указывает свойство prototype. В него как в контейнер обычно складывают свойства и методы для работы с определенным классом объектов.
- Такой контейнер автоматически становится прототипом объектов, создаваемых функциями-конструкторами
- Для редактирования прототипной ссылки объекта используют метод Object.create() - он перезаписывает объект заново и выставляет в нем ссылку на нужный прототип.
- Ссылки связанных друг с другом объектов образуют прототипную цепочку, которая лежит в основе прототипного наследования. Ярким примером такого наследования является цепочка узлов DOM модели.
Пример
```javascript
let animal = {
eats: true,
};
let rabbit = {
jumps: true,
};
rabbit.__proto__ = animal; // (*)
// теперь мы можем найти оба свойства в rabbit:
alert(rabbit.eats); // true (**)
alert(rabbit.jumps); // true
```
---
<div align="right">
<a href="2.md">Предыдущий вопрос</a> | <a href="4.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/30.md
================================================
### Почему считается хорошим тоном оставить глобальную область видимости (global scope) в нетронутом состоянии?
Каждый скрипт имеет доступ к глобальной области видимости, и если каждый будет использовать глобальное пространство имён для определения своих переменных, то могут возникнуть конфликты.
---
<div align="right">
<a href="29.md">Предыдущий вопрос</a> | <a href="31.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/31.md
================================================
### Для чего используют событие load? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы и в каких случаях бы стали их использовать?
Событие `load` происходит в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в DOM, и все изображения, скрипты и ссылки загрузились.
Событие DOM `DOMContentLoaded` будет запущено после создание DOM для страницы, но не будет ждать окончания загрузки других ресурсов. Оно предпочтительно в тех случаях, когда вам не нужно загружать страницу целиком перед инициализацией.
---
<div align="right">
<a href="30.md">Предыдущий вопрос</a> | <a href="32.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/32.md
================================================
### Расскажите, что такое одностраничное приложение, и как сделать его SEO-оптимизированным.
Текст взят из [этого репозитория](https://github.com/grab/front-end-guide).
В наши дни веб-разработчики называют свои продукты веб-приложениями, а не веб-сайтами. Хотя между этими двумя терминами нет строгой разницы, веб-приложения, как правило, очень интерактивны и динамичны, что позволяет пользователю выполнять действия и получать мгновенный ответ. Традиционно браузер получает HTML с сервера и отображает его. Когда пользователь переходит на другой URL-адрес, требуется полное обновление страницы, и сервер отправляет свежий HTML-код на новую стрницу. Это называется рендерингом на стороне сервера.
Однако в современных SPA вместо этого используется рендеринг на стороне клиента. Браузер загружает начальную страницу с сервера вместе со скриптами (фреймворками, библиотеками, кодом приложения) и таблицами стилей, необходимыми для всего приложения. Когда пользовател переходит на другие страницы, обновление страницы не происходит. URL-адрес страницы обновляется при помощи [HTML History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). Новые данные, необходимые для страницы (обычно в формате JSON), извлекаются браузером посредством запросов AJAX к серверу. Затем SPA динамически обновляет страницу данными через JavaScript, которые были получены при начальной загрузке страницы. Эта модель похожа на работу нативных мобильных приложений.
**Преимущества**
- Приложение становится более отзывчивым, и пользователи не видят мерцание при навигации, т.к. страница не обновляется целиком.
- На сервер поступает меньше HTTP-запросов, так как одни и те же ресурсы не нужно загружать снова для каждой загрузки страницы.
- Чёткое разделение на клиент и сервер. Вы можете легко создавать новые клиентские приложения для разных платформ (например, для мобильных устройств, чат-ботов, умных часов) без необходимости изменять код сервера. Вы также можете изменить технологический стек на клиенте и сервере независимо, пока между ними существует интерфейс.
**Недостатки**
- Более тяжёлая превоначальная загрузка страницы из-за загрузки кода фреймворка, самого приложения и ресурсов.
- Ваш сервер должен быть сконфигурирован так, чтобы он направлял все запросы к единой точке входа, и переложил обязанности по навигации на сторону клиента.
- Для отображения содержимого SPA полагается на JavaScript, не все поисковые системы выполняют JS во время индексации, и они могут не увидеть содержимое страницы. Это вредит поисковой оптимизации (SEO) вашего приложения. Тем не менее, в большинстве случаев, когда вы создаёте приложения, SEO не является наиболее важным фактором, так как не весь контент должен индексироваться поисковыми системами. Чтобы преодолеть это, вы можете либо рендерить своё приложение на стороне сервера, либо использовать такие сервисы, как Prerender, чтобы "рендерить ваш js в браузере, сохранять статический HTML и передавать его поисковым роботам".
---
<div align="right">
<a href="31.md">Предыдущий вопрос</a> | <a href="33.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/33.md
================================================
### Насколько вы опытны в работе с промисами (promises) и/или их полифилами?
Промис — это объект, который может вернуть одно значение в будущем: либо выполненное значение, либо причину, по которой оно не было выполнено (например, произошла ошибка сети). Промис может находиться в одном из 3 возможных состояний: выполнено, отклонено или ожидает выполнения. При использовании промисов можно добавлять callback-функции для обработки выполненного значения или причины отказа.
Некоторыми распространёнными полифилами являются `$.deferred`, Q и Bluebird, но не все они соответствуют спецификации. ES2015 поддерживает промисы "из коробки", и в настоящее время полифилы обычно не нужны.
---
<div align="right">
<a href="32.md">Предыдущий вопрос</a> | <a href="34.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/34.md
================================================
### Какие преимущества и недостатки при использовании промисов вместо колбэков (callbacks)?
**Преимущества**
- Помогает избежать "callback hell", который может быть нечитаемым.
- Упрощает написание последовательного удобочитаемого асинхронного кода с помощью then().
- Упрощает написание параллельного асинхронного кода с помощью Promise.all().
- С использованием промисов можно избежать следующих проблем: колбэк-функция была вызвана слишком рано, поздно или вовсе не была вызвана; функция была вызвана слишком мало или слишком много раз; не удалось передать необходимую среду/параметры; были пропущены ошибки/исключения.
**Недостатки**
- Чуть более сложный код.
- В старых браузерах, где не поддерживается ES2015, нужно загрузить полифил, чтобы их использовать.
---
<div align="right">
<a href="33.md">Предыдущий вопрос</a> | <a href="35.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/35.md
================================================
### Каковы преимущества и недостатки написания JavaScript-кода на языке, который компилируется в JavaScript?
Несколько языков, которые компилируются в JavaScript: CoffeeScript, Elm, ClojureScript, PureScript и TypeScript.
**Преимущества**
- Исправляют некоторые давние проблемы в JavaScript и препятствуют использованию анти-паттернов в JS.
- Позволяют писать более короткий код, предоставляя синтаксичечкий сахар поверх JS.
- Статическая типизация идеальна (в случае TypeScript) для больших проектов, которые необходимо поддерживать с течением времени.
**Недостатки**
- Необходима сборка/компиляция кода, так как браузеры запускают только JS, и код будет скомпилирован в JS перед тем, как он будет передан в браузеры.
- Отладка может быть трудной, если карты кода (source maps) плохо сопоставляются с исходным кодом.
- Большинство разработчиков не знакомы с этими языками и должны будут изучить их. Если ваша команда будет использовать их для своих проектов, это приведет к увеличению затрат.
- Меньшее сообщество (зависит от языка) что означает, что будет труднее найти ресурсы, учебные пособия, библиотеки и инструменты.
- Может отсутствовать поддержка в IDE/редакторе.
- Эти языки всегда будут позади последнего стандарта JS.
---
<div align="right">
<a href="34.md">Предыдущий вопрос</a> | <a href="36.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/36.md
================================================
### Какие инструменты и методы вы используете при отладке кода?
**React и Redux:**
- React Devtools
- Redux Devtools
**JavaScript:**
- Chrome Devtools
- Отладка при помощи старого доброго console.log
---
<div align="right">
<a href="35.md">Предыдущий вопрос</a> | <a href="37.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/37.md
================================================
### Какие языковые конструкции вы используете для итерации по свойствам объекта и элементам массива?
**Для объектов**
- `for-in` циклы — `for (var property in obj)`.
- `Object.keys()` — `Object.keys(obj).forEach(function(property) {…})`.
`Object.keys()` — это статический метод, который возвращает все перечисляемые свойства объекта.
- `Object.getOwnPropertyNames()` — `Object.getOwnPropertyNames(obj).forEach(function(property) {…})`. `Object.getOwnPropertyNames()` — это статический метод, который возвращает все перечисляемые и неперечисляемые свойства объекта.
**Для массивов**
- Циклы `for` — `for(var i = 0; i < arr.length; i++)`;
- `forEach` — `arr.forEach(function(el, index) {…})`.
---
<div align="right">
<a href="36.md">Предыдущий вопрос</a> | <a href="38.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/38.md
================================================
### Объясните разницу между синхронными и асинхронными функциями.
Синхронные функции являются блокирующими, а асинхронные - нет. В синхронных функциях одна операция должна завершиться, прежде чем будет запущена следующая операция. В этом случае скрипт выполняется строго по порядку операций, и выполнение скрипта приостанавливается, если одна из операций занимает очень много времени.
Асинхронные функции обычно принимают callback-функцию в качестве параметра, и выполнение продолжается на следующей строке сразу после вызова асинхронной функции. Callback-функция вызывается только тогда, когда асинхронная операция завершена и стек вызовов пуст. Ресурсоемкие операции, такие как загрузка данных с веб сервера или запросы к базе данных, должны выполняться асинхронно, чтобы основной поток мог продолжать выполнять другие операции вместо блокировки до завершения этой долгой операции (в случае браузеров пользовательский интерфейс будет зависать).
---
<div align="right">
<a href="37.md">Предыдущий вопрос</a> | <a href="39.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/39.md
================================================
### Что такое цикл событий (event loop)? В чём разница между стеком вызовов (call stack) и очередью событий (task queue)?
Цикл событий - это однопоточный цикл, который контролирует стек вызовов и проверяет, есть ли какая-либо работа, которую необходимо выполнить в очереди задач. Если стек вызовов пуст и в очереди задач есть callback-функции, то функция удаляется из очереди и помещается с стек вызовов для выполнения.
Stack - "первым пришел, последним вышел" или "последним пришел, первым вышел", что то же самое. <br>
Queue - "первым пришел, первым ушел".
---
<div align="right">
<a href="38.md">Предыдущий вопрос</a> | <a href="40.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/4.md
================================================
### Что вы думаете о AMD против CommonJS
CommonJS и AMD являются спецификациями (или форматами) о том, как модули и их зависимости должны быть объявлены в приложениях javascript. AMD начинала разработку как подпроект спецификации формата в списке CommonJs, так как эти две группы в итоге имели разные планы, дальнейшая разработка формата AMD была перенесена в amdjs group. CommonJS охватывает более широкий круг проблем и он лучше подходит для развития на стороне сервера с учетом его синхронного характера, а AMD лучше подходит для развития клиентской стороны (браузера) учитывая его асинхронный характер.
---
<div align="right">
<a href="3.md">Предыдущий вопрос</a> | <a href="5.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/40.md
================================================
### Объясните разницу при использовании `foo` в `function foo() {}` и `var foo = function() {}`.
Первое - объявление функции, а второе - функциональное выражение. Ключевое отличие состоит в том, что тело функции при объявлении поднимается наверх, а тело функциональных выражений - нет (они имеют такое же поведение поднятия, что и переменные).
---
<div align="right">
<a href="39.md">Предыдущий вопрос</a> | <a href="41.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/41.md
================================================
### В чём различие между переменными, созданными при помощи let, var и const?
Переменные, объявленные при помощи ключевого слова `var`, относятся к области видимости функции, в которой они созданы. Или, если они созданы вне какой-либо функции, — к глобальному объекту. `let` и `const` относятся к блочной области видимости — это означает, что они доступны только в пределах ближайшего набора фигурных скобок (функция, блок if-else или цикл for).
```javascript
if (true) {
var bar = 'bar';
let baz = 'baz';
const qux = 'qux';
}
console.log(var); // bar
console.log(baz); // ReferenceError: baz is not defined
console.log(qux); // ReferenceError: qux is not defined
```
`var` позволяет поднимать переменные и на них можно ссылаться в коде до их объявления. `let` `const` не позволяют этого и выдают ошибку.
Переопределение переменной с помощью `var` не вызовет ошибку, в отличие от `let` и `const`.
`let` отличается от `const` тем, что изменять значение `const` нельзя.
---
<div align="right">
<a href="40.md">Предыдущий вопрос</a> | <a href="42.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/42.md
================================================
### В чём разница между классом в ES6 и функцией-конструктором в ES5?
```javascript
// ES5 функция-конструктор
function Person(name) {
this.name = name;
}
// ES6 класс
class Person {
constructor(name) {
this.name = name;
}
}
```
Основное отличие в конструкторе возникает при использовании наследования. Если мы хотим создать класс `Student` (который будет являться подклассом класса `Person`) и добавить поле `studentId`, то в дополнение к вышеописанному мы должны сделать следующее:
```javascript
// ES5 функция-конструктор
function Student(name, studentId) {
// Вызов конструктора суперкласса для инициализации производных от суперкласса членов.
Person.call(this, name);
// Инициализация собственных членов подкласса.
this.studentId = studentId;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
// ES6 класс
class Student extends Person {
constructor(name, studentId) {
super(name);
this.studentId = studentId;
}
}
```
Наследование в синтаксисе ES5 является намного более многословным, а в ES6 более понятное и усваиваемое.
---
<div align="right">
<a href="41.md">Предыдущий вопрос</a> | <a href="43.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/43.md
================================================
### Можете ли вы привести пример использования стрелочных функции =>? Чем они отличаются от других функций?
Преимуществом стрелочных функций является упрощение синтаксиса, необходимого для создания функций, без необходимости использования ключевого слова `function`. `this` внутри стрелочных функций также привязано к замыкающей области видимости, в отличие от обычных функций, где `this` определяется контекстом, в котором они вызываются. Лексически привязанное `this` полезно при вызове callback-функций, особенно в компонентах React.
---
<div align="right">
<a href="42.md">Предыдущий вопрос</a> | <a href="44.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/44.md
================================================
### Дайте определение функции высшего порядка.
Функция высшего порядка — это любая функция, которая принимает одну или несколько функций в качестве аргументов, которые она использует для работы с данными, и/или возвращает функцию в качестве результата.
Классическим примером является метод `map`, который принимает массив и функцию в качестве аргументов. Затем `map` использует эту функцию для преобразования каждого элемента в массиве, возвращая новый массив с преобразованными данными. Другими популярными примерами в JS являются `forEach`, `filter` и `reduce`.
---
<div align="right">
<a href="43.md">Предыдущий вопрос</a> | <a href="45.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/45.md
================================================
### Можете ли вы привести пример деструктуризации объекта или массива?
Деструктуризация - это выражение, доступное в ES6, которое предоставяет краткий и удобный способ извлекать значения из объектов или массивов и помещать их в отдельные переменные.
**Деструктуризация массива**
```javascript
const rgb = [255, 200, 0];
const [red, green, blue] = rgb;
console.log(`R: ${red}, G: ${green}, B: ${blue}`);
```
**Деструктуризация объекта**
```javascript
const student = {
firstname: 'Glad',
lastname: 'Chinda',
country: 'Nigeria',
};
const { firstname, lastname, country } = student;
console.log(firstname, lastname, country); // Glad Chinda Nigeria
```
---
<div align="right">
<a href="44.md">Предыдущий вопрос</a> | <a href="46.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/46.md
================================================
### Шаблонные строки в ES6 намного упрощают создание строк, можете ли вы привести пример их использования?
```javascript
var person = { name: 'Tyler', age: 28 };
console.log(`Hi, my name is ${person.name} and I am ${person.age} years old!`);
```
---
<div align="right">
<a href="45.md">Предыдущий вопрос</a> | <a href="47.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/47.md
================================================
### Можете ли вы привести пример каррированной функции (curry function) и в чём их преимущество?
Каррирование — это паттерн, где функция с более чем одним параметром разбивается на несколько функций, которые при последовательном вызове будут накапливать все необходимые параметры по одному. Этот метод может быть полезен для облегчения чтения и написания кода, написанного в функциональном стиле. Каррированная функция должна начинаться как одна функция, а затем разбиваться на последовательность функций, каждая из которых принимает один параметр.
```javascript
function curry(fn) {
if (fn.length === 0) {
return fn;
}
function _curried(depth, args) {
return function (newArgument) {
if (depth - 1 === 0) {
return fn(...args, newArgument);
}
return _curried(depth - 1, [...args, newArgument]);
};
}
return _curried(fn.length, []);
}
function add(a, b) {
return a + b;
}
var curriedAdd = curry(add);
var addFive = curriedAdd(5);
var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
```
---
<div align="right">
<a href="46.md">Предыдущий вопрос</a> | <a href="48.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/48.md
================================================
### В чём преимущества использования spread оператора и чем он отличается от rest оператора?
**Spread** оператор синтаксиса ES6 очень полезен при написании кода в функциональном стиле, поскольку мы можем легко создавать копии массивов или объектов, не прибегая к `Object.create`, `slice` или функции библиотеки.
```javascript
function putSmthgInAnyArray(arr) {
return [...arr, 'Smthg'];
}
const result = putSmthgInAnyArray([1, 2, 3]); // [1, 2, 3, 'Smthg'];
const person = {
name: 'Todd',
age: 29,
};
const copyOfTodd = { ...person };
```
**Rest** оператор синтаксиса ES6 позволяет в сокращённом виде указывать неопределённое количество аргументов, передаваемых в функцию. Можно сказать, что он противоположен spread оператору: собирает данные и добавляет их в массив, вместо разделения массива данных. Он используется в аргументах функций, а также при деструктуризации массивов и объектов.
```javascript
function addFiveToABunchOfNumbers(...numbers) {
return numbers.map((x) => x + 5);
}
const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9); // [9, 10, 11, 12, 13, 14]
const [a, b, ...rest] = [1, 2, 3, 4]; // a:1, b:2, rest:[3, 4]
const { e, f, ...others } = {
e: 1,
f: 2,
g: 3,
h: 4,
}; // e:1, f: 2, others: { g:3, h:4 }
```
---
<div align="right">
<a href="47.md">Предыдущий вопрос</a> | <a href="49.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/49.md
================================================
### Каким образом можно обмениваться кодом между файлами?
Это зависит от среды выполнения JavaScript.
На клиенте (в среде барузера), пока переменные/функции объявлены в глобальной области видимости (window), все скрипты могут на них ссылаться. В качестве альтернативы, используйте Asynchronous Module Definition (AMD) через RequireJS для модульного подхода.
На сервере (Node.js) обычно используется CommonJS. Каждый файл считается модулем, и он может экспортировать переменные и функции, добавляя их к объекту `module.exports`.
ES2015 позволяет использовать модульный синтаксис, который призван заменить как AMD, так и CommonJS. В конечном итоге он будет поддерживаться как в браузере, так и в Node.
---
<div align="right">
<a href="48.md">Предыдущий вопрос</a> | <a href="50.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/5.md
================================================
### Объясните, почему это не является IIFE: function foo(){ }();
В этом примере будет выведено исключение SyntaxError, в данном случае это объявление функции и скобки в конце не будут отнесены к функции, так как они играют роль оператора группировки. Такие скобки не могут быть пустыми, поэтому будет выброшено исключение. Для того чтобы переделать этот пример под немедленно вызываему функцию - нужно обернуть функциональное выражение в скобки и удалить именование функции.
---
<div align="right">
<a href="4.md">Предыдущий вопрос</a> | <a href="6.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/50.md
================================================
### Для чего используются статические члены класса?
Члены статических классов (свойства/методы) не привязаны к конкретному экземпляру класса и имеют одинаковое значение вне зависимости от того, какой экземпляр ссылается на них. Статические свойства обычно являются конфигурационными переменными, а статические методы обычно являются чисто служебынми функциями, которые не зависят от состояния экземпляра.
---
<div align="right">
<a href="49.md">Предыдущий вопрос</a> | <a href="51.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/51.md
================================================
### В чем разница между async и defer?
Специальные атрибуты `async` и `defer` используются для того, чтобы пока грузится внешний скрипт – браузер показал остальную (следующую за ним) часть страницы. Без них этого не происходит.
Разница между `async` и `defer`: атрибут `defer` сохраняет относительную последовательность скриптов, а `async` – нет. Кроме того, `defer` всегда ждёт, пока весь HTML-документ будет готов, а `async` – нет.
---
<div align="right">
<a href="50.md">Предыдущий вопрос</a> | <a href="52.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/52.md
================================================
### В чём разница между изменяемым (mutable) и неизменяемым (immutable) объектом?
**Изменяемый объект** - это объект, состояние которого может быть изменено после его создания.
**Неизменяемый объект** - это объект, состояние которого не может быть изменено после его создания.
В JavaScript:
- Неизменяемые типы: `Number`, `String`, `Boolean`, `null`, `undefined`
- Изменяемые типы: все объекты по умолчанию (`Object`, `Array`, `Map`, `Set` и т.д.)
Неизменяемость может быть достигнута с помощью:
- `Object.freeze()` - предотвращает добавление новых свойств и изменение существующих
- `Object.seal()` - предотвращает добавление новых свойств, но позволяет изменять существующие
- Использование библиотек, таких как Immutable.js
---
<div align="right">
<a href="51.md">Предыдущий вопрос</a>
</div>
================================================
FILE: JavaScript/6.md
================================================
### В чём различие между переменными, значение которых: null, undefined и не объявлено?
**undefined** - это переменная, которая была объявлена, но у нее нет значения.
**null** - значение переменной.
**undeclared** - переменная, объявленная без ключевого слова 'var'.
Для проверки можно использовать console.log() и typeof.
---
<div align="right">
<a href="5.md">Предыдущий вопрос</a> | <a href="7.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/7.md
================================================
### Что такое замыкание и как/для чего его используют?
Если одна функция определена внутри другой, то внутренняя имеет доступ к ОВ внешней. Это называется замыканием (а также "лексической ОВ" или "статическая".
При выполнении функции используется та область видимости переменных, которая существовала на момент объявления этой функции. Это лексическая область видимости.
---
<div align="right">
<a href="6.md">Предыдущий вопрос</a> | <a href="8.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/8.md
================================================
### Можете ли вы описать основное различие между циклом forEach и циклом .map()? И в каких случаях каждый из них используется?
forEach перебирает массив и не изменяет его.
.map() создает копию массива и изменяет копию.
---
<div align="right">
<a href="7.md">Предыдущий вопрос</a> | <a href="9.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/9.md
================================================
### В каких случаях обычно используются анонимные функции?
Анонимные функции часто используются для выполнения какого-то кода в коллбэках, где не нужно создавать отдельную именную функцию под это действие.
---
<div align="right">
<a href="8.md">Предыдущий вопрос</a> | <a href="10.md">Следующий вопрос</a>
</div>
================================================
FILE: JavaScript/README.md
================================================
## Вопросы по Javascript
- [Объясните делегирование событий.](1.md)
- [Объясните, как this работает в JavaScript.](2.md)
- [Расскажите, как работает прототипное наследование.](3.md)
- [Что вы думаете о AMD против CommonJS?](4.md)
- [Объясните, почему это не является IIFE: function foo(){ }();. Что необходимо изменить, чтобы это стало IIFE?](5.md)
- [В чём различие между переменными, значение которых: null, undefined и не объявлено? Как бы вы проверили их на каждое из этих значений?](6.md)
- [Что такое замыкание и как/для чего его используют?](7.md)
- [Можете ли вы описать основное различие между циклом forEach и циклом .map()? И в каких случаях каждый из них используется?](8.md)
- [В каких случаях обычно используются анонимные функции?](9.md)
- [В чем разница между host-объектами и нативными объектами?](10.md)
- [В чем разница между: function Person(){}, var person = Person(), и var person = new Person()?](11.md)
- [В чем разница между .call и .apply?](12.md)
- [Что делает и для чего нужна функция Function.prototype.bind?](13.md)
- [В чем разница между feature detection (определение возможностей браузера), feature inference (предположение возможностей) и анализом строки user-agent?](14.md)
- [Расскажите об Ajax как можно более подробно.](15.md)
- [Какие преимущества и недостатки в использовании Ajax?](16.md)
- [Объясните, как работает JSONP (и почему это не совсем AJAX).](17.md)
- [Вы когда-нибудь использовали шаблонизацию на JavaScript? Если да, то какие библиотеки вы использовали?](18.md)
- [Расскажите, что такое поднятие (hoisting).](19.md)
- [Объясните, что такое всплытие событий (event bubbling).](20.md)
- [В чём разница между «атрибутом» (attribute) и «свойством« (property)?](21.md)
- [Почему не следует расширять нативные JavaScript-объекты?](22.md)
- [В чём разница между событием document load и событием document DOMContentLoaded?](23.md)
- [В чём разница между == и ===?](24.md)
- [Объясните same-origin policy в контексте JavaScript.](25.md)
- [Сделайте так, чтобы этот код работал: duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]](26.md)
- [Почему тернарный оператор так называется?](27.md)
- [Что делает строчка "use strict";? Какие достоинства и недостатки от ее использования?](28.md)
- [Напишите цикл, который перебирает числа до 100, возвращая "fizz" на числа кратные 3, "buzz" на числа кратные 5 и "fizzbuzz" на числа кратные 3 и 5](29.md)
- [Почему считается хорошим тоном оставить глобальную область видимости (global scope) в нетронутом состоянии?](30.md)
- [Для чего используют событие load? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы, и в каких случаях бы стали их использовать?](31.md)
- [Расскажите, что такое одностраничное приложение, и как сделать его SEO-оптимизированным.](32.md)
- [Насколько вы опытны в работе с промисами (promises) и/или их полифилами?](33.md)
- [Какие преимущества и недостатки при использовании промисов вместо колбэков (callbacks)?](34.md)
- [Каковы преимущества и недостатки написания JavaScript-кода на языке, который компилируется в JavaScript?](35.md)
- [Какие инструменты и методы вы используете при отладке кода?](36.md)
- [Какие языковые конструкции вы используете для итерации по свойствам объекта и элементам массива?](37.md)
- [Объясните разницу между синхронными и асинхронными функциями.](38.md)
- [Что такое цикл событий (event loop)? В чём разница между стеком вызовов (call stack) и очередью событий (task queue)?](39.md)
- [Объясните разницу при использовании foo в function foo() {} и var foo = function() {}](40.md)
- [В чём различие между переменными, созданными при помощи let, var и const?](41.md)
- [В чём разница между классом в ES6 и функцией-конструктором в ES5?](42.md)
- [Можете ли вы привести пример использования стрелочных функции =>? Чем они отличаются от других функций?](43.md)
- [Дайте определение функции высшего порядка.](44.md)
- [Можете ли вы привести пример деструктуризации объекта или массива?](45.md)
- [Шаблонные строки в ES6 намного упрощают создание строк, можете ли вы привести пример их использования?](46.md)
- [Можете ли вы привести пример каррированной функции (curry function) и в чём их преимущество?](47.md)
- [В чём преимущества использования spread оператора и чем он отличается от rest оператора?](48.md)
- [Каким образом можно обмениваться кодом между файлами?](49.md)
- [Для чего используются статические члены класса?](50.md)
- [В чем разница между async и defer?](51.md)
- [В чём разница между изменяемым (mutable) и неизменяемым (immutable) объектом?](52.md)
================================================
FILE: Network/1.md
================================================
### Почему лучше загружать ресурсы для сайта с нескольких доменов?
Браузеры имеют ограничение на количество одновременно загружаемых ресурсов с одного домена. В современных браузерах это количество равно 6, но есть способы обойти ограничение в настройках браузера.
Использование дополнительных доменов для раздачи статических ресурсов позволяет браузеру загружать их параллельно, что приведёт к повышению быстродействия фронтенда.
Подробнее по ссылке: [https://web-standards.ru/articles/front-end-performance/#section-5](https://web-standards.ru/articles/front-end-performance/#section-5)
---
<div align="right">
<a href="2.md">Следующий вопрос</a>
</div>
================================================
FILE: Network/2.md
================================================
### Опишите весь процесс, начиная с ввода адреса сайта в адресную строку до окончания его загрузки на экране.
1. Вы вводите адрес в строку адреса в браузере.
2. Браузер ищет в своём кэше запись о DNS сервере соответствующего IP-адреса.
DNS (Domain Name System) — это база данных с url-адресами сайтов и связанными с ними IP. Каждый URL в интернете имеет свой уникальный IP. IP адрес принадлежит компьютеру, на котором находится сервер запрашиваемого вебсайта.
Чтобы найти запись DNS браузер проверяет 4 кэша:
- Кэш браузера. У браузера есть хранилище DNS записей для сайтов, на которых вы уже были.
- Кэш операционной системы. Если в кэше браузера нет записи о DNS, браузер делает системный запрос к операционной системе, у которой есть свой кэш DNS записей.
- Кэш роутера. Если браузер ничего не нашёл на компьютере, он делает запрос к роутеру, у которого есть свой DNS кэш.
- Кэш провайдера. Если предыдущие попытки закончились неудачей, браузер обращается к кэшу провайдера.
3. Если запрашиваемого URL нет в кэше, DNS сервер провайдера отправляет DNS запрос серверу, на котором хостится необходимый вебсайт.
DNS запрос ищет нужный IP на разных DNS серверах. Такой поиск называется рекурсивным, потому что переходит от сервера к серверу, пока не найдет IP или не вернёт ошибку о невозможности его найти. DNS запросы отправляют небольшие пакеты данных с информацией о содержимом запроса и IP адресом, откуда это запрос пришел (IP адрес провайдера). Если эти пакеты теряются, выводится ошибка. При нахождении нужного DNS сервера пакеты берут верный IP адрес и возвращают его браузеру.
4. Браузер инициализирует TCP соединение с сервером.
Как только браузер получил верный IP адрес, он создаёт соединение для передачи информации. В большинстве случаев браузеры используют TCP протокол для любых HTTP запросов. Для соединения с сервером используется процесс _TCP/IP three-way handshake_ - трёхшаговый процесс, в котором клиент и сервер обмениваются SYN (synchronize) и ACK (acknowledge) сообщениями.
- Компьютер клиента посылает серверу SYN запрос, чтобы узнать открыт ли сервер для новых соединений.
- Если у сервера есть открытые порты для новых соединений, он отвечает пакетом SYN/ACK.
- Клиент получает от сервера SYN/ACK пакет и подтверждает соединение, отослав ACK пакет.
После этого TCP соединение установлено.
5. Браузер посылает HTTP запрос к web серверу.
Браузер отсылает GET запрос для нужной веб страницы. Если мы отправляем форму, это будет POST запрос.
Этот запрос содержит дополнительную информацию о браузере (заголовок User-Agent), типы запросов, которые он может принять (Accept заголовок) и заголовки соединения (нужно ли сохранять соединение). Также в запросе будет информация о cookies, которые браузер хранит для этого домена.
6. Сервер обрабатывает запрос и даёт ответ.
Сервер получает запрос и передаёт его обработчику запросов для чтения и создания ответа. Обработчик запроса — это программа (написанная на PHP, Ruby и т.д.), которая читает запрос, заголовки и cookies, распознаёт, какая информация запрошена и обновляет данные на сервере, если необходимо. Далее собирается ответ в определённом формате (JSON, XML, HTML).
7. Сервер высылает HTTP ответ.
Ответ сервера содержит запрошенную веб страницу вместе с кодом статуса, типом сжатия (Content Encoding), информацией о том, как кэшировать страницу, cookies и т.д.
В первой строчке ответа находится код статуса. Существует 5 типов:
- 1xx содержит только информационное сообщение
- 2xx указывает на успешный запрос
- 3xx переадресует клиента на другой URL
- 4xx указывает на ошибку на стороне клиента
- 5xx указывает на ошибку на стороне сервера
Таким образом, если вы столкнулись с ошибкой, вы можете посмотреь на HTTP ответ и проверить код, который вы получили.
8. Браузер отображает HTML контент.
Браузер отображает HTML контент в несколько стадий.
1. Рендерит HTML разметку.
2. Проверяет HTML теги и отсылает GET запросы за дополнительными элементами (изображениями, css-файлами, JavaScript и т.д.). Эти файлы браузер кэширует, чтобы не скачивать их, когда вы зайдёте на этот сайт в следующий раз.
3. Отображает запрошенную страницу у вас в браузере.
---
<div align="right">
<a href="1.md">Предыдущий вопрос</a> | <a href="3.md">Следующий вопрос</a>
</div>
================================================
FILE: Network/3.md
================================================
### В чём различия между Long-Polling, Websockets и Server-Sent Events?
**Ajax Long-Polling**
1. Клиент запрашивает веб-страницу с сервера, используя обычный HTTP.
2. Клиент получает запрошенную веб-страницу и выполняет JavaScript на странице, которая запрашивает файл с сервера.
3. Сервер не сразу отвечает запрошенной информацией, а ждёт, пока не появится новая информация.
4. Когда появляется новая информация, сервер отвечает новой информацией.
5. Клиент получает новую информацию и немедленно отправляет другой запрос на сервер, перезапуская процесс.
**HTML Websockets**
1. Клиент запрашивает веб-страницу с сервера, используя обычный HTTP.
2. Клиент получает запрошенную веб-страницу и выполняет JavaScript на странице, которая открывает соединение с сервером.
3. Сервер и клиент теперь могут отправлять друг другу сообщения, когда доступны новые данные (с обеих сторон).
- Трафик в реальном времени от сервера к клиенту и от клиента к серверу.
- С помощью WebSocket можно подключиться к серверу из другого домена.
- Также можно использовать сторонний сервер веб-сокетов. Таким образом, вам нужно будет реализовать только клиентскую часть.
**Server-Sent Events**
1. Клиент запрашивает веб-страницу с сервера, используя обычный HTTP.
2. Клиент получает запрошенную веб-страницу и выполняет JavaScript на странице, которая открывает соединение сервером.
3. Сервер отправляет событие клиенту, когда появляется новая информация.
- Трафик в реальном времени от сервера к клиенту.
- Соединения с серверами из других доменов возможны только при правильных настройках CORS.
---
<div align="right">
<a href="2.md">Предыдущий вопрос</a> | <a href="4.md">Следующий вопрос</a>
</div>
================================================
FILE: Network/4.md
================================================
### Опишите разницу между следующими заголовками HTTP-запросов и ответов: Expires, Date, Age и If-Modified-…, Do Not Track, Cache-Control, Transfer-Encoding, ETag, X-Frame-Options.
- **Expires** - Дата предполагаемого истечения срока актуальности сущности.
- **Date** - Дата генерации отклика.
- **Age** - Количество секунд с момента модификации ресурса.
- **If-Modified-...** - Выполнять метод, если сущность изменилась с указанного момента.
- **Cache-Control** - Основные директивы для управления кэшированием.
- **Transfer-Encoding** - Список способов кодирований, которые были применены к сообщению для передачи.
- **Etag** - Тег (уникальный идентификатор) версии сущности, используемый при кэшировании.
- **Do Not Track** - Указывает, разрешает ли пользователь отслеживать себя.
- **X-Frame-Options** - Указывает, разрешает ли пользователь рендерить на странице содержимое `<frame>`, `<iframe>`, `<embed>`, `<object>`.
---
<div align="right">
<a href="3.md">Предыдущий вопрос</a> | <a href="5.md">Следующий вопрос</a>
</div>
================================================
FILE: Network/5.md
================================================
### Что такое HTTP-методы? Перечислите все HTTP-методы, которые вы знаете, и объясните их.
HTTP определяет множество методов запроса, которые указывают, какое желаемое действие выполнится для данного ресурса. Несмотря на то, что их названия могут быть существительными, эти методы запроса иногда называются HTTP глаголами. Каждый реализует свою семантику, но каждая группа команд разделяет общие свойства: так методы могут быть безопасными, идемпотентными или кэшируемыми.
**GET**
Метод GET запрашивает представление ресурса. Запросы с использованием этого метода могут только извлекать данные.
**HEAD**
Метод HEAD запрашивает ресурс так же, как и метод GET, но без тела ответа.
**POST**
POST используется для отправки сущностей к определённому ресурсу. Часто вызывает изменение состояния или какие-то побочные эффекты на сервере.
**PUT**
PUT заменяет все текущие представления ресурса данными запроса.
**DELETE**
DELETE удаляет указанный ресурс.
**CONNECT**
CONNECT устанавливает "туннель" к серверу, определённому по ресурсу.
**OPTIONS**
OPTIONS используется для описания параметров соединения с ресурсом.
**TRACE**
TRACE выполняет вызов возвращаемого тестового сообщения с ресурса.
**PATCH**
PATCH используется для частичного изменения ресурса.
---
<div align="right">
<a href="4.md">Предыдущий вопрос</a>
</div>
================================================
FILE: Network/README.md
================================================
## Вопросы по сетям
* [Почему лучше загружать ресурсы для сайта с нескольких доменов?](1.md)
* [Опишите весь процесс, начиная с ввода адреса сайта в адресную строку до окончания его загрузки на экране.](2.md)
* [В чём различия между Long-Polling, Websockets и Server-Sent Events?](3.md)
* [Опишите следующие заголовки HTTP-запросов и ответов: Разницу между Expires, Date, Age и If-Modified-…, Do Not Track, Cache-Control, Transfer-Encoding, ETag, X-Frame-Options](4.md)
* [Что такое HTTP-методы? Перечислите все HTTP-методы, которые вы знаете, и объясните их.](5.md)
================================================
FILE: Performance/1.md
================================================
### Какие инструменты вы используете, чтобы найти недостатки в производительности вашего кода?
1. Chrome Dev Tools — Вкладки Performance и Network.
---
<div align="right">
<a href="2.md">Следующий вопрос</a>
</div>
================================================
FILE: Performance/2.md
================================================
### Какие вы знаете способы улучшения производительности при скроллинге на вебсайте?
Для улучшения производительности при скроллинге можно сделать:
1. Загружать изображения по мере их появленя - Lazy load.
2. Кэшировать изображения по приоритету загрузки.
3. Оптимизировать изображения.
---
<div align="right">
<a href="1.md">Предыдущий вопрос</a> | <a href="3.md">Следующий вопрос</a>
</div>
================================================
FILE: Performance/3.md
================================================
### Объясните разницу между раскладкой (layout), painting и композитингом (compositing).
- Layout: расчёт места для объекта на основе правил.
- Paint: рисовка пикселей для отображения визуальных элементов.
- Compositing: рисовка слоёв в правильном порядке (правильное наложение и т.д.).
---
<div align="right">
<a href="2.md">Предыдущий вопрос</a>
</div>
================================================
FILE: Performance/README.md
================================================
## Вопросы по производительности
* [Какие инструменты вы используете, чтобы найти недостатки в производительности вашего кода?](1.md)
* [Какие вы знаете способы улучшения производительности при скроллинге на вебсайте?](2.md)
* [Объясните разницу между раскладкой (layout), painting и композитингом (compositing).](3.md)
================================================
FILE: README.md
================================================
# Вопросы (с ответами) кандидату на должность frontend разработчика
В этом репозитории собраны ответы на вопросы кандидату на должность frontend разработчика. <br>
Вопросы взяты отсюда: [link](https://h5bp.org/Front-end-Developer-Interview-Questions/translations/russian/) <br>
Gh-pages: [link](https://fedorovalexander.github.io/Front-end-Job-Interview-Questions/)
## Содержание
* [Общие вопросы](General/README.md)
* [Вопросы по CSS](CSS/README.md)
* [Вопросы по JavaScript](JavaScript/README.md)
* [Вопросы по тестированию](Testing/README.md)
* [Вопросы по производительности](Performance/README.md)
* [Вопросы по сетям](Network/README.md)
* [Примеры кода на JavaScript](Coding/README.md)
================================================
FILE: Testing/1.md
================================================
### Какие инструменты вы будете использовать для тестирования работоспособности своего кода?
1. Browserstack для тестирования кроссбраузерности.
---
<div align="right">
<a href="2.md">Следующий вопрос</a>
</div>
================================================
FILE: Testing/2.md
================================================
### В чём различие между юнит-тестами и функциональными/интеграционными тестами?
- Юнит-тест тестирует на правильную работу небольшие куски кода.
- Функциональный тест проверяет, что результат выполнения функции соответствует введённым данным.
- Интеграционный тест проверяет несколько частей кода на слаженную совместную работу.
---
<div align="right">
<a href="1.md">Предыдущий вопрос</a> | <a href="3.md">Следующий вопрос</a>
</div>
================================================
FILE: Testing/3.md
================================================
### Для чего предназначены линтеры (code style linting tool)?
Линтеры нужны для проверки кода на программные и стилистические ошибки.
---
<div align="right">
<a href="2.md">Предыдущий вопрос</a>
</div>
================================================
FILE: Testing/README.md
================================================
## Вопросы по тестированию
* [Какие инструменты вы будете использовать для тестирования работоспособности своего кода?](1.md)
* [В чём различие между юнит-тестами и функциональными/интеграционными тестами?](2.md)
* [Для чего предназначены линтеры (code style linting tool)?](3.md)
================================================
FILE: _config.yml
================================================
theme: jekyll-theme-midnight
gitextract_9rh0t374/ ├── CSS/ │ ├── 1.md │ ├── 10.md │ ├── 11.md │ ├── 12.md │ ├── 13.md │ ├── 14.md │ ├── 15.md │ ├── 16.md │ ├── 17.md │ ├── 18.md │ ├── 19.md │ ├── 2.md │ ├── 20.md │ ├── 21.md │ ├── 22.md │ ├── 23.md │ ├── 24.md │ ├── 25.md │ ├── 26.md │ ├── 27.md │ ├── 28.md │ ├── 3.md │ ├── 4.md │ ├── 5.md │ ├── 6.md │ ├── 7.md │ ├── 8.md │ ├── 9.md │ └── README.md ├── Coding/ │ └── README.md ├── General/ │ ├── 1.md │ ├── 10.md │ ├── 11.md │ ├── 12.md │ ├── 13.md │ ├── 14.md │ ├── 15.md │ ├── 16.md │ ├── 2.md │ ├── 3.md │ ├── 4.md │ ├── 5.md │ ├── 6.md │ ├── 7.md │ ├── 8.md │ ├── 9.md │ └── README.md ├── HTML/ │ ├── 1.md │ ├── 10.md │ ├── 11.md │ ├── 2.md │ ├── 3.md │ ├── 4.md │ ├── 5.md │ ├── 6.md │ ├── 7.md │ ├── 8.md │ ├── 9.md │ └── README.md ├── JavaScript/ │ ├── 1.md │ ├── 10.md │ ├── 11.md │ ├── 12.md │ ├── 13.md │ ├── 14.md │ ├── 15.md │ ├── 16.md │ ├── 17.md │ ├── 18.md │ ├── 19.md │ ├── 2.md │ ├── 20.md │ ├── 21.md │ ├── 22.md │ ├── 23.md │ ├── 24.md │ ├── 25.md │ ├── 26.md │ ├── 27.md │ ├── 28.md │ ├── 29.md │ ├── 3.md │ ├── 30.md │ ├── 31.md │ ├── 32.md │ ├── 33.md │ ├── 34.md │ ├── 35.md │ ├── 36.md │ ├── 37.md │ ├── 38.md │ ├── 39.md │ ├── 4.md │ ├── 40.md │ ├── 41.md │ ├── 42.md │ ├── 43.md │ ├── 44.md │ ├── 45.md │ ├── 46.md │ ├── 47.md │ ├── 48.md │ ├── 49.md │ ├── 5.md │ ├── 50.md │ ├── 51.md │ ├── 52.md │ ├── 6.md │ ├── 7.md │ ├── 8.md │ ├── 9.md │ └── README.md ├── Network/ │ ├── 1.md │ ├── 2.md │ ├── 3.md │ ├── 4.md │ ├── 5.md │ └── README.md ├── Performance/ │ ├── 1.md │ ├── 2.md │ ├── 3.md │ └── README.md ├── README.md ├── Testing/ │ ├── 1.md │ ├── 2.md │ ├── 3.md │ └── README.md └── _config.yml
Condensed preview — 128 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (171K chars).
[
{
"path": "CSS/1.md",
"chars": 1040,
"preview": "### Что такое специфичность CSS-селекторов и как она работает?\n\nВ следующем списке типы селекторов расположены по возрас"
},
{
"path": "CSS/10.md",
"chars": 307,
"preview": "### Использовали ли вы систему сеток, и если да, то какую вы предпочитаете?\n\nИспользовал сетку Bootstrap, Material UI, C"
},
{
"path": "CSS/11.md",
"chars": 465,
"preview": "### Приходилось ли вам использовать или реализовывать медиазапросы или вёрстку под мобильные устройства?\n\nДа, приходилос"
},
{
"path": "CSS/12.md",
"chars": 534,
"preview": "### Вы знакомы со стилизацией SVG?\n\nСтилизация SVG отличается от стилизации HTML. SVG основан на XML и стилевые свойства"
},
{
"path": "CSS/13.md",
"chars": 562,
"preview": "### Можете ли вы привести пример свойства `@media`, отличного от screen?\n\nМедиа запросы поволяют адаптировать страницу д"
},
{
"path": "CSS/14.md",
"chars": 415,
"preview": "### На что нужно обратить внимание при написании эффективного CSS?\n\nДля написания эффективного CSS должна быть система. "
},
{
"path": "CSS/15.md",
"chars": 487,
"preview": "### Какие преимущества/недостатки в использовании CSS препроцессоров? Опишите, что вам нравится и не нравится в CSS преп"
},
{
"path": "CSS/16.md",
"chars": 254,
"preview": "### Как вы реализуете макет, который использует нестандартные шрифты?\n\nБуду подключать шрифты с помощью `@font-face` для"
},
{
"path": "CSS/17.md",
"chars": 440,
"preview": "### Объясните, как браузер определяет, на какие элементы накладывать CSS стили?\n\nБраузер сравнивает селекторы справа нал"
},
{
"path": "CSS/18.md",
"chars": 462,
"preview": "### Объясните, что такое псевдоэлементы и для чего они нужны.\n\nПсевдоэлемент - это ключевое слово, добавляемое к селекто"
},
{
"path": "CSS/19.md",
"chars": 661,
"preview": "### Объясните своими словами, что такое блочная модель.\n\nБлочная модель отвечает за определение того, сколько места займ"
},
{
"path": "CSS/2.md",
"chars": 756,
"preview": "### В чем разница между «сбросом» и «нормализацией» CSS? Что бы вы выбрали и почему?\n\n**CSS Reset**:\n\n- Удаляет все встр"
},
{
"path": "CSS/20.md",
"chars": 596,
"preview": "### Что делает `* { box-sizing: border-box; }`? В чём его преимущества?\n\nПо умолчанию все элементы имеют box-sizing: con"
},
{
"path": "CSS/21.md",
"chars": 404,
"preview": "### Что означает свойство display и можете ли вы привести несколько примеров его использования?\n\nМногоцелевое свойство, "
},
{
"path": "CSS/22.md",
"chars": 1173,
"preview": "### В чём разница между строчным и блочно-строчным элементом?\n\nДля лучшего сравнения я добавил блочный элемент.\n\n**block"
},
{
"path": "CSS/23.md",
"chars": 1030,
"preview": "### В чём разница между относительным, фиксированным, абсолютным и статически позиционированным элементом?\n\n- **static**"
},
{
"path": "CSS/24.md",
"chars": 403,
"preview": "### Какими CSS-фреймворками вы пользовались? Что бы вы хотели в них изменить/улучшить?\n\nИспользовал Bootstrap. CSS-фрейм"
},
{
"path": "CSS/25.md",
"chars": 291,
"preview": "### Пользовались ли вы Flexbox или Grid?\n\nДа. Использую flexbox, когда не нужно поддерживать Internet Explorer ниже 11 в"
},
{
"path": "CSS/26.md",
"chars": 649,
"preview": "### Можете ли вы объяснить разницу между отзывчивым (responsive) сайтом и сайтом, сделанным по принципу mobile-first?\n\nО"
},
{
"path": "CSS/27.md",
"chars": 231,
"preview": "### Вы имеете опыт работы с ретиновой графикой? Если да, то какие методы вы использовали?\n\n- Для иконок использовал SVG."
},
{
"path": "CSS/28.md",
"chars": 520,
"preview": "### В каком случае вы предпочтёте использовать `translate()` вместо абсолютного позиционирования и наоборот? И почему?\n\n"
},
{
"path": "CSS/3.md",
"chars": 925,
"preview": "### Объясните, что такое плавающие элементы (floats) и как они работают?\n\nFloat - это свойство CSS, которое позволяет эл"
},
{
"path": "CSS/4.md",
"chars": 1245,
"preview": "### Опишите z-index и как формируется контекст наложения.\n\nZ-index управляет вертикальным положением элементов на страни"
},
{
"path": "CSS/5.md",
"chars": 1830,
"preview": "### Объясните, что такое блочный контекст форматирования и как он работает.\n\n**Блочный контекст форматирования** — часть"
},
{
"path": "CSS/6.md",
"chars": 1027,
"preview": "### Какие вы знаете методы запрета обтекания (clearing) и в каких случаях они применяются?\n\n**Clear** устанавливает, с к"
},
{
"path": "CSS/7.md",
"chars": 245,
"preview": "### Как вы решаете стилевые проблемы, связанные с особенностями браузеров?\n\n- Использую normalize или reset CSS\n- Исполь"
},
{
"path": "CSS/8.md",
"chars": 360,
"preview": "### Как вы обеспечиваете отображение страниц в браузерах с ограниченными возможностями? Какие приёмы/процессы вы при это"
},
{
"path": "CSS/9.md",
"chars": 258,
"preview": "### Какими способами можно визуально скрыть элемент (оставив его доступным только для скринридера)?\n\n- visibility: hidde"
},
{
"path": "CSS/README.md",
"chars": 2548,
"preview": "## Вопросы по CSS\n\n* [Что такое специфичность CSS-селекторов и как она работает?](1.md)\n* [В чем разница между «сбросом»"
},
{
"path": "Coding/README.md",
"chars": 2460,
"preview": "## Примеры кода на JavaScript\n\nВопрос: Какое значение будет у foo?\n~~~~javascript\nvar foo = 10 + '20';\n~~~~\nОтвет: '1020"
},
{
"path": "General/1.md",
"chars": 764,
"preview": "### Какие методы для повышения производительности вы использовали при создании или обслуживании сайта?\n\n1. async и defer"
},
{
"path": "General/10.md",
"chars": 617,
"preview": "### Опишите, как бы вы реализовали примитивное слайд-шоу.\n\n**HTML**\n\n```html\n<div class=\"slide-page\">lorem</div>\n<div cl"
},
{
"path": "General/11.md",
"chars": 295,
"preview": "### Если бы у вас была возможность освоить новую технологию в этом году, что бы это было?\n\n**Node.js**\n\nПотому что с Nod"
},
{
"path": "General/12.md",
"chars": 410,
"preview": "### Объясните важность стандартов и комитетов по стандартам.\n\nИспользование стандартов автоматически делает страницу кро"
},
{
"path": "General/13.md",
"chars": 456,
"preview": "### Что такое FOUC (Flash Of Unstyled Content)? Как его избежать?\n\nFOUC (Flash Of Unstyled Content) - это появление неоф"
},
{
"path": "General/14.md",
"chars": 1440,
"preview": "### Объясните, что такое ARIA и скринридеры, а также как сделать сайт доступным.\n\n**WAI-ARIA** - технологический стандар"
},
{
"path": "General/15.md",
"chars": 397,
"preview": "### Какие преимущества и недостатки у CSS и JavaScript анимаций?\n\n**CSS**\n\n**Плюсы**\n\n- Простота\n\n**Минусы**\n\n- Ограниче"
},
{
"path": "General/16.md",
"chars": 311,
"preview": "### Что означает CORS и какую проблему решает?\n\n**Cross-origin resource sharing (CORS)** предоставляет веб-серверам возм"
},
{
"path": "General/2.md",
"chars": 468,
"preview": "### Можете ли вы описать некоторые методы SEO, которые вы использовали в последнее время?\n\nМожно рассказать про:\n\n- Уник"
},
{
"path": "General/3.md",
"chars": 435,
"preview": "### С какими системами контроля версий вы знакомы?\n\nНаиболее известные системы контроля версий это Git, SVN и Mercurial."
},
{
"path": "General/4.md",
"chars": 344,
"preview": "### Если у вас есть 5 разных файлов со стилями, какой лучший способ интегрировать их в сайт?\n\nЛучше всего соединить все "
},
{
"path": "General/5.md",
"chars": 556,
"preview": "### Можете ли вы описать разницу между прогрессивным улучшением (progressive enhancement) и изящной деградацией (gracefu"
},
{
"path": "General/6.md",
"chars": 657,
"preview": "### Как можно оптимизировать загрузку внешних ресурсов на странице?\n\nВнешние файлы js подключать внизу страницы перед за"
},
{
"path": "General/7.md",
"chars": 751,
"preview": "### Сколько ресурсов браузер может одновременно загружать с одного домена?\n\n**Для HTTP/1.1:**\n\nIE 6 and 7: 2 <br/>\nIE 8:"
},
{
"path": "General/8.md",
"chars": 626,
"preview": "### Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального).\n\n- Реальные способы\n\n1. М"
},
{
"path": "General/9.md",
"chars": 320,
"preview": "### Если вы присоединились к проекту, где для форматирования используются табы, а вы привыкли использовать пробелы, как "
},
{
"path": "General/README.md",
"chars": 1434,
"preview": "## Общие вопросы\n\n* [Какие методы для повышения производительности вы использовали при создании или обслуживании сайта?]"
},
{
"path": "HTML/1.md",
"chars": 332,
"preview": "### Для чего нужен doctype?\n\n`<!DOCTYPE>` указывает тип документа, который используется при написании html кода. Doctype"
},
{
"path": "HTML/10.md",
"chars": 687,
"preview": "### Для чего используется атрибут srcset в теге изображения? Опишите процесс, который использует браузер при оценке соде"
},
{
"path": "HTML/11.md",
"chars": 346,
"preview": "### Приходилось ли вам работать с языками HTML-шаблонизации?\n\nДа. Pug, Haml, Handlebars, Smarty.\n\n### Что такое элемент "
},
{
"path": "HTML/2.md",
"chars": 831,
"preview": "### Как следует оформлять страницу, содержимое которой может быть на разных языках?\n\nКогда к серверу делается HTTP-запро"
},
{
"path": "HTML/3.md",
"chars": 1640,
"preview": "### На что необходимо обратить внимание при разработке мультиязычных сайтов?\n\n- Используй атрибут lang в HTML.\n- Перенап"
},
{
"path": "HTML/4.md",
"chars": 409,
"preview": "### Для чего нужны атрибуты, начинающиеся с data-?\n\nТакие атрибуты предназначены для хранения частных данных пользовател"
},
{
"path": "HTML/5.md",
"chars": 900,
"preview": "### Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?\n\n1. Семантика. Позволяет более точно оп"
},
{
"path": "HTML/6.md",
"chars": 1090,
"preview": "### Объясните разницу между cookie, sessionStorage и localStorage.\n\n**Cookie**\n\n- **Инициатор:** клиент или сервер. Серв"
},
{
"path": "HTML/7.md",
"chars": 1173,
"preview": "### Объясните разницу между `<script>`, `<script async>` и `<script defer>`.\n\n`<script>` — отрисовка HTML блокируется, с"
},
{
"path": "HTML/8.md",
"chars": 1676,
"preview": "### Почему хорошей практикой считается располагать `<link>` для подключения CSS между `<head></head>`, а `<script>` для "
},
{
"path": "HTML/9.md",
"chars": 1220,
"preview": "### Что такое прогрессивная отрисовка?\n\n**Прогрессивный рендеринг** — имя, данное технологиям, используемым для ускорени"
},
{
"path": "HTML/README.md",
"chars": 980,
"preview": "## Вопросы по HTML\n\n* [Для чего нужен doctype?](1.md)\n* [Как следует оформлять страницу, содержимое которой может быть н"
},
{
"path": "JavaScript/1.md",
"chars": 1051,
"preview": "### Объясните делегирование событий.\n\nВсплытие событий позволяет реализовать один из самых важных приёмов разработки - *"
},
{
"path": "JavaScript/10.md",
"chars": 679,
"preview": "### В чём разница между host-объектами и нативными объектами?\n\n- Собственные объекты: `Object` (конструктор), `Date`, `M"
},
{
"path": "JavaScript/11.md",
"chars": 462,
"preview": "### В чем разница между: function Person(){}, var person = Person(), и var person = new Person()?\n\n`function Person(){}`"
},
{
"path": "JavaScript/12.md",
"chars": 648,
"preview": "### В чем разница между .call и .apply?\n\nСходство заключается в том, что и `.call`, и `.apply` используются для вызова ф"
},
{
"path": "JavaScript/13.md",
"chars": 448,
"preview": "### Что делает и для чего нужна функция Function.prototype.bind?\n\nМетод `bind()` создает новую функцию, которая при вызо"
},
{
"path": "JavaScript/14.md",
"chars": 1708,
"preview": "### В чём разница между feature detection (определение возможностей), feature inference (предположение возможностей) и а"
},
{
"path": "JavaScript/15.md",
"chars": 1288,
"preview": "### Расскажите об Ajax как можно более подробно.\n\nAjax (аббревиатура от \"Asynchronous Javascript And Xml) - технология о"
},
{
"path": "JavaScript/16.md",
"chars": 807,
"preview": "### Какие преимущества и недостатки в использовании Ajax?\n\n**Преимущества**\n\n- Повышение интерактивности. Новые данные с"
},
{
"path": "JavaScript/17.md",
"chars": 878,
"preview": "### Объясните, как работает JSONP (и почему это не совсем AJAX).\n\n**JSONP** - это способ, часто используемый для обхода "
},
{
"path": "JavaScript/18.md",
"chars": 424,
"preview": "### Вы когда-нибудь использовали шаблонизацию на JavaScript? Если да, то какие библиотеки вы использовали?\n\nДа. Handleba"
},
{
"path": "JavaScript/19.md",
"chars": 967,
"preview": "### Расскажите, что такое поднятие (hoisting) переменных.\n\nПоднятие (hoisting) — это термин, используемый для объяснения"
},
{
"path": "JavaScript/2.md",
"chars": 537,
"preview": "### Объясните, как this работает в JavaScript.\n\nИспользование this гарантирует, что функция работает именно с тем объект"
},
{
"path": "JavaScript/20.md",
"chars": 416,
"preview": "### Объясните, что такое всплытие событий (event bubbling)\n\nПри наступлении события, обработчики сначала срабатывают на "
},
{
"path": "JavaScript/21.md",
"chars": 611,
"preview": "### В чём разница между «атрибутом» (attribute) и «свойством« (property)?\n\nАтрибуты определены в разметке HTML, а свойст"
},
{
"path": "JavaScript/22.md",
"chars": 800,
"preview": "### Почему не следует расширять нативные JavaScript-объекты?\n\nРасширение встроенного (нативного) объекта JS означает доб"
},
{
"path": "JavaScript/23.md",
"chars": 447,
"preview": "### В чём разница между событием document load и событием document DOMContentLoaded?\n\nСобытие `DOMContentLoaded` вызывае"
},
{
"path": "JavaScript/24.md",
"chars": 459,
"preview": "### В чём разница между == и ===?\n\n- `==` - это оператор абстрактного сравнения, а `===` - оператор строгого сравнения. "
},
{
"path": "JavaScript/25.md",
"chars": 520,
"preview": "### Объясните same-origin policy в контексте JavaScript.\n\n**Same-origin policy** (принцип одинакового источника) не позв"
},
{
"path": "JavaScript/26.md",
"chars": 327,
"preview": "### Сделайте так, чтобы этот код работал: duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]\n\n```javascript\nfunction dupli"
},
{
"path": "JavaScript/27.md",
"chars": 272,
"preview": "### Почему тернарный оператор так называется?\n\n\"Тернарный\" означает три. Троичное выражение принимает три операнда: усло"
},
{
"path": "JavaScript/28.md",
"chars": 1091,
"preview": "### Что делает строчка \"use strict\";? Какие достоинства и недостатки от её использования?\n\n'use strict' это директива, и"
},
{
"path": "JavaScript/29.md",
"chars": 503,
"preview": "### Напишите цикл, который перебирает числа до 100, возвращая \"fizz\" на числа кратные 3, \"buzz\" на числа кратные 5 и \"fi"
},
{
"path": "JavaScript/3.md",
"chars": 1296,
"preview": "### Расскажите, как работает прототипное наследование.\n\nПрототипом объекта А называется объект B, свойства и методы кото"
},
{
"path": "JavaScript/30.md",
"chars": 409,
"preview": "### Почему считается хорошим тоном оставить глобальную область видимости (global scope) в нетронутом состоянии?\n\nКаждый "
},
{
"path": "JavaScript/31.md",
"chars": 670,
"preview": "### Для чего используют событие load? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы и в каких"
},
{
"path": "JavaScript/32.md",
"chars": 3091,
"preview": "### Расскажите, что такое одностраничное приложение, и как сделать его SEO-оптимизированным.\n\nТекст взят из [этого репоз"
},
{
"path": "JavaScript/33.md",
"chars": 792,
"preview": "### Насколько вы опытны в работе с промисами (promises) и/или их полифилами?\n\nПромис — это объект, который может вернуть"
},
{
"path": "JavaScript/34.md",
"chars": 878,
"preview": "### Какие преимущества и недостатки при использовании промисов вместо колбэков (callbacks)?\n\n**Преимущества**\n\n- Помогае"
},
{
"path": "JavaScript/35.md",
"chars": 1345,
"preview": "### Каковы преимущества и недостатки написания JavaScript-кода на языке, который компилируется в JavaScript?\n\nНесколько "
},
{
"path": "JavaScript/36.md",
"chars": 314,
"preview": "### Какие инструменты и методы вы используете при отладке кода?\n\n**React и Redux:**\n\n- React Devtools\n- Redux Devtools\n\n"
},
{
"path": "JavaScript/37.md",
"chars": 809,
"preview": "### Какие языковые конструкции вы используете для итерации по свойствам объекта и элементам массива?\n\n**Для объектов**\n\n"
},
{
"path": "JavaScript/38.md",
"chars": 1059,
"preview": "### Объясните разницу между синхронными и асинхронными функциями.\n\nСинхронные функции являются блокирующими, а асинхронн"
},
{
"path": "JavaScript/39.md",
"chars": 671,
"preview": "### Что такое цикл событий (event loop)? В чём разница между стеком вызовов (call stack) и очередью событий (task queue)"
},
{
"path": "JavaScript/4.md",
"chars": 716,
"preview": "### Что вы думаете о AMD против CommonJS\n\nCommonJS и AMD являются спецификациями (или форматами) о том, как модули и их "
},
{
"path": "JavaScript/40.md",
"chars": 455,
"preview": "### Объясните разницу при использовании `foo` в `function foo() {}` и `var foo = function() {}`.\n\nПервое - объявление фу"
},
{
"path": "JavaScript/41.md",
"chars": 1090,
"preview": "### В чём различие между переменными, созданными при помощи let, var и const?\n\nПеременные, объявленные при помощи ключев"
},
{
"path": "JavaScript/42.md",
"chars": 1212,
"preview": "### В чём разница между классом в ES6 и функцией-конструктором в ES5?\n\n```javascript\n// ES5 функция-конструктор\n\nfunctio"
},
{
"path": "JavaScript/43.md",
"chars": 648,
"preview": "### Можете ли вы привести пример использования стрелочных функции =>? Чем они отличаются от других функций?\n\nПреимуществ"
},
{
"path": "JavaScript/44.md",
"chars": 675,
"preview": "### Дайте определение функции высшего порядка.\n\nФункция высшего порядка — это любая функция, которая принимает одну или "
},
{
"path": "JavaScript/45.md",
"chars": 772,
"preview": "### Можете ли вы привести пример деструктуризации объекта или массива?\n\nДеструктуризация - это выражение, доступное в ES"
},
{
"path": "JavaScript/46.md",
"chars": 358,
"preview": "### Шаблонные строки в ES6 намного упрощают создание строк, можете ли вы привести пример их использования?\n\n```javascrip"
},
{
"path": "JavaScript/47.md",
"chars": 1142,
"preview": "### Можете ли вы привести пример каррированной функции (curry function) и в чём их преимущество?\n\nКаррирование — это пат"
},
{
"path": "JavaScript/48.md",
"chars": 1361,
"preview": "### В чём преимущества использования spread оператора и чем он отличается от rest оператора?\n\n**Spread** оператор синтак"
},
{
"path": "JavaScript/49.md",
"chars": 814,
"preview": "### Каким образом можно обмениваться кодом между файлами?\n\nЭто зависит от среды выполнения JavaScript.\n\nНа клиенте (в ср"
},
{
"path": "JavaScript/5.md",
"chars": 584,
"preview": "### Объясните, почему это не является IIFE: function foo(){ }();\n\nВ этом примере будет выведено исключение SyntaxError, "
},
{
"path": "JavaScript/50.md",
"chars": 516,
"preview": "### Для чего используются статические члены класса?\n\nЧлены статических классов (свойства/методы) не привязаны к конкретн"
},
{
"path": "JavaScript/51.md",
"chars": 545,
"preview": "### В чем разница между async и defer?\n\nСпециальные атрибуты `async` и `defer` используются для того, чтобы пока грузитс"
},
{
"path": "JavaScript/52.md",
"chars": 803,
"preview": "### В чём разница между изменяемым (mutable) и неизменяемым (immutable) объектом?\n\n**Изменяемый объект** - это объект, с"
},
{
"path": "JavaScript/6.md",
"chars": 435,
"preview": "### В чём различие между переменными, значение которых: null, undefined и не объявлено?\n\n**undefined** - это переменная,"
},
{
"path": "JavaScript/7.md",
"chars": 482,
"preview": "### Что такое замыкание и как/для чего его используют?\n\nЕсли одна функция определена внутри другой, то внутренняя имеет "
},
{
"path": "JavaScript/8.md",
"chars": 330,
"preview": "### Можете ли вы описать основное различие между циклом forEach и циклом .map()? И в каких случаях каждый из них использ"
},
{
"path": "JavaScript/9.md",
"chars": 316,
"preview": "### В каких случаях обычно используются анонимные функции?\n\nАнонимные функции часто используются для выполнения какого-т"
},
{
"path": "JavaScript/README.md",
"chars": 4535,
"preview": "## Вопросы по Javascript\n\n- [Объясните делегирование событий.](1.md)\n- [Объясните, как this работает в JavaScript.](2.md"
},
{
"path": "Network/1.md",
"chars": 661,
"preview": "### Почему лучше загружать ресурсы для сайта с нескольких доменов?\n\nБраузеры имеют ограничение на количество одновременн"
},
{
"path": "Network/2.md",
"chars": 4269,
"preview": "### Опишите весь процесс, начиная с ввода адреса сайта в адресную строку до окончания его загрузки на экране.\n\n1. Вы вво"
},
{
"path": "Network/3.md",
"chars": 1688,
"preview": "### В чём различия между Long-Polling, Websockets и Server-Sent Events?\n\n**Ajax Long-Polling**\n\n1. Клиент запрашивает ве"
},
{
"path": "Network/4.md",
"chars": 1033,
"preview": "### Опишите разницу между следующими заголовками HTTP-запросов и ответов: Expires, Date, Age и If-Modified-…, Do Not Tra"
},
{
"path": "Network/5.md",
"chars": 1346,
"preview": "### Что такое HTTP-методы? Перечислите все HTTP-методы, которые вы знаете, и объясните их.\n\nHTTP определяет множество ме"
},
{
"path": "Network/README.md",
"chars": 568,
"preview": "## Вопросы по сетям\n\n* [Почему лучше загружать ресурсы для сайта с нескольких доменов?](1.md)\n* [Опишите весь процесс, н"
},
{
"path": "Performance/1.md",
"chars": 218,
"preview": "### Какие инструменты вы используете, чтобы найти недостатки в производительности вашего кода?\n\n1. Chrome Dev Tools — Вк"
},
{
"path": "Performance/2.md",
"chars": 397,
"preview": "### Какие вы знаете способы улучшения производительности при скроллинге на вебсайте?\n\nДля улучшения производительности п"
},
{
"path": "Performance/3.md",
"chars": 358,
"preview": "### Объясните разницу между раскладкой (layout), painting и композитингом (compositing).\n\n- Layout: расчёт места для объ"
},
{
"path": "Performance/README.md",
"chars": 321,
"preview": "## Вопросы по производительности\n\n* [Какие инструменты вы используете, чтобы найти недостатки в производительности вашег"
},
{
"path": "README.md",
"chars": 695,
"preview": "# Вопросы (с ответами) кандидату на должность frontend разработчика\n\nВ этом репозитории собраны ответы на вопросы кандид"
},
{
"path": "Testing/1.md",
"chars": 215,
"preview": "### Какие инструменты вы будете использовать для тестирования работоспособности своего кода?\n\n1. Browserstack для тестир"
},
{
"path": "Testing/2.md",
"chars": 443,
"preview": "### В чём различие между юнит-тестами и функциональными/интеграционными тестами?\n\n- Юнит-тест тестирует на правильную ра"
},
{
"path": "Testing/3.md",
"chars": 209,
"preview": "### Для чего предназначены линтеры (code style linting tool)?\n\nЛинтеры нужны для проверки кода на программные и стилисти"
},
{
"path": "Testing/README.md",
"chars": 281,
"preview": "## Вопросы по тестированию\n\n* [Какие инструменты вы будете использовать для тестирования работоспособности своего кода?]"
},
{
"path": "_config.yml",
"chars": 28,
"preview": "theme: jekyll-theme-midnight"
}
]
About this extraction
This page contains the full source code of the FedorovAlexander/Front-end-Job-Interview-Questions GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 128 files (99.0 KB), approximately 30.1k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.