Перейти к основному содержимому

Общие вопросы

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

Из Url, заголовка (внутри метаданные, закешированная инфа, язык и др) и телом запроса, в котором может быть любой объект.

Что происходит, когда вводишь адрес в поисковую строку и нажимаешь enter?​

📃 Рендеринг веб страницы

Что такое доменное имя?​

Доменное имя - это имя, соответствующее IP-адресу компьютера, которое представляет местоположение компьютера в Интернете.

Идентифицируется системой доменных имен (DNS).

Система доменных имен (DNS) переводит доменные имена в IP-адреса, позволяя пользователям обращаться к веб-сайтам по более удобным и запоминающимся именам, а не по числовым IP-адресам.

Кодовые зоны HTTP​

Коды состояния HTTP делятся на пять групп:

  1. 1xx (Информационные)

    • Используются для информирования клиента о начале обработки запроса.
    • Пример: 100 Continue - сервер подтверждает, что готов принять тело запроса.

  2. 2xx (Успешные)

    • Указывают на успешное выполнение запроса.
    • Примеры: 200 OK - запрос успешно обработан; 201 Created - запрос успешно обработан, и был создан новый ресурс.

  3. 3xx (Перенаправления)

    • Используются для перенаправления клиента на другой ресурс.
    • Примеры: 301 Moved Permanently - ресурс был перемещен на новый URL; 302 Found - ресурс временно доступен по указанному URL.

  4. 4xx (Ошибки клиента)

    • Указывают на ошибки, связанные с запросом клиента.
    • Примеры: 400 Bad Request - запрос неверен; 404 Not Found - запрошенный ресурс не найден.

  5. 5xx (Ошибки сервера)

    • Указывают на ошибки, связанные с сервером, который обрабатывает запрос.
    • Примеры: 500 Internal Server Error - на сервере произошла ошибка; 503 Service Unavailable - сервер временно недоступен.

Разница между HTTP2 и HTTP3?​

HTTP2 и HTTP3 - это два протокола передачи гипертекста (HTTP), каждый из которых имеет свои особенности:

  1. Транспортный протокол:

    • HTTP2 использует TCP для постоянного соединения между клиентом и сервером.
    • HTTP3 использует QUIC на основе UDP для более быстрой и безопасной передачи данных.

  2. Мультиплексирование:

    • Оба протокола поддерживают мультиплексирование, позволяя отправлять несколько запросов одновременно.

  3. Надежность:

    • HTTP2 обеспечивает надежную передачу данных с подтверждением получения.
    • HTTP3 использует надежные потоки QUIC для гарантированной доставки данных.

  4. Устойчивость к проблемам сети:

    • HTTP3 лучше справляется с сетевыми проблемами, такими как потеря пакетов, благодаря своей архитектуре.

  5. Низкая задержка:

    • HTTP3 обеспечивает более быструю передачу данных за счет использования UDP и быстрого управления протокола.

В итоге, HTTP3 предлагает улучшенную производительность и надежность по сравнению с HTTP2, что делает его предпочтительным для современных веб-приложений и сетей.

Что такое QUIC?​

QUIC (Quick UDP Internet Connections) - это протокол передачи данных, разработанный Google, который использует UDP (User Datagram Protocol) для обеспечения быстрой и безопасной передачи данных в Интернете. Вот ключевые особенности QUIC:

  1. Установка соединения с шифрованием TLS: QUIC использует TLS для шифрования данных при установлении соединения, что обеспечивает безопасность передачи.

  2. Мультиплексирование: QUIC позволяет одновременно обрабатывать несколько потоков данных через одно соединение, улучшая производительность.

  3. Надежность: QUIC гарантирует надежную доставку данных с помощью надежных потоков и механизмов гарантированной доставки пакетов.

  4. Устойчивость к сетевым проблемам: QUIC оптимизирован для работы в мобильных сетях и имеет механизмы для управления пропускной способностью и быстрого восстановления соединения при сетевых проблемах.

  5. Низкая задержка: QUIC уменьшает задержку передачи данных за счет использования UDP и эффективной маршрутизации пакетов.

QUIC был создан для улучшения производительности HTTP и других сетевых приложений, и HTTP3 использует QUIC в качестве своего транспортного протокола для передачи данных.

