Поиск по сайту:

Как использовать предварительную загрузку и предварительную выборку в HTML для загрузки ресурсов

Введение

Загрузка ресурсов на страницу — важная часть достижения оптимальной веб-производительности и бесперебойного взаимодействия с пользователем. Обычно реальные приложения загружают несколько файлов CSS, шрифтов, JavaScript и изображений. Эти активы по умолчанию блокируют рендеринг, что снижает производительность загрузки.

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

Предпосылки

Для выполнения этого урока вам понадобится следующее:

  • Google Chrome загружен и установлен. Это руководство основано на версии 86.0.4240.80 Google Chrome.
  • Понимание HTML, которое вы можете найти в серии статей Как создать веб-сайт с помощью HTML.
  • Основное понимание JavaScript. Эта серия статей «Как кодировать в JavaScript» поможет вам в этом.

Шаг 1 — Понимание блокировки рендеринга

Когда запрос к ресурсу блокирует рендеринг, это означает, что событие window.onload не будет запущено, пока этот запрос не завершится. В современных одностраничных приложениях большинство ресурсов, таких как файлы CSS и JavaScript вместе с изображениями, зависят от этого события, чтобы начать работу. Это означает, что части пользовательского интерфейса не начнут рендеринг или отображение на экране, пока не завершится загрузка запросов, блокирующих рендеринг.

Чтобы увидеть это в действии, создайте файл HTML со стандартным шаблоном HTML. Это можно сделать в выбранном вами редакторе кода:

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>

  </body>
</html>

В голове используйте тег <link> для доступа к вашему Roboto:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
  </head>
  <body>

  </body>
</html>

Добавьте теги <style>. С помощью CSS установите для font-family для всех тегов p значение Roboto:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
      <style>
      p {
        font-family: Roboto;
      }
    </style>
  </head>
  <body>

  </body>
</html>

С вашими метаданными и CSS вы можете создать <p> внутри <body> с надписью Hello:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
    <style>
      html {
        font-family: Roboto;
      }
    </style>
  </head>
  <body>
    <p> Hello </p>
  </body>
</html>

Чтобы увидеть блокировку рендеринга в действии, добавьте теги <script> в <body>. Создайте функцию JavaScript, используя window.onload, которая будет console.log выводить сообщение Loaded:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
    <style>
      html {
        font-family: Roboto;
      }
    </style>
  </head>
  <body>
    <p> Hello </p>

    <script>
      window.onload = function () {
        console.log('Loaded');
      }
    </script>
  </body>
</html>

Создав код, откройте HTML-файл в Chrome. Затем откройте Инструменты разработчика и перейдите на вкладку Сеть. Понизьте соединение до Slow 3G и перезагрузите страницу.

Сообщение Loaded регистрируется в консоли сразу после загрузки файла CSS, как показано на следующем изображении:

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

Шаг 2 — Предварительная загрузка ресурсов

Чтобы предотвратить блокировку рендеринга по умолчанию и убедиться, что ресурсы страницы, такие как шрифты и CSS, начинают загружаться на ранних этапах жизненного цикла страницы, вам необходимо реализовать предварительную загрузку. Значение атрибута rel=preload используется для предварительной загрузки ресурсов. Его можно применять к нескольким форматам файлов, включая CSS, JS, шрифты, изображения и многое другое. В зависимости от типа файла, который вы хотите предварительно загрузить, может также потребоваться включить соответствующий атрибут as вместе с rel=preload. Для CSS as= необходимо установить равным style. Для JavaScript as= необходимо установить равным script.

Вернитесь к файлу HTML и измените предыдущий <link>. Установите rel равным preload. Добавьте атрибут as, равный style:

<head>
    <link
      rel="preload"
      as="style"
      href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
    <style>
      html {
        font-family: Roboto;
      }
    </style>
  </head>

Открыв свой HTML-файл в Google Chrome, вернитесь в Инструменты разработчика и загрузите страницу с сетью, по-прежнему установленной на Медленный 3G. Вы увидите, что журнал Loaded появляется прямо перед началом запроса CSS, как показано на следующем рисунке:

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

Шрифт нужно применять сразу после загрузки. Для этого добавьте атрибут onload в тег <link>. Установите onload равным this.rel=stylesheet:

<link
  rel="preload"
  as="style"
  onload="this.rel = 'stylesheet'"
  href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>

Установив для атрибута rel значение stylesheet в onload, браузер получает указание использовать ресурс. Поскольку он уже был загружен в память, он не загружает его снова.

Поскольку решение onload основано на JavaScript, добавьте теги <noscript>, которые содержат исходные теги <link> с rel установите значение stylesheet:

<link
  rel="preload"
  as="style"
  onload="this.rel = 'stylesheet'"
  href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'>
<noscript>
  <link
    rel="stylesheet"
    href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
</noscript>

Это обеспечит отображение шрифта, если JavaScript отключен или не загружается.

Теперь вы знаете, как предварительно загрузить ресурсы веб-страницы. Иногда вместо этого может потребоваться предварительная выборка ресурсов.

Шаг 3 — Предварительная загрузка ресурсов

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

Чтобы реализовать предварительную загрузку на HTML-странице, измените значение rel на prefetching:

<link
  rel="prefetch"
  as="style"
  onload="this.rel = 'stylesheet'"
  href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'>

Предварительная выборка и предварительная загрузка CSS могут помочь повысить производительность сети. Вы также можете применить предварительную загрузку к вашему JavaScript. Предварительная загрузка JavaScript отличается от предварительной загрузки ресурсов CSS.

Шаг 4 — Предварительная загрузка JavaScript

Предварительная загрузка ресурсов JavaScript выполняется по-другому. Этот пример, взятый из этой статьи Google Developers о предварительной загрузке, показывает следующее:

<link rel="preload" href="used-later.js" as="script">
<!-- ... -->
<script>
  var usedLaterScript = document.createElement('script');
  usedLaterScript.src = 'used-later.js';
  document.body.appendChild(usedLaterScript);
</script>

Примечание. Фрагмент кода воспроизведен из созданной работы и лицензии Apache 2.0.

Важным шагом здесь является установка атрибута src файла и вставка его в DOM.

Заключение

Предварительная загрузка и предварительная выборка позволяют контролировать загрузку ресурсов и помогают повысить производительность сети. С помощью этого руководства вы реализовали подсказки ресурсов для предварительной загрузки и предварительной выборки таких ресурсов, как CSS, шрифты и JavaScript. Это поможет вам создавать более быстрые прогрессивные веб-приложения.

Чтобы создать прогрессивные веб-приложения с помощью Angular, вам может помочь это руководство How to Build a PWA in Vanilla JavaScript.