Javascript код, выполненный до загрузки и анализа css - PullRequest
Новая
       39

Javascript код, выполненный до загрузки и анализа css

1 голос
/ 31 марта 2020

Я читал об асинхронных c скриптах в веб-приложениях, с которыми я столкнулся в этой статье. Короче говоря, он говорит, что javascript сценарии не будут выполняться, пока все таблицы стилей css не будут загружены и проанализированы. Поэтому я попытался проверить это для себя на небольшом примере.

Как вы можете видеть в отчете о производительности, скрипт jquery выполняется очень хорошо сам по себе, а затем, css загружается и анализируется.

Может кто-нибудь объяснить, почему такое поведение?

Из-за этого CSS может блокировать синтаксический анализ в зависимости от порядка внешних таблиц стилей и сценариев в документе. Если перед сценариями в документе размещены внешние таблицы стилей, создание объектов DOM и CSSOM может мешать друг другу. Когда синтаксический анализатор получает тег сценария, построение DOM не может продолжаться до тех пор, пока не закончится выполнение JavaScript, и выполнение JavaScript не может быть выполнено до тех пор, пока CSS не будет загружено, проанализировано и CSSOM не станет доступен.

источник 

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>

  <body>


    <link rel="preload" onload="this.rel='stylesheet'" as="style" href='https://s3-eu-west-1.amazonaws.com/welcome.b2b.test/form/bundle.css'/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"/>
    <script>
      window.onload = function() {
        console.log("window");
      };
    </script>
  </body>
</html>

enter image description here

1 Ответ

0 голосов
/ 08 апреля 2020

Причина, по которой вы не видите такого поведения, заключается в том, что файл CSS не передается в качестве результатов анализа, вы предварительно загрузили ресурс, но не зарегистрированы как CSS, поэтому ваш CSS будет работать после JS, но когда он становится таблицей стилей, он блокирует поток в это время.

...