Web 性能、内联脚本问题

Question

谁能解释一下网络性能， 加载外部css（组合css） 加载外部 javascript（组合 javascript） inline css / inline javascript

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

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

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

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

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

Answer 1

嗯，一般来说你想要：

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

如果您想实现这一目标，您可能需要查看labjs，即：

一种通用的按需 JavaScript loader [that] 减少资源 在页面加载期间阻塞 [...] 加载（并执行）所有脚本 与浏览器一样快地并行 允许。您可以轻松指定哪个 脚本有执行顺序 依赖项和 LABjs 将确保 正确的执行顺序。

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

Answer 2

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

Answer 3

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

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

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

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

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