Как определить, загружен ли скрипт / ресурс асинхронным или отложенным в Chrome Network Tools

Question

Есть ли какой-нибудь способ узнать, загружен ли скрипт / ресурс асинхронно или отложен на вкладке Сетевые инструменты браузера Google Chrome?

Answer 1

К сожалению, вы не можете видеть зависимости в критическом пути рендеринга на вкладке сети Google Chrome.

Что вы можете сделать, это посмотреть на приоритет запросов (вам, возможно, придется включить эту вкладку в окнах сети -> щелкнуть правой кнопкой мыши на вкладках). Асинхронный запрос должен иметь низкий приоритет (так же, как изображения, которые загружаются асинхронно). Похоже, что Chromes это делает ( https://bugs.chromium.org/p/chromium/issues/detail?id=408229), это не супер точно, но может помочь вам.

Answer 2

сценарий может быть загружен как встроенный в HTML, так и динамически через вызов функции.

Чтобы узнать, был ли скрипт встроенным или нет:

1. Отключить javascript (настройки инструментов разработчика -> отключить javascript)
2. Найдите этот скрипт в исходном коде (щелкните правой кнопкой мыши -> просмотреть исходный код страницы) страницы, если его там нет, то по умолчанию он загружается асинхронно.

Если он включен в исходный код, найдитеasyncярлык:

      <script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>

если присутствует асинхронный атрибут, то скрипт будет извлечен параллельно с разбором и оценен, как только он будет доступен.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async