Какие еще есть протоколы ?​

  1. HTTP/1.0 и HTTP/1.1

    • Предшественники HTTP2 и HTTP3, которые до сих пор используются в некоторых системах.
    • HTTP/1.1, в частности, стал стандартом для веб-браузеров и веб-серверов.

  2. SMTP (Simple Mail Transfer Protocol)

    • Протокол для отправки электронной почты между почтовыми серверами.

  3. POP3 (Post Office Protocol version 3) и IMAP (Internet Message Access Protocol)

    • Протоколы для получения электронной почты с почтовых серверов на локальные устройства.

  4. FTP (File Transfer Protocol)

    • Протокол для передачи файлов между компьютерами через сеть.

  5. SSH (Secure Shell)

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

  6. Telnet

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

  7. SFTP (SSH File Transfer Protocol)

    • Протокол для безопасной передачи файлов, использующий SSH.

  8. DHCP (Dynamic Host Configuration Protocol)

    • Протокол для автоматического назначения IP-адресов устройствам в сети.

  9. DNS (Domain Name System)

    • Протокол для перевода доменных имен в IP-адреса.

  10. SSL/TLS (Secure Sockets Layer/Transport Layer Security)

    • Протоколы для обеспечения безопасности соединений между клиентом и сервером.

  11. WebSocket

    • Протокол для двусторонней связи между клиентом и сервером через один TCP-соединение.

  12. MQTT (Message Queuing Telemetry Transport)

    • Протокол для передачи сообщений между устройствами в IoT (Internet of Things) сети.

Что делать, если ответ от сервера 200, а страница пустая?​

  1. Проверьте данные на сервере: Убедитесь, что данные есть и правильно передаются.
  2. Проверьте соединение: Убедитесь, что соединение стабильно.
  3. Проверьте код страницы: Найдите и исправьте ошибки в HTML, CSS или JavaScript.
  4. Проверьте обработку данных: Убедитесь, что данные корректно обрабатываются на клиенте.
  5. Очистите кэш браузера: Попробуйте очистить кэш или открыть страницу в режиме инкогнито.
  6. Проверьте конфигурацию сервера: Убедитесь, что сервер настроен правильно.
  7. Проверьте логи сервера: Ищите информацию о запросах и ответах.
  8. Проверьте настройки CORS: Убедитесь, что CORS разрешает загрузку данных.
  9. Проверьте консоль браузера: Ищите ошибки JavaScript или другие проблемы.
  10. Перезагрузите страницу: Иногда это может помочь восстановить отображение данных.

Что такое HTTP и какие основные методы он может иметь?​

HTTP - протокол передачи данных, используемый в Интернете для взаимодействия между веб-сервером и клиентом. Основные методы HTTP:

  1. GET: Запрос данных с сервера, например, для открытия веб-страницы.
  2. POST: Отправка данных на сервер для обработки, часто используется при отправке форм.
  3. PUT: Добавление или обновление данных на сервере.
  4. PATCH: Частичное обновление данных на сервере,
  5. DELETE: Удаление данных с сервера.
  6. HEAD: Получение информации о ресурсе без его содержимого, полезно для проверки доступности.
  7. OPTIONS: Запрос информации о поддерживаемых методах и возможностях сервера, часто используется для настройки CORS (Cross-Origin Resource Sharing).

Примеры:​

GET​

// Запрос к API для получения данных
fetch('https://api.example.com/data')
	.then(response => response.json()) // Преобразование ответа в JSON
	.then(data => console.log(data)) // Вывод данных в консоль
	.catch(error => console.error('Error:', error)); // Обработка ошибок

POST​

// Отправка данных на сервер для обработки
fetch('https://api.example.com/data', {
	method: 'POST', // Указание метода POST
	headers: {
		'Content-Type': 'application/json' // Указание типа содержимого как JSON
	},
	body: JSON.stringify({
		key: 'value' // Данные для отправки
	})
})
	.then(response => response.json()) // Преобразование ответа в JSON
	.then(data => console.log(data)) // Вывод данных в консоль
	.catch(error => console.error('Error:', error)); // Обработка ошибок

PUT​

// Обновление данных на сервере
fetch('https://api.example.com/data/1', {
	method: 'PUT', // Указание метода PUT
	headers: {
		'Content-Type': 'application/json' // Указание типа содержимого как JSON
	},
	body: JSON.stringify({
		key: 'updated value' // Обновленные данные
	})
})
	.then(response => response.json()) // Преобразование ответа в JSON
	.then(data => console.log(data)) // Вывод данных в консоль
	.catch(error => console.error('Error:', error)); // Обработка ошибок

PATCH​

// Частичное обновление данных на сервере
fetch('https://api.example.com/data/1', {
	method: 'PATCH', // Указание метода PATCH
	headers: {
		'Content-Type': 'application/json' // Указание типа содержимого как JSON
	},
	body: JSON.stringify({
		key: 'partially updated value' // Частично обновленные данные
	})
})
	.then(response => response.json()) // Преобразование ответа в JSON
	.then(data => console.log(data)) // Вывод данных в консоль
	.catch(error => console.error('Error:', error)); // Обработка ошибок

