在下载和解析 css 之前执行的 Javascript 代码答案

【问题标题】：Javascript code executed before css is downloaded and parsed在下载和解析 css 之前执行的 Javascript 代码
【发布时间】：2020-04-08 07:39:41
【问题描述】：

我正在阅读我在这篇文章中遇到的 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>

【问题讨论】：

你在问为什么有人要在 CSS 之前运行 JS 吗？
我是说文章说js总是在解析完css之后执行。我在这里看不到这种行为

标签： css asynchronous preload lighthouse

【解决方案1】：

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

【讨论】：

没有 css 选项传递给预加载。另外，问题是我在开发工具中禁用了缓存