Почему кажется, что Chrome ждет DOM, прежде чем выполнить Javascript? - PullRequest
Новая
       24

Почему кажется, что Chrome ждет DOM, прежде чем выполнить Javascript?

2 голосов
/ 01 мая 2020

Я чешу голову, пытаясь понять, почему мои сценарии не выполняются в порядке, указанном в моем HTML. Я тестирую с простой установкой, где я загружаю необходимые таблицы стилей (jquery -ui асинхронный), а затем сразу выдаю предупреждение: 

<head>
    <meta charset=utf-8>
    <link rel=preload href=https://ajax.googleapis.com/.../jquery-ui.min.css as=style
        onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel=stylesheet href=https://ajax.googleapis.com/.../jquery-ui.min.css></noscript>
    <link href=...bootstrapcdn.com/.../bootstrap.min.css rel=stylesheet>
    <link rel=stylesheet href=/static/styles/main.css?584e14ae>
    <link rel=icon type=image/png sizes=32x32 href=/static/media/favicon-32x32.png>
    <link rel=icon type=image/png sizes=16x16 href=/static/media/favicon-16x16.png>
    <link rel=manifest href=/static/media/site.webmanifest>
</head>

<body>
    <script>
        alert('I am alertful!')
    </script>
    <!-- My main content lives here -->
    <script defer src="https://ajax.googleapis.com/.../jquery-ui.min.js"></script>
    <script defer src="...bootstrapcdn.com/.../bootstrap.min.js"></script>

    <script type="text/javascript" src="/static/js/mainopen.js?0b85ab7e"></script>
</body>

Однако, я не сразу вижу предупреждение. Вместо этого кажется, что все источники полностью загружены (в том числе непосредственно перед </body>), прежде чем показывать предупреждение. Это видно на этом снимке экрана - обратите внимание, что большинство перечисленных ресурсов отсутствует в теге head.

Снимок экрана вкладки сети Dev

Событие DOMContentLoaded срабатывает сразу после закрытия оповещения. Почему Chrome загружает все перед анализом скриптов? (Кажется, Edge этого не делает) Есть ли способ лучше контролировать порядок вещей? Любой свет, который можно пролить на эту ситуацию, был бы очень признателен!

Контекст: я хотел бы начать очень медленную Ajax загрузку как можно скорее, но не могу запустить какие-либо сценарии до того, как все остальные источники будут загружен.

Редактировать: удалена целостность для ясности. Обратите внимание, что все внешние сценарии имеют crossorigin = "anonymous" и целостность, если это важно. Edit2: добавлены некоторые сценарии нижнего колонтитула для завершения

...