Асинхронная загрузка JQuery?

303

28 марта 2017, 12:43

Google SpeedTest просит, чтобы не было в коде блокирующего загрузок js, и использовались async и defer.

Но у меня по чему то при использование этих тегов JQuery скрпты напрочь отказываются работать после добавления этих тегов. В чем может быть проблема?

<head> 
    <script async type="text/javascript" src="/template/js/jquery.js"></script> 
</head>

Answer 1

Причина в том что jquery должен использоватся так, как его рекомендуют использовать. К примеру можно использовать с помощью официальных cdn. В вашем случае с async происходит догрузка jquery после того как он востребован "во всех ваших скриптах". А нужно его грузить до того как мы его пишем в своем коде. Рекомендация использовать код в начале <head>: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

для jquery не нужно использовать async но даже если вы используете его, то свой код в большинстве случаев нужно заворачивать в это. Мне кажется вы этого не сделали.

$(document).ready(function (){ //код });

Будет вызывать ваш код после того как страница готова. async собственно подгружает асинхронно скрипты. И async обычно используют для второстепенных скриптов а также больших скриптов, например для отрисовки сложых эллементов баннерной рекламы. Можете просмотреть любые 10 интернет магазинов которые знаете. Думаю что ни один не использует async для первостепенных библиотек таких как jquery. async нужно использовать для тяжелых скриптов, время загрузки и выполнения которых для нас не критично (что ни как не совпадает с целями использования jquery). Нужно использовать CDN, если нужна оптимизация.