javascript - Web 性能、内联脚本问题

Question

谁能解释一下网络性能，加载外部 css(组合 css)加载外部 javascript(组合 javascript)inline css/inline javascript <- 会阻塞其他资源下载，建议将javascript放在外部css之前

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

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

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

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

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

Answer 1

嗯，一般来说你想要:

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

如果您想实现这一点，您可能需要查看 labjs这是:

an all-purpose, on-demand JavaScript loader [that] reduces resource blocking during page-load [...] by loading (and executing) all scripts in parallel as fast as the browser will allow. You can easily specify which scripts have execution order dependencies and LABjs will ensure proper execution order.

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