下载和解析CSS之前执行的Java代码

Question

我在阅读这篇文章时遇到了有关Web应用程序中异步脚本编写的问题。简而言之，它表示在下载并解析所有样式表css之前，不会执行javascript脚本。因此，我尝试通过一个小示例为自己进行测试。

您可以在性能报告中看到，jquery脚本本身可以很好地执行，然后下载并解析css。

有人可以解释为什么会有这种行为吗？

因此，CSS可能根据以下顺序阻止解析外部样式表和文档中的脚本。如果有外部样式表放置在文档中脚本之前，DOM和CSSOM对象的构造可能会相互干扰。当解析器到达脚本标签时，无法进行DOM构建直到JavaScript完成执行，并且JavaScript不能执行，直到下载，解析CSS，并且CSSOM为可用。

source

<!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>

Answer 1

您在此处看不到该行为的原因是，由于CSS文件未作为可解析的结果传递，因此您已预加载资产，但未将其注册为CSS，因此您的CSS将在JS之后运行，但当它变为样式表，它将在那时阻塞线程。

下载和解析CSS之前执行的Java代码

问题描述投票：1回答：1

1个回答

最新问题

下载和解析CSS之前执行的Java代码

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1