От автора: когда вы думаете об улучшении производительности загрузки страницы, вы пытаетесь оптимизировать внутренний код, соединения с базой данных и так далее. Но один из самых простых способов повысить скорость загрузки страницы — это внести небольшие изменения в способ загрузки 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.