DELETE​

// Удаление данных с сервера
fetch('https://api.example.com/data/1', {
	method: 'DELETE' // Указание метода DELETE
})
	.then(response => response.json()) // Преобразование ответа в JSON
	.then(data => console.log(data)) // Вывод данных в консоль
	.catch(error => console.error('Error:', error)); // Обработка ошибок
// Получение информации о ресурсе без его содержимого
fetch('https://api.example.com/data', {
	method: 'HEAD' // Указание метода HEAD
})
	.then(response => console.log('Response headers:', response.headers)) // Вывод заголовков ответа
	.catch(error => console.error('Error:', error)); // Обработка ошибок

OPTIONS​

// Запрос информации о поддерживаемых методах и возможностях сервера
fetch('https://api.example.com/data', {
	method: 'OPTIONS' // Указание метода OPTIONS
})
	.then(response => console.log('Response headers:', response.headers)) // Вывод заголовков ответа
	.catch(error => console.error('Error:', error)); // Обработка ошибок

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

  1. Метод (Method): Определяет тип действия, которое клиент хочет выполнить. Например, GET, POST, PUT, DELETE и т.д.

  2. URI (Uniform Resource Identifier): Уникальный идентификатор ресурса, на который направлен запрос. Это может быть URL (Uniform Resource Locator) или URN (Uniform Resource Name).

  3. HTTP версия: Версия протокола HTTP, используемая для запроса. Например, HTTP/1.1 или HTTP/2.

  4. Заголовки (Headers): Заголовки передают дополнительную информацию между клиентом и сервером. Они могут включать информацию о типе содержимого, авторизации, размере данных и т.д.

  5. Тело запроса (Body): Содержит данные, которые клиент отправляет на сервер. Используется, например, при отправке формы или загрузке файлов.

  6. Статусный код (Status Code): Код, который сервер отправляет обратно клиенту, указывающий результат выполнения запроса. Например, 200 OK, 404 Not Found, 500 Internal Server Error и т.д.

  7. Заголовки ответа (Response Headers): Похожи на заголовки запроса, но содержат информацию, которую сервер отправляет обратно клиенту.

  8. Тело ответа (Response Body): Содержит данные, которые сервер отправляет обратно клиенту в ответ на запрос. Это может быть HTML-страница, JSON, XML или любые другие данные, которые сервер готов предоставить.

Что такое HTTPS? Какие преимущества он предоставляет по сравнению с HTTP?​

HTTPS (Hypertext Transfer Protocol Secure) - это защищенная версия HTTP, использующая SSL/TLS для шифрования данных. Основные преимущества HTTPS:

  1. Шифрование данных: Защищает передаваемые данные от перехвата, предотвращая доступ к конфиденциальной информации.
  2. Аутентификация: Проверяет подлинность сервера, предотвращая атаки "человек посередине", когда злоумышленник может перехватывать данные и выдавать себя за сервер.
  3. Целостность данных: Защищает данные от модификации во время передачи, гарантируя, что данные не были изменены в процессе передачи.
  4. Улучшение доверия: HTTPS помогает увеличить доверие пользователей к веб-сайтам, поскольку браузеры обычно отображают индикаторы безопасности, указывающие на использование HTTPS.
  5. Совместимость с политиками безопасности: Многие современные веб-сайты и приложения требуют использования HTTPS для обеспечения безопасности пользовательских данных и соответствия политикам безопасности, таким как GDPR и PCI DSS.

Что такое Cors (Cross-Origin Resource Sharing)?​

Браузеры по умолчанию применяют политику "один источник" (Same-Origin Policy), которая ограничивает доступ к данным на веб-страницах, загруженных с одного домена, к ресурсам на других доменах. Это предотвращает многие типы атак, такие как межсайтовый скриптинг (XSS), когда злоумышленники пытаются использовать скрипты на одной веб-странице для доступа к данным на другой веб-странице.

CORS (Cross-Origin Resource Sharing) - это механизм, который позволяет серверам указывать, какие запросы к ним разрешены из других доменов. Это делается путем отправки специальных заголовков ответа сервера, которые сообщают браузеру, что запросы с определенных источников допустимы. Эти заголовки включают:

  • Access-Control-Allow-Origin: Указывает, какие домены могут делать запросы к серверу.
  • Access-Control-Allow-Methods: Список методов HTTP/HTTPS, которые разрешены для запросов.
  • Access-Control-Allow-Headers: Список заголовков, которые разрешены в запросах.

