Frontend > Web (HTML, CSS, сети) > Flashcards

Web (HTML, CSS, сети) Flashcards

(157 cards)

Study These Flashcards
1
Q

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

A

TCP гарантирует доставку данных, но медленнее чем UDP. UDP может применяться, например, в потоковом аудио и видео.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Методы простой оптимизации загрузки сайтов и JS приложений (производительность)

A
  1. Использование async и defer.
  2. Оптимизация изображений - использование svg, сжатие и сам размер изображений.
  3. Конкатенация и углификация файлов.
  4. Инлайн стили (например критический CSS)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Анализ производительности (какие есть метрики)

A
  • Скоростные метрики:

TTFB - время до получения первого байта (вычисления на сервере + сеть)

FCP - время до того как на экране появится хоть что-нибудь

LCP - время до того, как на экране появится полезный контент

  • Полный вес сайта
  • Пользовательские метрики:

Показатель отказов - процент покинувших сайт со страницы входа или посмотревших не более 1 страницы.

Конверсия - полезное действие.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

XSS - как провести атаку, как защититься

A

Атака:

Исполнение вредоносного JS-кода на сайте не предусмотренным способом. Например через ввод каких-то данных, которые отображаются на сайте: строка поиска, комментарий, параметры поиска в адресной строке. Получение таким способом конфиденциальных данных, например токены авторизации, авторизационные куки, логин-пароли.

Защита:

Экранирование полученный от пользователя данных, валидация ввода, httponly cookies.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

GraphQL (знать, что это)

A

Язык запросов. Позволяет получать данные по конкретному запросу, как в SQL, а не целыми “пластами”, ограничиваясь только предоставленными нам эндпоинтами, как в REST.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Git Flow

A

Методика работы с гит. В ней создаётся отдельная ветка для разработки, а от неё создаются ветки для фич. После того как фича готова делается запрос на слияние. Код перед слиянием проходит ревью.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Что такое кросс-браузерность?
Какие инструменты используются для этого?

A

Одинаковая работа сайта (и его визуальная составляющая) во всех браузерах (в том числе мобильных).

Инструменты:
* префиксы
* обнуление или нормализация
* полифилы

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Из чего состоит запрос HTTP?

A
  • Стартовая строка: метод, URN и версия протокола.
  • Заголовки: параметры запроса. Тут же указывается заголовок Host.
  • Тело запроса: состав сообщения, которое отправляется.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Какие методы есть в HTTP?

A

Основные: GET (получение), POST (отправка), PUT (замена, обновление), DELETE (удаление), PATCH (частичное обновление)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Чем HTTP отличается от HTTPS?

A

HTTPS - с шифрованием. В нём участвуют сертификаты, которые должны быть подтверждены центром сертификации и обмен ключами по принципу “рукопожатия” (handshake, TSL, SSL).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Что такое SSL и TLS? Зачем они используются в веб-разработке?

A

Это протоколы шифрования. Используются для:

  • защита передаваемых данных от несанкционированного доступа
  • аутентификация сервера сертификатом - позволяет предотвратить подмену сервера
  • предотвращает подделку данных
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Как работает DNS?

A

Есть дерево серверов, где каждый отвечает за свою зону. При поиске адреса через DNS сначала идёт обращение к корневому серверу, который переадресует запрос далее, например в ru регион, тот далее, например к серверу yandex.

В целом есть два типа серверов. Те кто перенаправляют тебя к тому кто знает ответ и те, кто сами получают ответ и затем возвращаются с ним.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Что такое REST?

A

Архитектурный подход для создания API.

API, полностью соответствующий правилам будет RESTful.

  1. Клиент-сервер
  2. Отсутствие состояния
  3. Кэширование
  4. Единообразие интерфейса
    1. Основан на ресурсах
    2. Манипуляция над ресурсами через представления (клиент представляет как должно выглядеть, сервер решает)
    3. Само-документируемые сообщения (в ответах и запросах есть вся необходимая информация)
    4. Гипермедиа как средство изменения состояния приложения (в ответах есть URI ресурсов, которыми можно воспользоваться)
  5. Слои
  6. [опционально] Код по требованию
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Структура URL?

A

URI - https://domain.com/some/url?q=foo&bar=baz

URL - https://domain.com

URN - some/url

URI = URL + URN

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Что могут в себе содержать заголовки и Cookies?

A

