От автора: когда вы думаете об улучшении производительности загрузки страницы, вы пытаетесь оптимизировать внутренний код, соединения с базой данных и так далее. Но один из самых простых способов повысить скорость загрузки страницы — это внести небольшие изменения в способ загрузки JavaScript с помощью тега script на HTML-странице.
Проблема с обычным способом загрузки JavaScript
Когда вы загружаете JavaScript на HTML-страницу, вы добавляете тег script в заголовок веб-страницы. Здесь есть проблема, но чтобы лучше ее понять, вам нужно понимать, как отображается веб-страница.
Когда браузер открывает веб-страницу, он начинает отображать страницу тег за тегом и начинает создавать модель DOM. И всякий раз, когда парсер видит теги для загрузки изображений и таблиц стилей, эти запросы обрабатываются параллельно с визуализацией.
Но когда синтаксический анализатор встречает тег script, процесс рендеринга HTML останавливается и ждет, пока все скрипты не будут выбраны и выполнены. Затем возобновляется рендеринг остальной части HTML-страницы. Вы можете лучше понять этот процесс, посмотрев на код и визуализацию ниже.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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 отсутствует блокировка, поскольку вы поместили скрипт в конец. Загрузка и выполнение будут иметь место только после завершения рендеринга всего содержимого страницы.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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 приостанавливается. Как только выполнение скрипта завершается, синтаксический анализ возобновляется.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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
Источник: //medium.com
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Смотреть