Когда сервер отправляет эти заголовки в ответ на запрос, браузер проверяет их и, если условия удовлетворены, разрешает выполнение запроса. Это позволяет веб-приложениям безопасно взаимодействовать с ресурсами на других доменах, например, при использовании API, которые размещены на разных доменах.

Пример использования CORS:

Представим, что у нас есть веб-приложение, размещенное на https://example.com, которое хочет делать запросы к API, размещенному на https://api.example.com. Без CORS браузер блокировал бы такие запросы из-за политики "один источник". Однако, если сервер https://api.example.com настроен на отправку заголовка Access-Control-Allow-Origin: https://example.com, браузер разрешит запросы от https://example.com, обеспечивая безопасное взаимодействие между веб-приложением и API.

JWT?​

JWT (JSON Web Token) - это способ передачи информации в виде токена, который можно проверить и доверить. Он используется для аутентификации пользователей в веб-приложениях.

Как работает JWT?​

  1. Header: Указывает, что это JWT и какой алгоритм используется для подписи.
  2. Payload: Содержит данные о пользователе и другую информацию.
  3. Signature: Проверяет, что сообщение не было изменено и отправлено доверенным источником.

Почему JWT полезен?​

  • Безопасность: Информация в токене защищена и может быть проверена.
  • Производительность: Уменьшает нагрузку на сервер, так как пользователь может сохранять информацию о сессии без постоянного обращения к серверу.
  • Гибкость: Поддерживает передачу информации между разными доменами без использования куки.

Хранилища в браузере?​

  • Описание: Текстовый файл, хранится на компьютере пользователя. Содержит идентификаторы сеансов, настройки пользователя и другую информацию.
  • Время жизни: Устанавливается разработчиком. Может быть фиксированным или сессионным.
  • Удаление: Можно удалить как на сервере, так и с помощью JavaScript.
  • Секьюрити: Cookie могут быть уязвимы для атак, таких как CSRF и XSS. Используются атрибуты HttpOnly, Secure и SameSite для защиты.
  • Размер: Максимальный размер Cookie ограничен 4 КБ.

Local Storage​

  • Описание: Хранит данные в виде строк (пара ключ-значение), максимальный размер - 4 МБ на домен.
  • Доступность: Данные доступны после закрытия браузера.
  • Удаление: Данные удаляются только с помощью JavaScript.
  • Секьюрити: Хотя данные защищены от прямого доступа через JavaScript, они могут быть уязвимы для XSS-атак. Использование Content Security Policy (CSP) может помочь снизить риск.

Session Storage​

  • Описание: Похоже на Local Storage, но данные удаляются после закрытия вкладки или браузера.
  • Доступность: Данные доступны только в рамках одной вкладки.

IndexedDB​

  • Описание: Встроенная база данных, позволяющая хранить объекты, делать запросы и фильтрацию данных. Мощнее, чем Local Storage.
  • Хранение данных: Может хранить больше данных, чем Local Storage.
  • Совместимость: Поддерживается большинством современных браузеров, но не в Internet Explorer.
  • Секьюрити: IndexedDB не предоставляет встроенных механизмов защиты от XSS-атак. Важно использовать безопасные практики при работе с данными.

Что такое AJAX?​

AJAX - это технология для асинхронного обмена данными между клиентом и сервером без полной перезагрузки страницы, используя JavaScript. Это позволяет создавать более интерактивные и отзывчивые веб-приложения.

Достоинства AJAX:

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

Важные аспекты:

  • Совместимость с браузерами.
  • Безопасность, включая защиту от XSS и CSRF атак, а также использование HTTPS.
  • Оптимизация производительности запросов и обработки данных.

Что такое API?​

API (Application Programming Interface) - это набор правил и протоколов, который позволяет программам взаимодействовать друг с другом. Он служит как интерфейс, определяющий, как различные компоненты программного обеспечения могут обмениваться данными и функциональностью, не раскрывая при этом деталей своей реализации.

Что такое REST?​

REST (Representational State Transfer) - это архитектурный стиль веб-сервисов, разработанный Роем Филдингом в 2000 году. Он предлагает набор ограничений и принципов для создания веб-сервисов, которые обеспечивают масштабируемость, гибкость и простоту взаимодействия между компонентами системы.

Что такое REST API?​

