Объединение jQuery + пользовательский скрипт с асинхронным или нет?

Question

Если вы хотите ускорить первоначальную загрузку одного из наших сайтов, у нас есть весь наш javascript в комбинированном файле, довольно большой - около 90 КБ. Все инструменты анализа там говорят: «Вы должны переключиться на async, чтобы у вас не было JavaScript-блока вашего веб-сайта».

Это то, что мы имеем перед тегом тела закрытия сегодня

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="/js/script.js"></script> 

Наш сценарий зависит от JQuery. Итак, мой вопрос: лучше ли иметь скрипт около 200kb, то есть jQuery, связанный с нашим скриптом, поэтому мы знаем, что jQuery загружается перед нашим собственным скриптом и загружает его асинхронно или есть другой способ обойти это без привлечения слишком многие сторонние решения, такие как headjs, reactjs и т.д.

Помещенный в коде, это

<script src="/js/combined.js" async></script> 

лучше, чем это

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="/js/script.js" async></script> 

помогает ли это какой-либо, если мы сохраним JQuery синхронизации, и поставить наш сценарий асинхронный или опасен в том смысле, что мы не можем точно знать, что jQuery загружен до нашего?

Или, как не-решение, мы просто не заботимся об этом и сосредоточимся на других вещах, то есть действительно ли стоит выиграть этот последний выигрыш в производительности?

Любые идеи были бы очень признательны.

Answer 1

Лучшим подходом является использование загрузчика сценариев, такого как RequireJS или Head.JS. Например, с Head.JS:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script> 

<script type="text/javascript"> 
    head.js(
    "//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js", 
    "/js/script.js", 

    function() { 
     startMyCode(); 
    } 
); 
</script> 

RequireJS является немного более мощным, что он не выполняет скрипт в порядке, но по зависимости, но требует, чтобы организовать свой код в модулях (в отличие от головы. JS, которые вы можете использовать без каких-либо изменений в вашем коде).

EDIT: На самом деле, может быть, лучше идти с $script.js, учитывая, что Head.JS представляется, не поддерживается больше. Чтобы прояснить - что это такое - это управлять асинхронной загрузкой для вашего кода, а затем убедиться, что он выполняется в правильном порядке, когда все биты загружаются (либо последовательно, как и Head.JS, либо каким-то образом на основе зависимостей).

Answer 2

Если вы хотите, чтобы ваш собственный скрипт загружался после jQuery, вы можете добавить атрибут defer.

Взгляните на это: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html