Почему подсказка ресурса перед подключением не работает?

Я создал тестовую страницу по адресу crenshaw.dev/demo/hints.html с подсказками для браузера. запрос dns-prefetch и предварительное подключение к mac9416.com.

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Test resource hints</title>
        <link rel="dns-prefetch" href="//mac9416.com">
        <link rel="preconnect" href="https://mac9416.com" crossorigin>
    </head>
    <body>
        Lorem ipsum dolor sit amet,
        <!-- a bunch more to delay page loading -->
        Duis dignissim gravida commodo.

        <script src="https://mac9416.com/blah.js"></script>
    </body>
</html>

Но, согласно WebPageTest, соединение с mac9416.com отсутствует. t происходит до тех пор, пока index.html не будет полностью загружен.

Каскадная диаграмма WebPageTest, показывающая, что mac9416.com подключается только после загрузки и анализа всей разметки, а не сразу после анализа элемента head

Почему Chrome не подключается к mac9416.com сразу после анализа <head>?

ОБНОВЛЕНИЕ:

Основываясь на принятом ответе и комментарии, я написал объяснение исправления .

Атрибут crossorigin при использовании с rel="preconnect" описывает не где находится целевой источник, а скорее какие ресурсы будут загружены из этого источника. Если активы используют CORS, требуется crossorigin. Если CORS не будет использоваться, crossorigin следует опустить. Если будут присутствовать оба типа активов, необходимы две подсказки ресурсов.


html web-performance preconnect
person Michael Crenshaw    schedule 04.04.2019    source источник
comment
Связанный: webmasters.stackexchange.com/q/89466/10249   -  person jakub.g    schedule 13.02.2020

Ответы (1)


arrow_upward
9
arrow_downward

Просто удалите параметр crossorigin с неправильным названием, и все заработает.

<link rel="preconnect" href="https://mac9416.com">

Эти параметры не сообщают браузеру, что домен является внешним (он уже знает об этом). Он говорит браузеру предварительно открыть специальное соединение «CORS», которое необходимо для шрифтов или запросов XHR, но не для сценариев, таблиц стилей или изображений.

person Gaël Métais    schedule 04.04.2019
comment
Тест проверяется. После некоторого чтения я вижу, что опускание crossorigin в основном означает, что CORS не используется. Из любопытства, как можно заставить preconnect работать во время использования CORS? - person Michael Crenshaw; 04.04.2019
comment
Скрипты не используют CORS. То же самое сделал предварительное подключение для подключения CORS, а затем запросил тип ресурса, отличный от CORS, который использует отдельное подключение. Если это был запрос шрифта или запрос XHR, то он должен был использовать это соединение CORS, которое вы также предварительно подключили. См. также developer.mozilla.org/en-US/docs/ Интернет/HTTP/ - person Barry Pollard; 05.04.2019