С одной стороны, браузеру всё равно, когда мы подключили скрипт: он в любом случае его загрузит и будет с ним работать. С другой — от этого может зависеть скорость загрузки страницы. Рассказываем, какие бывают варианты и что будет в каждом из них.
Как подключить скрипт к странице
Допустим, у нас есть готовый скрипт, который подсвечивает манипуляцию и пропаганду на сайте. Мы сохранили код в файле script.js и хотим подключить его к своей странице. Для этого нам нужно добавить скрипт в раздел или с помощью команды:
Например, вот как это сделать в разделе :
Заголовок
А вот — в разделе , где находится основное содержимое страницы:
Заголовок
В обоих случаях браузер загрузит нужный нам скрипт, но скорость загрузки страницы при этом может быть разной.
Как скрипт влияет на скорость загрузки
Когда браузер получает HTML-файл от сервера, он начинает обрабатывать его последовательно, шаг за шагом выполняя команды, которые там написаны. Если на странице сначала идёт заголовок, потом текст и картинка, то браузер и будет рисовать всё на странице именно в такой последовательности.
Тег подключения скрипта — такой же тег для браузера, как тег заголовка или тег абзаца
. Это значит, что, как только браузер дойдёт до тега , он остановит формирование внутреннего визуального каркаса страницы до тех пор, пока не загрузится скрипт. Если в нём есть самозапускающиеся функции — они начнут свою работу, а браузер всё это время будет ждать и не будет переходить к следующему тегу.
Получается, что браузер не сможет собрать финальную картинку для показа, пока не отработает все скрипты, которые идут до этого. Если мы подключим скрипт в самом начале страницы или в разделе , то браузер сначала займётся ими, а потом только всем остальным. Если скриптов много или они большие, страница будет грузиться долго и пользователь будет это время просто ждать.
Как лучше сделать
Сейчас при вёрстке страницы принято подключать все скрипты в самом конце кода, перед тем, как закроется тег
:
Заголовок
Браузер получает HTML-код страницы и начинает его обрабатывать тег за тегом.
Как только визуальные теги закончились — браузер выводит страницу на экран и пользователь уже видит готовый сайт.
После этого браузер переходит к загрузке скрипта и, если нужно, — выполняет функции, которые там прописаны.
С таким подходом мы не тратим время на полную загрузку всех ресурсов, а сразу показываем читателю нужный ему материал, а в это время начинают грузиться и работать скрипты. Внешне это выглядит так, что сайт начал открываться быстрее, а работать — точно так же.
Лайфхак: асинхронная загрузка
Есть две внутренних атрибута, которые могут регулировать порядок загрузки скриптов на странице, — defer и async.
Defer. Если нам нужно, чтобы скрипт загружался фоном, параллельно со страницей, при объявлении скрипта можно добавить атрибут defer :
В этом случае скрипт будет загружаться параллельно с основной страницей, но не будет выполняться до тех пор, пока она не загрузится полностью. Мы такое уже делали, когда писали свой таймер для спорта. При этом отложенные так скрипты будут выполняться в той же последовательности, как они прописаны в коде:
Async. Этот атрибут даёт скрипту независимость: он будет загружаться фоном, параллельно со страницей, как и с defer , и выполнится после своей загрузки. Это значит, что скрипт не ждёт, пока загрузится всё остальное, а просто выполняется по готовности:
При таком подключении скрипт может сработать в любой момент — всё зависит только от скорости его загрузки. Иногда это может привести к тому, что сайт будет работать не так, как нужно: скрипт может попытаться обратиться к элементам на странице, которые ещё не загрузились. С другой стороны, таким способом на сайт часто добавляют счётчики посещаемости: неважно, когда он сработает, главное, чтобы просто сработал.
Если таким способом подключить несколько скриптов, то они тоже выполнятся в случайном порядке, что за чем успеет загрузиться, а не в той последовательности, которая написана в коде:
Что дальше
В следующий раз мы соберём тестовую страницу с объёмными скриптами и посмотрим, как меняется время загрузки в зависимости от того, где и как мы подключили скрипт — в начале кода или в конце.
Установка собственных userscript в Opera и Google Chrome
В браузере Opera подключить собственные скрипты весьма просто. Создаем папку, закидываем туда свои .js файлы. Затем на вкладке нужного сайта кликаем правой кнопкой мыши, выбираем пункт меню настройки для сайта и выбираем вкладку скрипты. В пункте Папка пользовательских скриптов JavaScript находим созданную папку. Вот и все. Скрипты автоматически будут загружены для соответствующем сайте. Единственное, что нужно помнить — это порядок их загрузки. Опыт показывает, что скрипты загружаются в алфавитном порядке. К примеру jquery.js будет загружен раньше чем user.js. Это нужно помнить, когда подключаете jQuery, если его еще нет ( да, Вы не поверите, но есть еще сайты без jQuery ). Еще один тонкий момент: скрипты будут загружены для всех страниц сайта, в том числе и для всех фреймов. И соответственно будут выполняться для всех фреймов. Чтобы скрипт выполнялся только в главном фрейме, я делаю так
if( !self.parent.frames.length )< // тут код >
Подключить userscript в Хроме, не намного сложнее. Он устанавливается, как обычное расширение и требует директив для выполнения в начале скрипта. К примеру таких
// ==UserScript== // @name myUserJS // @description Мой самый первый юзерскрипт // @author Leroy // @license MIT // @version 1.3 // @include http://yandex.ru/* // ==/UserScript== if( !self.parent.frames.length )
тут важны две строки @version и @include
@include — показывает на каком сайте запускать скрипт. А @version необходимо каждый раз менять, при обновлении скрипты, иначе будет вызываться кешированная версия расширения.
Чтобы установить скрипт нажимаем Настройки > Инструменты > Расширения. Теперь просто перетаскиваем сюда свои скрипты и и соглашаемся с установкой.
Тут тоже есть особенность: скрипты копируются Хромом, поэтому чтобы обновить нужно установить их заново. Не забывая сменить @version
Зачем Вам все это может понадобиться? Пища для размышления: все больше крупных сайтов делают проверку на выполнение js браузером, парсить их curl-ом уже не так просто, как раньше. Приходится изобретать более сложные способы парсинга. Вот тут могут пригодится эти скрипты. Если кому интересно, могу написать статейку, как писать парсеры на основе userscript. Одна статья по этой тематике уже есть, но в ней используются Расширения Chrome для написания парсеров. Здесь же можно добиться максимальной эмуляции человеческого поведения, так сказать написать свой human emulator.
Userscripts можно использовать и для раскрутки своего сайта. К примеру установка ряда скриптов будет добавлять некий функционал Вашему ресурсу. Пример надуманный, но также есть над чем поразмыслить.
Думаю такие плюшки положительно повлияют на seo продвижение сайта. Заказать поисковое продвижение сайтов можно на специальных ресурсах, а вот собственную раскрутку нужно делать своими руками.
Спасибо за внимание.
Оставлять комментарии могут только зарегистрированные пользователи
Внешние скрипты, порядок исполнения
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/script-async-defer.
Если JavaScript-кода много – его выносят в отдельный файл, который подключается в HTML:
Здесь /path/to/script.js – это абсолютный путь к файлу, содержащему скрипт (из корня сайта).
Браузер сам скачает скрипт и выполнит.
Можно указать и полный URL, например:
Вы также можете использовать путь относительно текущей страницы. Например, src=»https://learn.javascript.ru/lodash.js» обозначает файл из текущей директории.
Чтобы подключить несколько скриптов, используйте несколько тегов:
На заметку:
Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл.
Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего кеша.
Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера.
Если указан атрибут src , то содержимое тега игнорируется.
В одном теге SCRIPT нельзя одновременно подключить внешний скрипт и указать код.
Вот так не сработает:
Нужно выбрать: либо SCRIPT идёт с src , либо содержит код. Тег выше следует разбить на два: один – с src , другой – с кодом, вот так:
Асинхронные скрипты: defer/async
Браузер загружает и отображает HTML постепенно. Особенно это заметно при медленном интернет-соединении: браузер не ждёт, пока страница загрузится целиком, а показывает ту часть, которую успел загрузить.
Если браузер видит тег , то он по стандарту обязан сначала выполнить его, а потом показать оставшуюся часть страницы.
Например, в примере ниже – пока все кролики не будут посчитаны – нижний