Web 性能、内联脚本问题
谁能解释一下网络性能， 加载外部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，有什么方法可以利用网络性能吗？谢谢
can anyone explain on web performance,
load external css (combined css)
load external javascript (combined javascript)
inline css / inline javascript <- will block other resource downloading, recommended to put the javascript before external css
how can i put the javascript before external css when i combined the javascript? Is there a way to not block the loading of the images without making the inline javascript to be external scripts?
Update
To clarify, according the the web performance blogs/articles we should load external stuff first, load the external css first before the javascript. Then do the inline style/javascript but there is a catch on the inline javascript because once we do it after loading the external resources the other resources below the stack (images) are then blocked.
Say in firefox where you have 6 connections (assuming), you open 2 connections on the external css/external javascript therefore you still have 4 connections left, now you want to utilized that open connections but the problem is that there is an inline javascript that would block the downloading of other resources and would only continue to download after the inline javascript is executed.
Some say that you need to put the inline javascript before the external so that the open connections are utilized but the problem is that you need some references from the external making it impossible to put it before the external resources. Other blogs/article said that we should put the inline javascript to external and combine them making one external javascript (on the backend, cached), but this seems to be a lot of work on the current site im doing.
Is there any way to utilize the web performance if you have an inline javascript that requires/dependent on your external javascripts? Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
好吧，一般来说你希望：
如果你想实现这一点，你可能想要查看 labjs 这是：
我目前正在做一些测试，以将普通页面与多个 javascript 资源进行比较，该页面具有同一页面但使用 labjs，如果您感兴趣，我可以随时向您发布结果。
well, in general you want:
if you want to achieve that, you might want to look into labjs which is:
I'm currently doing some tests to compare a normal page with multiple javascript-resources with the same page but with labjs, if you're interested I can keep you posted on the results.
使用jquery时，您可以尝试： http://code.google.com/p/rloader/
when using jquery, you could try: http://code.google.com/p/rloader/
例如，当您链接到标头中的 javascript 文件时，DOM 构建和渲染都会延迟，直到脚本文件完成下载并运行。
最有效的方法是将外部 JS 文件移动到元素的底部，并直接在其后面添加它所依赖的内联脚本。
理想情况下，除非您的网站在没有 JavaScript 的情况下完全无法使用，否则您应该将所有 JS 资源移至 body 元素的末尾，并仅将样式表保留在头部以及任何没有依赖项的关键内联脚本中。
如果您想将其提升到一个新的水平，将它们移动到正文的末尾后，您可以使用外部脚本标记上的 defer 属性：
https://developer.mozilla.org/ en-US/docs/Web/HTML/Element/script#attr-defer
为了避免任何潜在的依赖关系问题，您可以将内联脚本放在从您自己的域加载的单独文件中，并在此外部脚本之后加载它，同时对其使用相同的 defer 属性。
Defer 按照 JS 文件在源代码中出现的顺序维护它们的执行，同时不阻塞渲染。
When you link to a javascript file in your header for example, both the DOM construction and the rendering is delayed until the script file finishes downloading and is also ran.
The most efficient way is to move the external JS file to the bottom of your element, and add the inline script it relies on directly after it.
Ideally, unless your site is completely unusable without JavaScript, you should move all your JS assets at the end of your body element and keep just the stylesheets in the head along any critical inline scripts that have no dependencies.
If you want to take this to the next level, after moving them to the end of your body, you can make use of the defer attribute on the external script tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer
To avoid any potential dependencies problems, you can put your inline script in a separate file loaded from your own domain and load it after this external script while using the same defer attribute on it.
Defer maintains the execution of the JS files in the order they appear in the source code while not blocking rendering.