Ленивая загрузка сессии браузера что это
Ленивая загрузка известна как загрузка по требованию. Lazy Loading это методика оптимизации интернет-контента. Этот метод предполагает, что вместо загрузки всей веб-страницы и ее рендеринга за один раз, загружает и отображает веб-страницу медленно при скроллинге. К примеру, вы наверняка выдели такие сайты, когда листаете вниз, то контент загружается вместе с прокруткой, это и есть Lazy Loading (ленивая загрузка). Точнее говоря, это практика задержки инициализации ресурсов до тех пор, пока они действительно не потребуются для повышения производительности и экономии системных ресурсов. Это позволяет избежать ненужного выполнения кода. WordPress, одна из ведущих веб-платформ для блогов, предлагает решение для отложенной загрузки под названием Infinite Scroll. Однако если вы откроете браузер с несколькими открытыми закрепленными вкладками, содержимое каждой вкладки не будет загружаться, пока вы не нажмете на нее. Если вы считаете это неподходящим, попробуйте отключить "ленивую загрузку". В отличие от традиционного подхода, некоторые пользователи включают Lazy Loading в своих браузерах для изображения. Это ускоряет загрузку веб-сайта, экономит трафик и позволяет пользователям по-настоящему бесперебойно работать в Интернете, особенно. когда загружается много изображений на веб-сайте.
Как включить или отключить Lazy Loading в браузерах
Выше вы узнали недостатки и преимущества ленивой загрузки. Теперь разберем, как включить и отключить её в браузерах. Лично я, использую её на ноутбуках с 3G интернетом, что является разумным применением функции Lazy Loading.
1. Firefox
1. Chrome и Yandex браузер
Эти два браузера одинаковы, точнее Yandex браузер построен на Chrom браузеры. Чтобы отключить или включить Lazy Loading в Chrome или Yandex, вам нужно активировать два флага. Просто скопируйте ниже флаги по очереди и вставьте в адресную строку браузера Chrome или Yandex браузера:
браузеры
Ленивая загрузка , также называемая загрузкой по требованию, – это метод оптимизации онлайн-контента. Этот метод, вместо загрузки всей веб-страницы и ее рендеринга за один раз, загружает и отображает веб-страницу медленно, в битах. Он загружает объект, когда это необходимо. При продолжении прокрутки вниз контент становится доступным для вашего просмотра. Точнее говоря, это практика задержки инициализации ресурсов до тех пор, пока они действительно не потребуются для повышения производительности и экономии системных ресурсов. Есть преимущества Lazy Loading. Например, это позволяет избежать ненужного выполнения кода. WordPress, одна из ведущих веб-платформ для блогов, предлагает решение для отложенной загрузки под названием Infinite Scroll. Однако если вы откроете браузер с несколькими открытыми закрепленными вкладками, содержимое каждой вкладки не будет загружаться до тех пор, пока вы не нажмете на нее. Если вы считаете это поведение неподходящим, попробуйте отключить Lazy Loading. В этой статье рассказывается, как включить или отключить отложенную загрузку в браузере Firefox.
Что такое Ленивый Загрузка изображений
В отличие от традиционного подхода, некоторые пользователи включают в своих браузерах Ленивая загрузка . Это ускоряет загрузку веб-сайта, экономит трафик и позволяет пользователям по-настоящему бесперебойно работать
Включить или отключить отложенную загрузку в браузере Firefox
Прежде чем продолжить, давайте сначала выясним, поддерживает ли Firefox Lazy Loading или нет. Чтобы найти это, откройте несколько вкладок в Firefox одновременно.
Затем закройте браузер и снова откройте его (восстановление вкладок из предыдущего сеанса). Вы заметите, что вкладка на переднем плане начнет загружаться. Если это происходит, это означает, что для Firefox включена отложенная загрузка. Чтобы отключить это,
Теперь введите browser.sessionstore.restore в строке поиска и снова нажмите клавишу Enter или выполните поиск вручную browser.sessionstore.restore_on_demand вручную. Когда его увидят, щелкните его правой кнопкой мыши и выберите «Переключить» , чтобы отключить эту функцию.
Отключить или включить отложенную загрузку в браузере Chrome
Чтобы отключить отложенную загрузку в Chrome, вам нужно активировать два флага в Chrome –
После активации флаги откроют страницу флагов с соответствующей настройкой.
Чтобы отключить их, нажмите стрелку раскрывающегося списка рядом с описанными функциями и выберите параметр Отключено . В конце перезапустите Google Chrome, закрыв его вручную, или нажмите кнопку Перезапустить , чтобы перезапустить браузер и позволить изменениям вступить в силу. Аналогично, переключитесь на ‘ Включено ‘, чтобы снова включить отложенную загрузку.
Автор материала, перевод которого мы сегодня публикуем, Эдди Османи из Google, говорит, что уже в Chrome 75 вполне может появиться поддержка нового атрибута элементов и loading. Это означает, что данные элементы будут поддерживать стандартные возможности по так называемой «ленивой загрузке» данных.
Если вам не терпится узнать о том, как использование нового атрибута выглядит в коде, то взгляните на этот пример:
Сейчас мы поговорим о том, как будет работать атрибут loading .
Предварительные сведения
Веб-страницы часто включают в себя множество изображений, что влияет на размер страниц, приводит к его чрезмерному увеличению, и влияет на скорость загрузки страниц. Многие из изображений, выводимых на страницах, находятся за пределами их видимой области. Для того чтобы увидеть подобные изображения, пользователю нужно прокрутить страницу.
Исторически сложилось так, что для того чтобы ограничить воздействие на время загрузки страниц изображений, расположенных за пределами видимой области страниц, программистам приходилось использовать JavaScript-библиотеки (вроде LazySizes). Эти библиотеки позволяют отложить загрузку подобных изображений до того момента, когда пользователь, прокручивая страницу, не подберётся к ним достаточно близко.
Что если бы браузер мог бы помочь программисту избежать загрузки изображений, которые находятся за пределами видимой области страниц? Это благотворно сказалось бы на скорости загрузки данных в видимой области страницы, снизило бы, на маломощных устройствах, общий объём передаваемых по сети данных, уменьшило бы потребление памяти. Скоро всё это будет возможно благодаря новому атрибуту элементов и loading .
Атрибут loading
Атрибут loading позволяет браузеру откладывать загрузку содержимого элементов и , находящихся за пределами видимой области страницы, до тех пор, пока пользователь, прокручивая страницу, не окажется достаточно близко к этим элементам. Этот атрибут поддерживает три значения:
- lazy : указывает на материалы, которые являются хорошими кандидатами на ленивую загрузку.
- eager : материалы в элементах с таким значением атрибута нужно загрузить без промедления.
- auto : браузер самостоятельно примет решение о том, применять ли к материалам с этим значением атрибута ленивую загрузку.
В настоящее время работа над атрибутом loading для элементов и ведётся в рамках стандарта HTML
Примеры
Атрибут loading работает с элементами (в том числе с атрибутом srcset и внутри элемента ), а также с элементами .
Надо отметить, что мы используем тут формулировки наподобие следующей: «когда пользователь прокрутит страницу так, что её видимая область окажется поблизости от элемента». Точный момент начала загрузки изображения браузер определяет самостоятельно. В целом мы можем надеяться на то, что браузер начнёт загрузку материалов, загрузка которых была отложена, за некоторое время до того, как область страницы, содержащая их, окажется видимой пользователю. Это увеличит шансы того, что загрузка и вывод соответствующих материалов завершатся к тому моменту, когда пользователь их увидит.
Обратите внимание на то, что я предложил, чтобы атрибут, о котором идёт речь, назвали бы именно loading , так как такой подход к его именованию соответствует тому, что использовался при выборе имени для атрибута decoding. Предыдущие предложения, наподобие lazyload , не подошли, так как нужно было, чтобы этот атрибут поддерживал бы несколько значений ( lazy , eager и auto ).
Проверка поддержки атрибута loading браузерами
Мы принимали во внимание важность возможности применения JavaScript-библиотек для организации ленивой загрузки материалов (для кросс-браузерной поддержки этой возможности). Проверить, поддерживает ли браузер атрибут loading , можно так:
Обратите внимание на то, что атрибут loading можно использовать для прогрессивного расширения возможностей страницы. Браузеры, которые поддерживают этот атрибут, смогут организовать ленивую загрузку материалов при использовании loading=lazy , а браузеры, которые эту возможность не поддерживают, будут просто, как и прежде, загружать эти материалы.
Кросс-браузерная ленивая загрузка изображения
Если важна кросс-браузерная поддержка ленивой загрузки изображений, тогда недостаточно просто определить то, поддерживает ли браузер эту возможность, и, если это не так, воспользоваться соответствующей библиотекой, если при описании изображения в разметке используется конструкция наподобие .
В разметке нужно использовать что-то наподобие (а не src , srcset или ) для того чтобы избежать срабатывания обычной загрузки изображения браузерами, которые не поддерживают новый атрибут. Для того чтобы менять подобные атрибуты на те, которые нужно использовать при поддержке браузером атрибута loading , или для загрузки соответствующей библиотеки в том случае, если этот атрибут не поддерживается, можно использовать возможности JavaScript.
Вот пример того, как это может выглядеть:
Рассмотрим некоторые особенности этого кода:
- Изображения, которые видны пользователю сразу после загрузки страницы, описаны с помощью обычных тегов . Использование атрибута data-src без src приведёт к тому, что изображения, сразу после загрузки страницы, показаны не будут, поэтому, настраивая те изображения, которые должны быть видны сразу же после загрузки страницы, мы должны указывать атрибут src .
- При описании изображений, которые, сразу после загрузки страницы, пользователю не видны, мы используем атрибут data-src . Делается это для того чтобы предотвратить их обычную загрузку в браузерах, не поддерживающих атрибут loading . Если браузер этот атрибут поддерживает, мы меняем data-src на src .
- Если атрибут loading не поддерживается, мы загружаем вспомогательную библиотеку (lazySizes) и инициализируем её. Здесь мы используем class=lazyload для того чтобы указать библиотеке LazySizes на изображения, с которыми мы хотим работать, используя методику ленивой загрузки.
Демонстрационный пример
Тут можно посмотреть на пример страницы, на которой выполняется ленивая загрузка 100 изображений кошек. А вот, если интересно, видео загрузки этой страницы.
Особенности реализации поддержки атрибута loading в Chrome
Мы настоятельно рекомендуем, прежде чем пользоваться атрибутом loading в продакшне, дождаться появления его поддержки в стабильном релизе Chrome. Если же вам не терпится испытать эту возможность, тогда, возможно, вам будет интересно то, о чём мы сейчас поговорим.
Испытание атрибута loading
Для того чтобы прямо сейчас испытать новый атрибут, перейдите к странице настройки флагов Chrome ( chrome://flags ), включите флаги Enable lazy frame loading и Enable lazy image loading , и перезагрузите браузер.
Настройки браузера
Реализация методики ленивой загрузки материалов в Chrome основана не только на том, насколько близко видимая область страницы находится к этим материалам, но и на скорости соединения. Пороговые значения срабатывания ленивой загрузки материалов для разных скоростей соединения жёстко заданы в коде, но эти значения можно переопределить средствами командной строки. Вот пример переопределения настроек для изображений:
Вышеприведённая команда соответствует текущим настройкам, применяемым по умолчанию. Для того чтобы загрузка изображений начиналась бы в том случае, если позиция прокрутки страницы находится на расстоянии в 400 пикселей от изображения, все значения в этой команде нужно поменять на 400. Ниже приведён пример 1-пиксельной вариации этой команды (такая настройка используется в вышеупомянутом видео).
Весьма вероятно то, что стандартная конфигурация ленивой загрузки в Chrome изменится по мере стабилизации реализации этой возможности в ближайшие недели.
Инструменты разработчика
Особенности реализации поддержки атрибута loading в Chrome заключаются в том, что браузер, при загрузке страницы, запрашивает первые 2 Кб изображений у сервера в том случае, если он поддерживает технологию range request (запрос на диапазон). В первых 2 Кб изображений, наверняка, содержатся сведения об их размерах. Это позволяет браузеру генерировать местозаполнители, имеющие размеры, соответствующие размерам изображений. Кроме того, в эти 2Кб, если речь идёт о небольших изображениях вроде значков, весьма вероятно, входит всё изображение.
Загрузка фрагментов графических файлов
Chrome загружает оставшиеся данные изображений в тот момент, когда пользователь близок к тому, чтобы их увидеть. При работе с инструментами разработчика это может привести к тому, что в панели Network может «появиться» информация о двух загрузках изображения, а в панели Resource Timing будут выведены сведения о двух запросах, выполняемых для загрузки каждого изображения.
Определение сервером поддержки браузером атрибута loading
Соответствующая «подсказка», касающаяся поддержки атрибута loading , находится сейчас на ранней стадии рассмотрения.
Итоги
Автор этого материала предлагает всем, кто заинтересован в использовании атрибута loading при работе с элементами и , опробовать его, и поделиться с ним впечатлениями. Особенно ему интересно узнать о том, как, с точки зрения разработчиков, выглядят предложенные здесь механизмы кросс-браузерной поддержки ленивой загрузки данных, и о том, не упустил ли он, рассказывая о таких механизмах, какие-то пограничные случаи.
Поддержка встроенной ленивой загрузки изображений и iframe пришла в веб!
Начиная с Chrome 76 версии, вы можете использовать новый атрибут loading для ленивой загрузки ресурсов без необходимости писать для этого дополнительный код или использовать стороннюю JavaScript-библиотеку. Давайте рассмотрим детали.
Это видео демонстрирует пример этой функции:
Почему встроенная ленивая загрузка?
Встроенные iframe также используют много данных и могут вредить производительности страницы. Загрузка некритичных изображений и iframe только в тот момент, когда пользователь может увидеть их, улучшает скорость загрузки страницы, минимизирует нагрузку на пропускную способность канала пользователя и уменьшает использование памяти.
В данный момент существует два способа отложить загрузку изображений и фреймов, расположенных за пределами экрана:
- использование Intersection Observer API
- использование обработчиков событий scroll , resize или orientationchange
Атрибут loading
Сегодня Chrome уже загружает изображения с разным приоритетом, в зависимости от того, где они расположены относительно области просмотра устройства. Изображения ниже области просмотра загружаются с меньшим приоритетом, но всё ещё загружаются, как можно быстрее.
В Chrome 76 вы можете использовать атрибут loading , чтобы окончательно отложить загрузку изображений и фреймов за пределами экрана, до которых можно дойти прокруткой:
Поддерживаемые значения атрибута loading :
- auto : настройка режима ленивой загрузки, выставленная в браузере по умолчанию. То же, что отсутствие атрибута
- lazy : отсрочка загрузки ресурса до тех пор, пока он не достигнет расчетного расстояния от области просмотра
- eager : немедленная загрузка ресурса, несмотря на его расположение на странице
Порог расстояния загрузки
Все изображения и фреймы, видимые на странице без необходимости прокрутки, загружаются стандартно. Те, которые располагаются ниже области просмотра устройства, загружаются только тогда, когда пользователь прокручивает до них.
Расстояние, при котором начинается загрузка, не фиксировано и изменяется в зависимости от нескольких факторов:
- тип ресурса, который должен быть загружен (изображение или фрейм)
- включен ли "Lite mode" в браузере Chrome для Android
Загрузка изображений
Атрибут loading влияет на фреймы иначе, чем на изображения, в зависимости от того, является ли фрейм скрытым (скрытые фреймы часто используются для задач аналитики или общения). Chrome использует следующие критерии, чтобы определить, является ли фрейм скрытым:
- ширина и высота фрейма 4px или меньше
- применяются свойства display: none или visibility: hidden
- фрейм расположен за пределами экрана с помощью отрицательного позиционирования по осям X или Y
Есть ли планы расширить эту функцию?
Есть планы изменить режим отложенной загрузки браузера по умолчанию, чтобы автоматически отображать в таком режиме любые изображения и фреймы, загрузку которых можно отложить, если включен Lite mode в Chrome для Android.
Можно ли изменить расстояние до изображения или фрейма, при котором запускается отложенная загрузка?
Эти значения жестко закодированы и не могут быть изменены через API. Однако, они могут измениться в будущем, так как команда Chrome экспериментирует с разными пороговыми расстояниями и переменными.
Могут ли изображения, заданные через CSS-свойство background, получить атрибут loading?
Нет, в данный момент он может использоваться только тегами
Как работает атрибут loading с изображениями, которые находятся в области видимости, но не видны (например, карусель)?
В отложенном режиме загружаются только те изображения, которые находятся на определенном расстоянии от нижней грани области просмотра устройства. Все изображения выше области просмотра, независимо от того, видны они в данный момент, загружаются в обычном режиме.
Что, если я уже использую стороннюю библиотеку или скрипт для отложенной загрузки изображений или фреймов?
Атрибут loading не должен влиять на код, который в отложенном режиме загружает данные, но важно учитывать некоторые важные моменты:
- Если ваш сторонний загрузчик в отложенном режиме пытается загрузить изображения или фреймы раньше, чем их будет загружать Chrome в обычном режиме, то есть, на расстоянии, превышающем порог расстояния загрузки браузером, они все еще будут отложены и загружены по правилам обычного поведения браузера
- Если ваш сторонний загрузчик использует более короткое расстояние, чтобы определить, когда загружать конкретное изображение или фрейм, чем браузер, то поведение будет соответствовать настройкам вашего загрузчика
Другие браузеры поддерживают встроенную отложенную загрузку?
Атрибут loading можно рассматривать, как прогрессивное улучшение. Браузеры, которые поддерживают его, могут загружать изображения и фреймы в отложенном режиме. Те, что не поддерживают — пока что загружают изображения как обычно. С точки зрения кроссбраузерной поддержки, атрибут loading поддерживается в Chrome 76 и любых браузерах, основанных на базе Chromium 76. Также существует открытый баг про реализацию данной функции в Firefox.
Похожее API было предложено и использовалось в IE и Edge, но оно было сфокусировано на понижении приоритетов загрузки вместо полного её откладывания.
Как поступить с браузерами, которые еще не поддерживают встроенную отложенную загрузку?
Создайте полифил или используйте стороннюю библиотеку, чтобы загружать изображения на сайте в отложенном режиме. Свойство loading может быть использовано для определения, поддерживается ли функционал в браузере:
Например, lazysizes — популярная JavaScript библиотека для ленивой загрузки. Вы можете определить поддержку атрибута loading , чтобы загрузить эту библиотеку только, когда loading не поддерживается. Это работает следующим образом
Демонстрация работы. Испробуйте это в таким браузерах, как Firefox или Safari, чтобы увидеть фолбек в действии.
Библиотека lazysizes также обеспечивает плагин встроенной загрузки, который использует встроенную отложенную загрузку, когда это возможно, и задействует функционал библиотеки, когда в этом есть потребность.
Как отложенная встроенная загрузка влияет на рекламу на странице?
Вся реклама, представленная в виде изображений или фреймов, также загружается в отложенном режиме, как любые другие изображения или фреймы.
Как изображения обрабатываются, если веб-страницу распечатать?
Хотя функционала нет в Chrome 76, существует открытая проблема, обеспечивающая немедленную загрузку всех изображений и фреймов при печати страницы.
Заключение
Использование встроенной поддержки ленивой загрузки изображений и фреймов может существенно облегчить повышение производительности веб-страниц.
Если замечаете любое необычное поведение при включении этой функции в Chrome, сообщите об ошибке.
Один из моих любимых терминов на сегодняшний день — «ленивая загрузка». Честно говоря, когда несколько лет назад я его услышал, то улыбнулся. В этой статье рассмотрю, что именно означает этот термин применительно к трем наиболее часто используемым фронтенд-фреймворкам: Angular, React и Vue.js.
Нетерпеливая загрузка против ленивой
Нетерпеливая загрузка означает загрузку каждого компонента конкретного приложения, что создает потенциальные узкие места в производительности. Ленивая загрузка гарантирует, что данный компонент загружается только тогда, когда это необходимо, и ни секундой ранее.
Теперь вы можете подумать: это здорово, приложение станет более быстрым, будет загружаться быстрее. Однако если в вашем приложении есть модуль или компонент, выполнение и загрузка которого занимает значительное время, это все равно означает замедление работы приложения. По этой причине вы можете использовать предварительную загрузку компонента в фоновом режиме. Эта техника требует отдельной статьи — здесь я не буду вдаваться в детали, а просто познакомлю вас с этой концепцией ближе к концу.
О типовых проектах для примера
Примеры приложений, созданных во всех трех фреймворках, очень похожи. Каждый из них показывает следующие две вещи:
- как использовать ленивую загрузку компонента внутри страницы;
- как использовать ленивую загрузку компонента с помощью маршрутизации.
Чтобы получить доступ к проекту, пожалуйста, посетите репозиторий GitHub.
Angular
Давайте начнем наше обсуждение с Angular, потому что у этого фронтенд-фреймворка есть особенность, когда речь заходит о ленивой загрузке компонентов. На самом деле, в Angular модуль — самая маленькая логическая единица, которую мы можем рассматривать для ленивой загрузки через маршрутизацию, потому что компоненты всегда принадлежат модулям.
Компонент Фибоначчи
Вот как наш компонент выглядит в Angular:
Поскольку это отдельный компонент и он уже принадлежит корневому компоненту Angular, мы можем загрузить его на страницу.
Загрузка компонента на странице
Сначала давайте рассмотрим, как загрузить компонент на страницу. Для этого мы добавим следующее:
Вместе со следующим TypeScript-кодом:
Что действительно интересно в этой ситуации, так это то, что компонент Fibonacci будет загружаться только в том случае, если значение showFibonacci равно true . Это означает, что управлять ленивой загрузкой можно только с помощью директивы ngIf . Это происходит потому, что Angular не просто показывает или скрывает компонент в DOM — он добавляет или удаляет его на основе указанного условия.
Ленивая загрузка или роутинг
Во время обсуждения ленивой загрузки через маршрутизацию в Angular мы установили, что необходимо создать функциональный модуль (больше про функциональные модули Angular).
Создать функциональный модуль в нашем приложении вместе со вторым компонентом можно с помощью Angular CLI: ng g m fibonacci && ng g c --module=fibonacci fibonacci .
После создания модуля мы можем назначить ему компонент, а затем добавить его в основной модуль маршрутизации ( app-routing.module.ts ):
Обратите внимание, что мы используем loadChildren() и импортируем модуль как часть определения маршрута. Это означает, что модуль будет загружен только тогда, когда будет активен соответствующий маршрут.
Сравните код выше с этим:
Этот код будет загружать FibonacciComponent сразу. Это вызовет значительную задержку в отображении главной страницы приложения. Зачем блокировать главную страницу с помощью операции в компоненте, который мы даже не видим или не используем?
Теперь давайте рассмотрим, как добиться ленивой загрузки при разработке с помощью фреймворка Vue.js. Давайте создадим Vue-приложение с помощью интерфейса командной строки Vue CLI и добавим новый компонент. Взгляните на то, как будет выглядеть часть компонента :
Обратите внимание: причина, по которой нам нужно выполнить вычисление вне блока export default <> , в том, что иначе мы не сможем имитировать операцию блокировки. Естественно, Vue.js имеет как свойство mounted , так и свойство method , доступные для компонентов, что позволит вызывать код только при создании компонента.
Ленивая загрузка одиночного компонента
В Vue.js мы можем использовать директиву v-if для добавления или удаления элемента из DOM, и так лениво загружать компонент. Однако есть еще много вещей, которые нам нужно сделать, когда речь заходит о сравнении Vue.js и Angular. Взгляните на следующий код:
Это может показаться логичным способом сделать ленивую загрузку, однако при открытии страницы становится очевидным, что начальное время загрузки действительно велико. Это происходит потому, что компонент загружается сразу независимо от условия v-if . Другими словами, мы говорим Vue загрузить все компоненты независимо от их добавления в DOM.
Производительность загрузки существенно изменится, если мы внесем следующие изменения в элемент :
Добавляя выражение import в инлайн-стиле, как часть свойства компонента, мы включаем ленивую загрузку для компонента Fibonacci . Теперь обновление приложения будет означать, что главная страница загружается действительно быстро. Только когда компонент Fibonacci отображается на главной странице, есть некоторая задержка.
Ленивая загрузка компонентов или роутинг
Ленивая загрузка компонентов в Vue.js следует аналогичной схеме, которую мы обсуждали ранее. Посмотрите на роутер:
Такой маршрутизатор вы, возможно, использовали или видели раньше в приложениях Vue. Несмотря на то что он функциональный, вы можете наблюдать следующую проблему. Если у нас есть блокирующая операция в компоненте Fibonacci , она будет блокировать загрузку компонента Home.
Чтобы устранить эту проблему, мы можем прибегнуть к привычному паттерну и импортировать компонент в определение маршрута:
Теперь загрузка главной страницы не будет заблокирована, а компонент Fibonacci загружается только тогда, когда пользователь выбирает нужный маршрут.
React
И последнее, но не менее важное: давайте рассмотрим, как добиться ленивой загрузки в React. Приложение было создано с помощью CLI create-react-app и, как и в предыдущих примерах, у нас есть компонент с некоторой блокирующей операцией:
Ленивая загрузка одиночного компонента
По умолчанию, как и в предыдущих примерах с использованием других фреймворков, импорт компонентов будет означать нетерпеливую загрузку:
Внесение этих изменений в приложение означает, что компонент Home будет загружаться быстро, а компонент Fibonacci будет загружаться только тогда, когда пользователь попросит об этом.
Ленивая загрузка или роутинг
Тот же подход применим и к ленивой загрузке компонента с помощью маршрутизации, включая использование Suspense и lazy() :
Учитывая вышеприведенный маршрутизатор, в сочетании с оператором import это означает, что компонент Fibonacci будет загружен сразу. Теперь, надеюсь, понятно, почему это не идеально. Чтобы включить ленивую загрузку компонентов через маршрутизацию, нужно изменить код, чтобы использовать вышеупомянутый компонент Suspense и метод lazy () :
Проверки через Инструменты разработчика
Чтобы увидеть, что происходит под капотом, мы можем использовать панель DevTools браузера.
То, что обсуждается в этом разделе, справедливо для всех фреймворков, которые рассматриваются в этой статье.
В первую очередь мы можем проверить, что когда наше приложение использует нетерпеливую загрузку, весь JavaScript загружается и выполняется браузером. Как это можно увидеть в DevTools? Нажатие на ссылку Фибоначчи не загружает дополнительный JavaScript.
Обновление кода для использования ленивой загрузки будет означать, что для начала будет загружено меньше JavaScript. Когда компонент загружается, появляется новый запрос JavaScript — это тот самый фрагмент, который мы только что запросили.
Взгляните на скриншоты ниже, чтобы увидеть состояние до и после. Я также рекомендую вам запустить эти образцы самостоятельно и поиграть с ними в DevTools.
Еще одна вещь
Конечно, ленивая загрузка компонента не решает одну проблему: время выполнения для проблемного модуля. В нашем случае компонент, конечно, раздутый, поскольку он выполняет некоторые тяжелые математические вычисления, но независимо от этого пользователи все равно могут посещать адрес и сталкиваться с проблемами производительности.
Существуют определенные стратегии, которые помогут преодолеть эту проблему. Со всеми фреймворками мы можем использовать волшебные комментарии через Webpack для динамического добавления prefetch (или preload ) через тег на страницу. Просто поместите волшебные комментарии перед именем компонента, внутри импорта:
В заключение
Ленивая загрузка — принцип, который позволяет выбрать, какие компоненты будут загружены позже в приложении, чтобы обеспечить лучшую производительность. Это стратегия, которую можно выбрать вместо нетерпеливой загрузки, когда все компоненты загружаются одновременно, вызывая потенциальные проблемы с производительностью.
Читайте также: