---
title: Загрузка и ленивые компоненты
questionDates:
  q-transfer-0447: '2026-10-01'
  q-transfer-0448: '2026-10-01'
  q-transfer-0462: '2026-10-01'
seo:
  description: >-
    Тема «Загрузка и ленивые компоненты» для собеседования React Developer.
    Какие этапы критического пути рендеринга блокируют первый экран? Как найти
    причину Layout Shift на странице?
  title: Загрузка и ленивые компоненты — React Developer
---

[Все темы React Developer](/prep/react-developer)

Подтемы:

- [Оптимизация загрузки](#q-transfer-0447)
- [Ленивая загрузка](#q-14bee738d69b81168d96d50cd1e6551e)

## Какие этапы критического пути рендеринга блокируют первый экран? [#q-transfer-0447]

Браузер разбирает HTML в DOM и CSS в CSSOM; блокирующие stylesheet задерживают построение render tree. Синхронный script может остановить parser, особенно если ему нужен CSSOM. Затем браузер вычисляет стили, строит render tree, выполняет layout и paint, после чего compositing собирает слои. Первый экран задерживают большой HTML, блокирующие CSS и script, шрифты, долгий main-thread JavaScript и поздно обнаруженные ресурсы. Оптимизация начинается с измерения waterfall и Performance trace: критический CSS уменьшают, некритичный JavaScript откладывают, а ключевые изображения и шрифты загружают с правильным приоритетом.

:::note[Ссылки для изучения]

1. [web.dev: Critical rendering path](https://web.dev/learn/performance/understanding-the-critical-path)

:::

---

## Как найти причину Layout Shift на странице? [#q-transfer-0448]

Сначала находят конкретные layout shift в Performance panel и связывают их с элементами; Lighthouse помогает в лаборатории, а field data показывает реальных пользователей. Частые причины: изображения и iframe без `width/height` или `aspect-ratio`, вставка баннера над уже показанным контентом, поздняя замена шрифта и анимация свойств, влияющих на layout. Для динамического блока заранее резервируют место, а движение делают через transform. Сдвиг после недавнего пользовательского действия может не входить в CLS, но всё равно портить опыт. Исправление подтверждают повторным trace и полевым распределением CLS.

:::note[Ссылки для изучения]

1. [web.dev: Optimize CLS](https://web.dev/articles/optimize-cls)

:::

---

## Чем async отличается от defer при загрузке скрипта? [#q-transfer-0462]

Оба атрибута позволяют загружать внешний classic script параллельно с HTML parsing. `async` выполняет скрипт сразу после загрузки, поэтому блокирует parser в этот момент и не сохраняет порядок между несколькими скриптами. Он подходит независимым аналитическим скриптам. `defer` выполняет скрипты после завершения parsing, до `DOMContentLoaded`, сохраняя порядок документа; это удобно для зависимого кода приложения. Для module scripts поведение отличается: они defer по умолчанию, а `async` меняет ожидание зависимостей. Без атрибутов classic script обычно блокирует parsing сразу.

:::note[Ссылки для изучения]

1. [async и defer: загрузка и порядок выполнения обычных скриптов](https://learn.javascript.ru/script-async-defer)
   :::

---

## <strong>Как реализовать</strong> <code>lazy loading</code> <strong>в React с использованием</strong> <code>Suspense</code><strong>?</strong> [#q-14bee738d69b81168d96d50cd1e6551e]

<code>Lazy loading</code> позволяет загружать компоненты только тогда, когда они
необходимы, улучшая производительность приложения.

#### Шаги&#58;

1. <strong>Используйте</strong> <code>React&#46;lazy</code>
   <strong>для динамического импорта компонента</strong>&#58;

   ```javascript
   const MyComponent = React.lazy(() => import("./MyComponent"));
   ```

1. <strong>Обертайте компонент в</strong> <code>React&#46;Suspense</code>
   <strong>и укажите fallback-контент</strong>&#58;

   ```jsx
   import React, { Suspense } from "react";

   const App = () => (
     <Suspense fallback={<div>Loading...</div>}>
       <MyComponent />
     </Suspense>
   );

   export default App;
   ```

#### Пример&#58;

```jsx
import React, { Suspense } from "react";

const MyComponent = React.lazy(() => import("./MyComponent"));

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <MyComponent />
  </Suspense>
);

export default App;
```

Для реализации lazy loading в React используйте <code>React&#46;lazy</code> для динамического импорта компонентов и <code>React&#46;Suspense</code> для отображения fallback-контента во время их загрузки.

:::note[Ссылки для изучения]

1. [lazy и Suspense: загрузка компонентов по требованию](https://reactdev.ru/reference/react/lazy/)
   :::

---

## <strong>Как работает "ленивая загрузка" (</strong><code>lazy loading</code><strong>) компонентов в React?</strong> [#q-14bee738d69b81fea192de8bf350a07d]

<strong>Ленивая загрузка</strong> — это техника, позволяющая загружать
компоненты только тогда, когда они необходимы, что улучшает производительность
приложения.

#### Основные шаги&#58;

{/* prettier-ignore */}
1. <strong>Динамический импорт с</strong> <code>React&#46;lazy</code>&#58;

    - <code>React&#46;lazy</code> используется для динамического импорта компонентов.

    ```javascript
    const MyComponent = React.lazy(() => import('./MyComponent'));
    ```

1. <strong>Обертка в</strong> <code>React&#46;Suspense</code>&#58;

    - Компонент оборачивается в <code>React&#46;Suspense</code> с указанием fallback-контента, который отображается во время загрузки компонента.

    ```jsx
    import React, { Suspense } from 'react';

    const App = () => (
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    );

    export default App;
    ```

#### Пример&#58;

```jsx
import React, { Suspense } from "react";

// Динамический импорт компонента
const MyComponent = React.lazy(() => import("./MyComponent"));

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <MyComponent />
  </Suspense>
);

export default App;
```

Ленивая загрузка компонентов в React осуществляется с помощью <code>React&#46;lazy</code> для динамического импорта и <code>React&#46;Suspense</code> для указания fallback-контента, что позволяет загружать компоненты только при необходимости и улучшать производительность приложения.

:::note[Ссылки для изучения]

1. [lazy и Suspense: загрузка компонентов по требованию](https://reactdev.ru/reference/react/lazy/)
   :::

---

## <strong>Как работает "ленивая загрузка" (</strong><code>lazy loading</code><strong>) сторонних библиотек в React?</strong> [#q-14bee738d69b81a48cb1f378c657daa4]

<strong>Ленивая загрузка</strong> сторонних библиотек в React позволяет
загружать библиотеки только при необходимости, улучшая производительность
приложения.

#### Основные шаги&#58;

{/* prettier-ignore */}
1. <strong>Использование динамического импорта</strong>&#58;

    - Используйте функцию <code>import&#40;&#41;</code> для динамического импорта библиотеки.

1. <strong>Работа с импортированной библиотекой</strong>&#58;

    - Обработайте асинхронный импорт с помощью <code>async</code>/<code>await</code> или <code>&#46;then&#40;&#41;</code>.

#### Пример с <code>async</code>/<code>await</code>&#58;

```jsx
import React, { useState, useEffect } from "react";

const MyComponent = () => {
  const [library, setLibrary] = useState(null);

  useEffect(() => {
    const loadLibrary = async () => {
      const { default: lib } = await import("some-library");
      setLibrary(() => lib);
    };

    loadLibrary();
  }, []);

  if (!library) {
    return <div>Loading library...</div>;
  }

  // Использование библиотеки после загрузки
  return <div>{/* Используйте загруженную библиотеку */}</div>;
};

export default MyComponent;
```

#### Пример с <code>&#46;then&#40;&#41;</code>&#58;

```jsx
import React, { useState, useEffect } from "react";

const MyComponent = () => {
  const [library, setLibrary] = useState(null);

  useEffect(() => {
    import("some-library").then(({ default: lib }) => {
      setLibrary(() => lib);
    });
  }, []);

  if (!library) {
    return <div>Loading library...</div>;
  }

  // Использование библиотеки после загрузки
  return <div>{/* Используйте загруженную библиотеку */}</div>;
};

export default MyComponent;
```

Ленивая загрузка сторонних библиотек в React осуществляется с помощью динамического импорта <code>import&#40;&#41;</code>, что позволяет загружать библиотеки только при необходимости, улучшая производительность приложения.

:::note[Ссылки для изучения]

1. [Динамический import: Promise и объект экспортов модуля](https://learn.javascript.ru/modules-dynamic-imports)
   :::

---

## <strong>Как реализовать "ленивую загрузку" (</strong><code>lazy loading</code><strong>) изображений в React?</strong> [#q-14bee738d69b81d08088fb51ea34ca05]

Для реализации ленивой загрузки изображений в React можно использовать библиотеку <code>react&#45;lazyload</code> или встроенный атрибут <code>loading&#61;&#34;lazy&#34;</code>.

#### С использованием <code>react&#45;lazyload</code>&#58;

1. <strong>Установка библиотеки</strong>&#58;

   ```bash
   npm install react-lazyload
   ```

1. <strong>Использование компонента</strong> <code>LazyLoad</code>&#58;

   ```jsx
   import React from "react";
   import LazyLoad from "react-lazyload";

   const App = () => (
     <div>
       <LazyLoad height={200} offset={100}>
         <img src="path/to/image.jpg" alt="Lazy loaded example" />
       </LazyLoad>
     </div>
   );

   export default App;
   ```

#### С использованием атрибута <code>loading&#61;&#34;lazy&#34;</code>&#58;

```jsx
const App = () => (
  <div>
    <img src="path/to/image.jpg" alt="Lazy loaded example" loading="lazy" />
  </div>
);

export default App;
```

Для ленивой загрузки изображений в React используйте библиотеку <code>react&#45;lazyload</code> или встроенный атрибут <code>loading&#61;&#34;lazy&#34;</code> для элементов <code>&#60;img&#62;</code>.

:::note[Ссылки для изучения]

1. [Атрибут loading изображения: eager и lazy](https://doka.guide/html/img/)
   :::

---

## <strong>Что такое "</strong><code>code splitting</code><strong>" (разделение кода) в React?</strong> [#q-14bee738d69b81368e05dcade6239044]

<code>Code Splitting</code> — это техника оптимизации, которая позволяет
разбивать приложение на небольшие части (чанки), загружаемые по мере
необходимости, что улучшает производительность и уменьшает время загрузки.

#### Основные методы&#58;

{/* prettier-ignore */}
1. <strong>Динамический импорт</strong>&#58;

    - Использование <code>import&#40;&#41;</code> для загрузки модулей по требованию.

    ```javascript
    const MyComponent = React.lazy(() => import('./MyComponent'));
    ```

1. <strong>React.lazy и React.Suspense</strong>&#58;

    - Для асинхронной загрузки компонентов и отображения fallback-контента.

    ```jsx
    import React, { Suspense } from 'react';

    const MyComponent = React.lazy(() => import('./MyComponent'));

    const App = () => (
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    );

    export default App;
    ```

Code Splitting в React улучшает производительность, разбивая приложение на небольшие чанки, которые загружаются по мере необходимости, используя динамические импорты и React.lazy с React.Suspense.

:::note[Ссылки для изучения]

1. [lazy и Suspense: загрузка компонентов по требованию](https://reactdev.ru/reference/react/lazy/)
   :::