内联脚本_通过数据的异步内联脚本：URI

内联脚本

Inline scripts are synchronous. "Well, duh!" you may say. That's a feature, not a bug. Because accessing a variable after an inline script should succeed. And that's fine. But not great.

内联脚本是同步的。 “好吧，du！” 你可以这样说。 这是一个功能，而不是错误。 因为在内联脚本之后访问变量应该成功。 很好。 但不是很好。

When is this bad? Well, inline scripts cause stylesheets to be blocking. Wait, what? Steve explained it 10 years ago, and it's still relevant today. Allow me to demonstrate.

什么时候不好？ 好吧，内联脚本会导致样式表被阻塞。 等一下史蒂夫(Steve)于10年前进行了解释，直到今天仍然有用。 请允许我示范。

基线 (The baseline)

Say we have:

说我们有：

• CSS1 artificially delayed to take 5 seconds to load
  人为延迟CSS1加载需要5秒
• External async JS1 that loads fine and prints to the console
  外部异步JS1，可以正常加载并打印到控制台
• CSS2 that takes 10 seconds to load
  加载CSS2需要10秒
• External async JS2
  外部异步JS2

  <link rel="stylesheet" href="css1.css.php" type="text/css" />
  <script src="js1.js" async></script>
  <link rel="stylesheet" href="css2.css.php" type="text/css"/>
  <script src="js2.js" async></script>

What we have is a waterfall like this:

我们拥有的是这样的瀑布：