Предварительная загрузка блокирует всю фазу рендеринга - PullRequest
Новая
       33

Предварительная загрузка блокирует всю фазу рендеринга

0 голосов
/ 30 марта 2020

У меня есть простой пример предварительной загрузки, чтобы посмотреть, как он работает. Предварительная загрузка извлекает ресурсы, не блокируя отображение в браузере. Но это не так. Скрипт внизу всегда выполняется после загрузки шрифтов. Вы можете проверить это, изменив сетевое соединение на медленные в инструментах разработки.

Почему это происходит?

Iam, используя последние chrome

<html>
<head>
  <link rel="preload" onload="this.rel = 'stylesheet'" as="style" href='https://fonts.googleapis.com/css?family=Roboto:400,100,500,700,900,800|Material+Icons'>

</head>
<body>
  Hello
<script>
    window.onload = function () {
        console.log('Loaded')
    }
</script>
</body>
</html>

1 Ответ

0 голосов
/ 30 марта 2020

Я установил простой тестовый пример здесь

Тестовый пример не очень отличается от вашего исходного кода, только что изменился <link>: 

<link rel="preload" onload="console.log('loaded stylesheet')" rel="stylesheet" as="style" href='https://fonts.googleapis.com/css?family=Roboto:400,100,500,700,900,800|Material+Icons'>

Сценарий был выполнен до того, как таблица стилей была извлечена для первой загрузки, для всех последующих загрузок сценарий был выполнен после того, как таблица стилей была получена. Для последующих запросов таблица стилей должна кэшироваться в браузере, и дальнейшая выборка не требуется:

console log

...