Использование тега script async> с Angular.js

Илья Григорик рекомендует, если возможно, использовать тег <script async>.

Существует ли чистый, предпочтительный способ загрузки приложения Angular.js с использованием тега без использования таких инструментов, как require.js или инструмент $script.js, рекомендованный angular -seed?

Очевидной проблемой является порядок выполнения. например предупреждения:

Uncaught ReferenceError: angular is not defined

https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/

Ответы

Ответ 1

Если есть что-то полезное, вы можете показать без angular (например, предварительно сгенерированный контент с помощью браузера без браузера) И ничего, кроме вашего script, зависит от него 1 тогда может быть решение:

  • load angular.js с помощью async
  • инкапсулировать код в тело функции
  • добавить проверку цикла, если angular определено
    • и спать в течение нескольких миллисекунд, если не
    • в противном случае выполнение кода и выход из цикла

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

Вполне возможно, что я не делаю ничего, кроме примитивной версии того, что делают фреймворки.

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

1 Итак, я думаю, пользователям angular-route.js или похожим не повезло. Это просто предположение, поскольку я никогда не пытался загрузить эти два порядка.

Ответ 2

Вы можете объединить все зависимые JS файлы в один, прежде чем использовать async. Для этого используйте Grunt, Gulp, брокколи или другую задачу.

Если script является модульным и не полагается на какие-либо скрипты, используйте async.

Источник: Рекомендации по производительности для веб-разработчиков.

Ответ 3

НЕ ИСПОЛЬЗУЙТЕ атрибут async с тегом Angular.js script.

Кажется, что использование атрибута async вредно. Без него выражения оцениваются в событии DOMContentLoaded, но с атрибутом async они оцениваются в событии загрузки окна, что намного позже. Протестировано для Angular.js 1.0 и 1.4 в последней версии Firefox, Chrome и IE11.

Ответ 4

В соответствии с этим ответом вы можете попробовать использовать defer вместо async, что приводит к тому, что браузер соблюдает порядок загрузки. Например:.

<script src="scripts/vendor-including-angular.js" defer></script>    
<script src="scripts/your-app.js" defer></script>