Популярные заголовки:
* Host
* User-Agent описание клиента - браузер, ос итд
* Accept указывается формат в котором клиент принимает ответ, “любое” указывается как “/”
* Authorization
* Cookie

Cookie хранятся в виде пар ключ-значение. Небольшие фрагменты данных, которые могут выступать в виде идентификатора пользователя или, например хранить в себе предпочтения пользователя.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Какие типы кодов ответов HTTP есть?

A

100 - информационные

200 - успешное выполнение запроса

300 - переадресация

400 - ошибка клиента

500 - ошибка сервера

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Что такое прогрессивная отрисовка? Какие технологии используются?

A

Кусочки HTML генерируются на сервере и отсылаются браузеру в порядке приоритетности (например <header> генерируется и отсылается в первую очередь).

В прогрессивной отрисовке используются техники ленивой загрузки и приоритизации контента (например не загружать изначально все CSS-стили в <head>, а только важные, остальные загрузить в конце <body>).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Для чего предназначены линтеры (code style linting tool)?

A

Для проверки кода на стилистические и программные ошибки.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Опишите весь процесс, начиная с ввода адреса сайта в адресную строку до окончания его загрузки на экране.

A
  1. Ввод адреса
  2. Поиск адреса в кеше DNS
  3. Если его нет, то запрос на сервер DNS
  4. Установка TCP соединения
  5. HTTP запрос от браузера
  6. Сервер получает запрос, готовит и отправляет ответ
  7. Браузер получает и отображает контент
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Что такое History API в браузере?

A

Даёт доступ к управлению историей браузера в рамках текущей сессии. Новая сессия - новая вкладка или окно.

Можно двигаться по истории с помощью объекта window.history, можно двигаться вперёд и управлять содержимым.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Объясните разницу между cookie, sessionStorage и localStorage (web storage).

A

Механизмы хранения ключ-значения. Могут хранить только строки.

sessionStorage - используется через JS, доступен только в рамках вкладки и до её закрытия

localStorage - используется через JS, доступен в рамках всего сайта для всех вкладок и после закрытия вкладок

cookie - может задаваться сервером или через JS, срок хранения настраивается, отправляется на сервер при каждом запросе

Ключевые отличия:

  • данные из storage не отправляются на сервер при каждом обращении
  • сервер не может изменять данные в storage, только на фронте через JS
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Что такое безопасные cookies (Secure cookies)? Что такое HttpOnly cookies?

A

Безопасные cookies - только по HTTPS.

HttpOnly - нельзя работать через JS с cookies.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Что такое IndexedDB в браузере? Преимущества IndexedDB?

A

Это база данных в браузере. Позволяет хранить больше данных, чем localStorage и более сложная в работе с ней, но и больше контроля.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Механизм установки сеанса между клиентом и сервером?

A

