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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

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

Автор: Nehal Khan

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.