REST API - это способ организации взаимодействия между клиентом и сервером, основанный на принципах REST архитектуры. Он использует стандартные HTTP-методы для выполнения операций над ресурсами, идентифицируемыми по URI (Uniform Resource Identifier). REST API поддерживает stateless взаимодействие, кеширование ответов и предпочитает легковесные форматы данных, такие как JSON или XML.

RESTful API - это термин, который часто используется как синоним для REST API. Он подчеркивает, что API разработано с учетом принципов REST и следует архитектурному стилю REST. В контексте этого термина, "ful" в "RESTful" указывает на то, что API полностью соответствует принципам и ограничениям REST.

Принципы REST API?​

  1. Отделение клиента от сервера: Это принцип, который подчеркивает независимость клиента и сервера. Клиент и сервер взаимодействуют через определенный интерфейс (обычно HTTP), обмениваясь данными, но не зависят друг от друга в своей реализации.

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

  3. Кэширование: REST поддерживает кэширование ответов сервера на клиенте, что позволяет уменьшить нагрузку на сервер и ускорить доступ к данным, повторно используя кэшированные данные.

  4. Единый интерфейс: Все взаимодействия между клиентом и сервером должны осуществляться через унифицированный интерфейс, обычно HTTP. Это обеспечивает единообразие и упрощает разработку клиентов.

  5. Многоуровневость: Архитектура REST позволяет разделить сервер на несколько уровней, каждый из которых может обрабатываться независимо. Это упрощает масштабирование и управление системой.

  6. Предоставление кода по запросу: REST может включать в себя передачу исполняемого кода от сервера к клиенту, что позволяет клиенту выполнять дополнительные задачи на стороне клиента.

  7. Начало от нуля: Клиент начинает взаимодействие с сервером, зная только базовый адрес, и может расширять свои возможности, используя дополнительные функции, предоставляемые сервером.

SaaS​

SaaS (Software as a Service) - это модель предоставления программного обеспечения, где приложение или сервис развернут и поддерживается поставщиком, а пользователи получают доступ к нему через интернет. Основные особенности SaaS:

  1. Многопользовательская архитектура: Позволяет нескольким пользователям использовать одну и ту же версию программы с различными учетными записями и доступом.

  2. Централизованное управление и обновления: Поставщик SaaS отвечает за установку, обновление и поддержку программного обеспечения, освобождая пользователей от этих задач.

  3. Гибкая система оплаты: Пользователи платят за использование функций и услуг по подписке или в зависимости от потребностей, что позволяет масштабировать использование.

  4. Доступность через интернет: Приложения доступны через веб-браузеры или клиентские приложения, обеспечивая доступность с любого устройства с интернет-соединением.

Примеры SaaS включают приложения для хранения и совместной работы с документами, управления проектами, CRM-системы, учетно-финансовые программы. Эта модель позволяет пользователям получать доступ к мощным программным приложениям без необходимости инвестировать в оборудование и настройку IT-инфраструктуры.

Web компоненты​

Веб-компоненты — это способ создавать собственные элементы HTML с уникальными свойствами и стилями прямо в браузере, без использования дополнительных библиотек или фреймворков. Это позволяет делать веб-сайты более динамичными и удобными для пользователя, сохраняя при этом чистоту и легкость кода.

// Определение класса веб-компонента
class MyElement extends HTMLElement {
	constructor() {
		super();
		// Создание shadow root для инкапсуляции DOM
		const shadowRoot = this.attachShadow({ mode: 'open' });

		// Создание элемента внутри shadow DOM
		const div = document.createElement('div');
		div.textContent = 'Это мой веб-компонент';

		// Добавление стилей
		const style = document.createElement('style');
		style.textContent = `
      div {
        color: red;
        font-size: 20px;
      }
    `;

		// Добавление элементов в shadow DOM
		shadowRoot.appendChild(div);
		shadowRoot.appendChild(style);
	}
}

// Регистрация веб-компонента
customElements.define('my-element', MyElement);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Component Example</title>
</head>
<body>

<!-- Использование веб-компонента -->
<my-element></my-element>

<script src="path/to/your/script.js"></script>
</body>
</html>

Shadow DOM​

Shadow DOM позволяет создавать компоненты с собственным DOM и стилями, изолированными от основного документа. Это обеспечивает модульность и безопасность, так как стили и скрипты компонента не влияют на остальной сайт.

customElements.define(
	'show-hello',
	class extends HTMLElement {
		connectedCallback() {
			const shadow = this.attachShadow({ mode: 'open' });
			shadow.innerHTML = `<p>Hello, ${this.getAttribute('name')}</p>`;
		}
	}
);

// Использование компонента в HTML
<show-hello name="John"></show-hello>;