картинка

Котировки Форекс от Investing.com Россия.
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Для Вебмастера » JavaScript » 03 Внешние скрипты и порядок исполнения
03 Внешние скрипты и порядок исполнения
VodyaДата: Вторник, 04.08.2015, 13:51 | Сообщение # 1
Администратор
Группа: Гл.Администратор
Сообщений: 107
Репутация: 100
Статус: Оффлайн
Если <strong>JavaScript</strong>-кода много — его выносят в отдельный файл, который подключается в HTML:
<script src="/path/to/script.js"></script>
Здесь /path/to/script.js — это абсолютный путь к файлу, содержащему скрипт (из корня сайта). Браузер сам скачает скрипт и выполнит.
Можно указать и полный URL, например:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
Также можно использовать путь относительно текущей страницы. Например, src="lodash.js" обозначает файл из текущей директории.
Для подключения нескольких скриптов, используется несколько тегов:
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
...


Внимание!
В HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл. Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего кеша. Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера.
При указывании атрибут src, то содержимое тега игнорируется. В одном теге SCRIPT нельзя одновременно подключить внешний скрипт и указать код.
Вот так не cработает:
<script src="file.js">
alert(1); // так как указан src, то внутренняя часть тега игнорируется
</script>

Необходимо выбрать: либо SCRIPT идёт с src, либо содержит код. Тег выше следует разбить на два: один — с src, другой — с кодом, вот так:
<script src="file.js"></script>
<script>
alert( 1 );
</script>


Асинхронные скрипты: defer/async
Браузер загружает и отображает HTML постепенно. Особенно это заметно при медленном интернет-соединении: браузер не ждёт, пока страница загрузится целиком, а показывает ту часть, которую успел загрузить.
Если браузер видит тег <script>, то он по стандарту обязан сначала выполнить его, а потом показать оставшуюся часть страницы.
Например, в примере ниже — пока все кролики не будут посчитаны — нижний

не будет показан:
<span style="color:#38761D"><!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

Начинаем считать:</p>
<script>
alert( 'Первый кролик!' );
alert( 'Второй кролик!' );
alert( 'Третий кролик!' );
</script>

Кролики посчитаны!</p>
</body>

</span>
Такое поведение называют «синхронным». Как правило, оно вполне нормально, но есть важное следствие.
Если скрипт — внешний, то пока браузер не выполнит его, он не покажет часть страницы под ним.
В таком документе, пока не загрузится и не выполнится big.js, содержимое body будет скрыто:

<head>
<script src="big.js"></script>
</head>
<body>
Этот текст не будет показан, пока браузер не выполнит big.js.
</body>

</span>
А действительно ли мы этого хотим? То есть, действительно ли оставшуюся часть страницы нельзя показывать до загрузки скрипта?
Есть ситуации, когда мы не только НЕ хотим такой задержки, но она даже опасна.
Например, при подключении внешнего скрипта, который показывает рекламу или вставляет счётчик посещений, а затем идёт наша страница. Конечно, неправильно, что пока счётчик или реклама не подгрузятся — оставшаяся часть страницы не показывается. Счётчик посещений не должен никак задерживать отображение страницы сайта. Реклама тоже не должна тормозить сайт и нарушать его функционал.
А что, если сервер, с которого загружается внешний скрипт, перегружен? Посетитель в этом случае может ждать очень долго!
Вот пример, с подобным скриптом (стоит искусственная задержка загрузки):

Важная информация не покажется, пока не загрузится скрипт.</p>
<script src="https://js.cx/hello/ads.js?speed=0"></script>

...Важная информация!</p>

Что же тогда делать?
Можно поставить все подобные скрипты в конец страницы — это уменьшит проблему, но не избавит от неё полностью, если скриптов несколько. Допустим, в конце страницы 3 скрипта, и первый из них тормозит — получается, другие два его будут ждать — тоже нехорошо.
Кроме того, браузер дойдёт до скриптов, расположенных в конце страницы, они начнут грузиться только тогда, когда вся страница загрузится. А это не всегда правильно. Например, счётчик посещений наиболее точно сработает, если загрузить его пораньше.
Поэтому «расположить скрипты внизу» — не лучший выход.
Кардинально решить эту проблему помогут атрибуты async или defer:

Атрибут async
Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении <script async src="..."></span> браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен — он выполнится.

Атрибут defer
Поддерживается всеми браузерами, включая самые старые IE. Скрипт также выполняется асинхронно, не заставляет ждать страницу, но есть два отличия от async.
Первое — браузер гарантирует, что относительный порядок скриптов с defer будет сохранён.
То есть, в таком коде (с async) первым сработает тот скрипт, который раньше загрузится:
<span style="color:#38761D"><script src="1.js" async></script>
<script src="2.js" async></script>

А в таком коде (с defer) первым сработает всегда 1.js, а скрипт 2.js, даже если загрузился раньше, будет его ждать.
<script src="1.js" defer></script>
<script src="2.js" defer></script>

Поэтому атрибут defer используют в тех случаях, когда второй скрипт 2.js зависит от первого 1.js, к примеру — использует что-то, описанное первым скриптом.
Второе отличие — скрипт с defer сработает, когда весь HTML-документ будет обработан браузером.
Например, если документ достаточно большой…
<script src="async.js" async></script>
<script src="defer.js" defer></script>


Много много много разного
Скрипт async.js выполнится, как только загрузится — возможно, до того, как весь документ готов. А defer.js подождёт готовности всего документа.
Это бывает удобно, когда мы в скрипте хотим работать с документом, и должны быть уверены, что он полностью получен.

Внимание!
При одновременном указании async и defer в современных браузерах будет использован только async, в IE9- — только defer (не понимает async).

Атрибуты async/defer — только для внешних скриптов
Атрибуты async/defer работают только в том случае, если назначены на внешние скрипты, т.е. имеющие src. При попытке назначить их на обычные скрипты script, они будут проигнороированы.
Пример с async:

Важная информация теперь не ждёт, пока загрузится скрипт...</p>
<script async src="https://js.cx/hello/ads.js?speed=0"></script>

...Важная информация!</p>

При запуске вы увидите, что вся страница отобразилась тут же, а alert из внешнего скрипта появится позже, когда загрузится скрипт.</span>
 
Форум » Для Вебмастера » JavaScript » 03 Внешние скрипты и порядок исполнения
Страница 1 из 11
Поиск:

| Sitemap | Sitemap-Forum