Async Файлы Javascript, которые зависят от заказа

Question

При использовании PageSpeed Insights для оценки производительности моего сайта я получаю 70/100, и рекомендуется, чтобы я делал jquery и bootstrap.js асинхронными для повышения производительности.

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

Как я могу заставить jquery загружаться до загрузки, но все же получить преимущества асинхронных скриптов?

Answer 1

Вы должны взглянуть на: http://requirejs.org. Это позволит вам вызывать файлы js, необходимые для каждой страницы, и уже асинхронно.

Answer 2

В основном это говорит о том, что ваш Javascript выполняется перед загрузкой страницы, вы можете переместить javascript в нижнюю часть вашего html (так что он будет выполнен после отображения страницы) или использовать атрибут defer, который в основном тот же эффект.

<script src="anything.js" defer></script> 

Answer 3

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

var worker = function() { 
    if(window.jQuery /* and other stuff */) { 
    dependenciesLoaded(); /* your app wrapper */ 
    } else { 
    setTimeout(worker, 30); 
    } 
}; 

worker(); 

Довольно грязное решение. Посмотрите вперед, чтобы связать ваши скрипты с одним или с библиотеками с управлением зависимостями.