Как поисковая строка преобразуется в то что видно на сайте?

От URL к отображению: путь через браузер и сеть

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

Парсинг и разрешение DNS

Когда пользователь вводит URL в адресную строку, браузер сначала парсит его, выделяя протокол, домен и путь. Затем происходит DNS запрос для преобразования доменного имени в IP адрес.

const url = https://example.com/api/users?search=john&page=1;

const urlObj = new URL(url);
console.log(urlObj.protocol);     // https:
console.log(urlObj.hostname);     // example.com
console.log(urlObj.pathname);     // /api/users
console.log(urlObj.search);       // ?search=john&page=1

const params = new URLSearchParams(urlObj.search);
const searchQuery = params.get(search);
const page = params.get(page);

Установка соединения и HTTP запрос

Браузер устанавливает TCP соединение с сервером на порту 443 и отправляет HTTP GET запрос. Сервер обрабатывает запрос и возвращает HTML, CSS, JavaScript и другие ресурсы.

async function loadPageContent(url) {
  try {
    const response = await fetch(url, {
      method: GET,
      headers: {
        Content-Type: application/json,
        Accept: text/html,
      },
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const html = await response.text();
    return html;
  } catch (error) {
    console.error(Fetch error:, error);
  }
}

Парсинг HTML и построение DOM

Браузер получает HTML и начинает парсить его построчно, создавая DOM дерево. CSS файлы блокируют рендеринг, а JavaScript может быть асинхронным.

Выполнение JavaScript и гидратация

После парсинга HTML браузер выполняет JavaScript. В современных фреймворках JavaScript инициализирует приложение и заполняет DOM динамическим контентом. На клиенте React берёт серверный HTML и гидратирует его интерактивностью.

Обработка пользовательского ввода

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

Рендеринг и браузерная живопись

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