2

任何人都可以解释网络性能，加载外部css（组合css）加载外部javascript（组合javascript）内联css/内联javascript<-会阻止其他资源下载，建议将javascript放在外部css之前

当我结合 javascript 时，如何将 javascript 放在外部 css 之前？有没有办法不阻止图像的加载而不使内联javascript成为外部脚本？

更新
澄清一下，根据网络性能博客/文章，我们应该先加载外部内容，先加载外部 css，然后再加载 javascript。然后执行内联样式/javascript，但内联 javascript 有一个问题，因为一旦我们在加载外部资源后执行此操作，堆栈下方的其他资源（图像）就会被阻止。

在 Firefox 中说你有 6 个连接（假设），你在外部 css/外部 javascript 上打开 2 个连接，因此你仍然有 4 个连接，现在你想利用那个打开的连接，但问题是有一个内联 javascript会阻止其他资源的下载，并且只有在内联javascript执行后才会继续下载。

有人说您需要将内联 javascript 放在外部资源之前，以便利用打开的连接，但问题是您需要来自外部的一些引用，因此无法将其放在外部资源之前。其他博客/文章说我们应该将内联 javascript 放到外部，并将它们组合成一个外部 javascript（在后端，缓存），但这似乎是我当前站点上的大量工作。

如果您有一个需要/依赖于外部 javascript 的内联 javascript，有什么方法可以利用 Web 性能？谢谢

4

3 回答 3

1

好吧，一般来说你想要：

  • 您的外部 javascript 将被异步加载（如果可能，在一个文件中，由您的网络服务器缩小和压缩）
  • 你的内联 javascript 是非阻塞的

如果你想实现这一点，你可能想看看labjs，它是：

一个通用的、按需的 JavaScript 加载器 [它] 通过在浏览器允许的情况下并行加载（和执行）所有脚本来减少页面加载期间的资源阻塞 [...]。您可以轻松地指定哪些脚本具有执行顺序依赖性，并且 LABjs 将确保正确的执行顺序。

我目前正在做一些测试，以将普通页面与多个 javascript 资源与同一页面进行比较，但使用 labjs，如果您有兴趣，我可以随时通知您结果。

于 2010-10-04T08:35:56.533 回答
1

使用 jquery 时，您可以尝试：http ://code.google.com/p/rloader/

于 2010-12-03T15:58:21.537 回答
-1

例如，当您链接到标头中的 javascript 文件时，DOM 构建和呈现都会延迟，直到脚本文件完成下载并运行。

最有效的方法是将外部 JS 文件移动到元素的底部，并在其后直接添加它所依赖的内联脚本。

理想情况下，除非您的网站在没有 JavaScript 的情况下完全无法使用，否则您应该将所有 JS 资产移动到 body 元素的末尾，并仅将样式表与任何没有依赖关系的关键内联脚本一起保留在头部。

如果你想更上一层楼，在将它们移动到身体的末尾之后，你可以利用外部脚本标签上的 defer 属性： https ://developer.mozilla.org/en-US/docs /Web/HTML/Element/script#attr-defer 为避免任何潜在的依赖问题，您可以将内联脚本放在从您自己的域加载的单独文件中，并在此外部脚本之后加载它，同时在其上使用相同的 defer 属性。

Defer 保持 JS 文件按照它们在源代码中出现的顺序执行，而不阻塞渲染。

于 2018-01-15T10:12:58.220 回答