Клиент отправляет запрос на сервер, сервер получает запрос, обрабатывает и создаёт уникальный ID сессии. В ответе отправляет в куках этот ID. Затем клиент будет делать новый запрос уже с полученным ID.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Что Такое API?
Aplication Programming Interface - программный интерфейс приложения. Служит для возможности взаимодействия с программой на уровне языков программирования. Набор методов через которые интерфейс может взаимодействовать с базой данных. Обычно используются CRUD операции
26
Что такое CDN?
Content Delivery Network - сеть доставки контента. Служит для ускорения передачи контента клиенту за счёт того что серверов много и выбирается ближайший с наивысшей скоростью.
27
Что такое IP-адрес?
Уникальный сетевой адрес.
28
Разница между host и domain?
Host - тот кто содержит на себе сервер или сайт. Domain - доменное имя, уникальное имя адреса, которое сопоставляется с ip-адресом.
29
Почему очищать кэш важно? Как это можно сделать?
Когда сайт обновляется, если в кеше будут старые файлы, то возможна ситуация в которой приложение может сломаться из-за ссылки на более несуществующий объект (изменённое имя) или что-то подобное. Делается это путём присваивания файлу другого имя.
30
Разница между идентификацией, аутентификацией, авторизацией?
Идентификация - процедура установления личности или сущности (кто это?). Аутентификация - это подтверждение личности, например вводом логина и пароля (действительно ли это?). Авторизация - предоставление прав (что может делать?)
31
Виды аутентификации?
Токен - предоставляется токен, последующие запросы происходят с ним. Другие виды: авторизация через социальные сети, двухфакторная, биометрическая, с использованием сертификата, одноразовый пароль на телефон.
32
Какие меры безопасности следует принять при работе с cookie на стороне клиента?
Флаг Secure (только HTTPS) Флаг HttpOnly (запрет на работу с cookie через JS) Атрибут SameSite: `strict` - полностью блокирует отправку кук на другие сайты `lax` - разрешает отправку при переходе с одного на другой `none` - разрешает отправку всегда, но обязательно должен быть Secure Срок годности cookie
33
Что такое прогрессивный SSR?
Server Side Rendering - прогрессивный рендеринг на стороне сервера. Страница разбивается на части, эти части управляются отдельными скриптами. Части передаются последовательно.
34
Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?
1. Новые семантические элементы 2. Мультимедиа - поддержка аудио и видео 3. Графика - стало возможно делать игры и диаграммы 4. API для веб-приложений - геолокация, хранение в браузере и другие. 5. Поддержка устройств - совместимость независимо от самого устройства.
35
Можете ли вы описать некоторые методы SEO?
существует множество методов для улучшения поисковых метрик, вот несколько: - повышение производительности и скорости ответа - семантическая вёрстка с правильной структурой и микроразметкой, альт-атрибуты и метатеги - настройка robots.txt (там можно указать какие страницы индексировать, какие нет, а так же указать карту сайта)
36
Как можно оптимизировать загрузку внешних ресурсов на странице?
Можно использовать кеширование, ленивую загрузку (lazy-loading), поддомены. Если используется HTTP/1.1, для HTTP/2 это неактуально. Можно оптимизировать сборку JS-кода, минифицировать скрипты, использовать CDN, gzip-сжатие, css- и svg-спрайты, настроить кеширование.
37
Сколько ресурсов браузер может одновременно загружать с одного домена?
Для http/1.1 было ограничение в 6 соединений. На http/2 ограничений нет.
38
Почему лучше загружать ресурсы для сайта с нескольких доменов?
Актуально только для HTTP/1.1, так как в нём ограничение на количество соединений с одним доменом.
39
В чём различия между Long-Polling, Websockets и Server-Sent Events?
Long-Polling - клиент делает запрос, сервер отвечает как только есть новая информация, клиент тут же делает новый запрос. Websokets - двухсторонняя постоянная связь по протоколу websoket Server-Sent Events - тоже постоянная связь, но односторонняя в сторону клиента от сервера.
40
Что такое Веб-компоненты?
Технология, которая позволяет создавать самодостаточные компоненты без использования сторонних библиотек.
41
Что означает CORS и какую проблему решает?
В целях безопасности браузер ограничивает запросы на домен, отличный от того, с которого загружен сайт. CORS (Cross-Origin Resource Sharing) - механизм, который позволяет браузеру загружать ресурсы с домена, отличного от того, что используется в данный момент. Работает посредством установки дополнительных HTTP заголовков со стороны сервера. Сервер говорит браузеру откуда можно брать данные.
42
Что такое Content Security Policy (CSP)?
HTTP-хедер, который предназначен для настройки того, откуда и какой контент может запускаться в браузере. Защищает от XSS.
43
Какие основные угрозы безопасности могут возникать на веб-страницах?
* Межсайтовый скриптинг (XSS) - внедрение кода на страницу (например комментарий), который выполняется на странице пользователя. * Межсайтовая подделка запроса (CSRF) - атака при которой запросы отправляются от имени аутентифицированного пользователя без его ведома. * Инъекции кода (Injections) - вредоносный код внедряется в sql запросы или операции ОС. * Утечка информации - неправильная конфиругация прав и отсутствие наименьших привелегий. * Неправильная конфигурация безопасности. * Уязвимости браузера и его расширений - утаревшие версии браузеров и расширений могут содержать неисправленные уязвимости.
44
Что такое принцип наименьших привилегий (POLP)?
Принцип по которому каждая роль должна иметь только минимально необходимый набор прав. Такой подход сокращает количество возможных случайных ошибок и проблем.
45
Назовите критические этапы рендеринга?
Последовательность шагов которые выполняет браузер, когда HTML, CSS и JS преобразуются в пиксели, которые видны на экране. - Document Object Model - трансформирование HTML в DOM-дерево. - CSS Object Model - если HTML документ содержит стили, то при парсинге они запрашиваются и участвуют в построении CSS OM. - JavaScript - если HTML документ содержит тег `