JavaScript在Firefox 3中异步加载（根据Firebug）？

Question

我正在尝试描述一个网站的性能，我相当有信心通过加载页面上的JavaScript文件来降低速度。

页面上多次包含相同的JavaScript文件， <script />标签分散在整个页面中，而不是包含在底部 。

正如我所怀疑的那样，在查看FireBug的“网络”选项卡时，大多数时候（不是全部）加载JavaScript时，都不会请求其他文件。 浏览器等待JavaScript完成加载。

但是有一些例外。 有些情况下会加载JavaScript，但与此同时，其他资源似乎也会被加载，例如其他JavaScript文件和图像。

我一直认为JavaScript阻止了页面上其他资源的加载。 我是否认为这是错误的，或者这种行为是否因浏览器或浏览器版本而异？

更新：
对于那些解释了如何加载脚本阻止加载其他资源的人，我已经意识到了这一点。 我的问题是为什么脚本不会阻止加载其他资源。 Firebug显示某些JavaScript文件不会阻止加载其他资源。 我想知道为什么会这样。

Answer 1

Javascript资源请求确实是阻塞的，但是有很多方法可以解决这个问题（例如：头脑中注入DOM的脚本标记，以及AJAX请求），而我自己看不到页面可能就是这里发生的事情。

包括相同JS资源的多个副本是非常糟糕的，但不一定是致命的，并且是典型的较大的站点，可能已经从单独的团队的工作中累积，或者只是简单的旧的不良编码，规划或维护。

至于雅虎的建议，在机身底部放置脚本，这提高percieved响应时间，并能提高实际加载时间在一定程度上（因为前面所有的资源都允许异步第一），但它永远不会是有效作为非阻塞请求（尽管它们具有很高的技术能力）。

这里有非阻塞JS的相当不错的讨论。

Answer 2

我并不完全确定Firebug真实地反映了浏览器中发生的事情。 资源加载的时机似乎很好，但我不确定它是否真正反映了究竟发生了什么。 我有幸使用HTTP嗅探器/代理应用程序来监控来自浏览器的实际HTTP请求。 我使用Fiddler，但我知道还有其他工具。

简而言之，这很多都是工具的问题，而不是实际上如何加载资源......至少值得排除。

Answer 3

我想你使用的是Firefox 3.0.10和Firebug 1.3.3，因为这些是最新版本。

Firebug 1.4 beta在网络选项卡上做了很多改进，但它需要Firefox 3.5。 如果要在Firefox 3.0中进行测试，请使用之前的1.4 alpha版本之一 。 但即使有了改进，我仍然很难理解结果。 我希望Firebug开发人员能够更准确地记录下载的每个部分的含义。 对我来说，连接后为什么排队是没有意义的。

我的结论是不相信Firebug中的结果，最终使用了WebPageTest 。 来自AOL的出人意料的好;-)

此外，与javascript同时加载什么样的资源？ 尝试追踪同时加载的资源，看看它是否在css / iframe / html-ajax中引用。 我猜测没有其他任何东西被加载的原因，是因为浏览器在看到脚本标记（没有延迟）时停止解析当前的HTML。 由于无法继续解析HTML，因此无需再请求。

如果您可以提供指向您正在谈论的页面的链接。 这将有助于每个人给出更准确的答案。

Answer 4

我相信内容是下载的，但在JavaScript加载完成之前不会呈现 。

从服务器的POV来看，这并不是什么大不了的事，但对于用户而言，它可以在速度上产生巨大的差异。

Answer 5

如果您考虑一下，标记必须先完成处理才能继续呈现内容。 如果标签使用了document.write或其他一些非常愚蠢的东西怎么办？ 在脚本标记内的任何内容完成运行之前，页面无法确定它将显示的内容。

Answer 6

浏览器通常具有打开到单个域的一定数量的连接。
因此，如果您从同一个域加载所有脚本，通常会一个接一个地加载它们。
但是，如果这些脚本是从多个域加载的，则它们将并行加载。

Answer 7

浏览器在JavaScript下载期间阻塞的原因是浏览器怀疑在脚本内部将创建DOM节点。

例如，脚本中可能存在“dcoument.write（）”调用。

一种向浏览器提示脚本不包含任何DOM生成的方法是使用“defer”属性。 所以，

<script src="script.js" type="text/javascript" defer="defer"></script>

应该允许浏览器继续并行化请求。

参考文献：

http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer

http://www.websiteoptimization.com/speed/tweak/defer/

Answer 8

正如其他人所说，脚本可能正在通过DOM注入加载其他资源。

Script.aculo.us实际上通过这样做加载其子组件/脚本 - 将其他<script>标记注入DOM中。

如果您想查看是否是这种情况，请使用Firebug的分析器并查看脚本正在执行的操作。

Answer 9

像其他人说的那样，一种非阻塞方式是在页head注入<script>标签。

但是firefox也可以并行执行加载的<script> ：复制下面的两行：

http://streetpc.free.fr/tmp/test.js
http://streetpc.free.fr/tmp/test2.js

然后转到此页面 ，粘贴输入文本区域，单击“JavaScript”，然后“加载脚本”（构建并向head添加<script>子元素）。

在FF中试试：你会看到“test2 ok”，移动对话框看“test ok”。 在其他浏览器中，您应该看到“test ok”（后面没有其他对话框）然后“test2 ok”，（Safari 4除外，在测试前显示tes2）。

Answer 10

Firefox 3引入了连接并行功能，以便在加载网页时提高性能，我敢打赌这是你问题的根源;）

当您打开其上有许多不同对象的网页时，如图像，Javascript文件，框架，数据源等，浏览器会尝试一次下载其中几个以获得更好的性能。

这是关于它的ZDNET博客文章。