Производительность загрузки страницы с методами загрузки скриптов

От автора: когда вы думаете об улучшении производительности загрузки страницы, вы пытаетесь оптимизировать внутренний код, соединения с базой данных и так далее. Но один из самых простых способов повысить скорость загрузки страницы — это внести небольшие изменения в способ загрузки JavaScript с помощью тега script на HTML-странице.

Проблема с обычным способом загрузки JavaScript

Когда вы загружаете JavaScript на HTML-страницу, вы добавляете тег script в заголовок веб-страницы. Здесь есть проблема, но чтобы лучше ее понять, вам нужно понимать, как отображается веб-страница.

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

Но когда синтаксический анализатор встречает тег script, процесс рендеринга HTML останавливается и ждет, пока все скрипты не будут выбраны и выполнены. Затем возобновляется рендеринг остальной части HTML-страницы. Вы можете лучше понять этот процесс, посмотрев на код и визуализацию ниже.

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <title>Script in the head tag</title> <script src="index.js"></script> </head> <body> <!-- All the HTML content here --> </body>
</html>

Отрисовка потока, когда тег скрипта находится в заголовке страницы

Производительность загрузки страницы с методами загрузки скриптов

Когда скрипт находится в начале страницы

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

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

1. Поместите тег скрипта внизу страницы.

Если вы разместите тег script внизу страницы после основного содержимого, производительность улучшится. Содержимое страницы будет загружено и проанализировано, так как при рендеринге HTML отсутствует блокировка, поскольку вы поместили скрипт в конец. Загрузка и выполнение будут иметь место только после завершения рендеринга всего содержимого страницы.

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <title>Script at the end of page</title> </head> <body> <!-- All the HTML content here --> <script src="index.js"></script> </body>
</html>

Отрисовка потока, когда тег скрипта находится внизу страницы

Производительность загрузки страницы с методами загрузки скриптов

Когда скрипт находится в конце страницы

Этот метод дает некоторое улучшение производительности по сравнению с размещением тега script в заголовке страницы. Здесь у вас все еще есть время ожидания, потому что загрузка скрипта не начнется, пока содержимое страницы не будет отображено. Этот метод избавляет от проблемы с загрузкой контента, но по-прежнему требует ожидания загрузки и выполнения скрипта. Разбор HTML завершается, затем скрипт загружается и выполняется, и, наконец, запускается событие document ready.

Мы все еще можем улучшить производительность страницы, используя два других метода в зависимости от требований пользователя.

2. Добавьте атрибут async в тег скрипта.

Когда синтаксический анализатор встречает тег script с атрибутом async, загрузка скриптов происходит параллельно с синтаксическим анализом HTML-страницы. Выполнение скрипта происходит сразу же после завершения загрузки, при этом анализ HTML приостанавливается. Как только выполнение скрипта завершается, синтаксический анализ возобновляется.

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <title>Script with async attribute</title> <script async src="index.js"></script> </head> <body> <!-- All the HTML content here --> </body>
</html>

Отрисовка потока для тега скрипта с атрибутом async

Производительность загрузки страницы с методами загрузки скриптов

Загрузка скрипта с атрибутом async

Поскольку скрипты могут быть разных размеров и async скрипты запускаются сразу после их получения, нет гарантии, что они будут выполнены в том порядке, в котором они написаны. Итак, если есть какая-либо зависимость между скриптами, и если одна из них скрипт необходимо выполнять по порядку, тогда вам следует избегать этого атрибута. В этом случае у вас не будет четкого представления о том, когда будет завершен синтаксический анализ или когда будет запущено событие document ready.

3. Добавьте атрибут defer в тег скрипта

Когда парсер обнаруживает тег script с атрибутом defer, загрузка скрипта происходит параллельно с синтаксическим анализом HTML-страницы. Выполнение скрипта происходит только после завершения синтаксического анализа HTML.

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <title>Script with defer attribute</title> <script defer src="index.js"></script> </head> <body> <!-- All the HTML content here --> </body>
</html>

Отрисовка потока для тега скрипта с атрибутом defer

Производительность загрузки страницы с методами загрузки скриптов

Загрузка скрипта с атрибутом defer

И когда мы используем атрибут defer, порядок выполнения сохраняется в зависимости от порядка на странице. Этот атрибут выполняет скрипты после завершения всего синтаксического анализа HTML перед запуском события document ready.

Заключение

Подведем итог тому, что вы узнали в этой статье:

Поместите тег script внизу страницы, чтобы остановить блокирующее поведение при отрисовке страницы, затем загрузите скрипт и выполните его после завершения анализа содержимого HTML.

Используйте атрибут async внутри тега script, чтобы загрузить скрипт параллельно с отображением элементов HTML и выполнить скрипт, как только он станет доступен.

Используйте атрибут defer внутри тега script, чтобы загружать скрипт параллельно с визуализацией элементов HTML и выполнять скрипт только после завершения визуализации всей HTML-страницы.

Производительность загрузки страницы с методами загрузки скриптов

Различия между разными способами загрузки

Спасибо за прочтение и удачного обучения!

Автор: Nehal Khan

Источник: https://medium.com

Редакция: Команда webformyself.