JavaScript 在 Firefox 3 中异步加载（根据 Firebug）？
我正在尝试分析一个网站的性能，我相当有信心该网站由于页面上 JavaScript 文件的加载而减慢了速度。
页面上多次包含相同的 JavaScript 文件，并且
正如我所怀疑的，当查看 FireBug 的“Net”选项卡时，大多数时候（不是全部）当 JavaScript 被加载时，不会请求其他文件。 浏览器等待 JavaScript 完成加载。
但也有一些例外。 在某些情况下，JavaScript 会被加载，但与此同时，其他资源也会被加载，例如其他 JavaScript 文件和图像。
我一直认为 JavaScript 会阻止页面上其他资源的加载。 我的想法是否错误，或者这种行为是否因浏览器或浏览器版本而异？
更新：
对于那些已经解释了加载脚本如何阻止其他资源加载的人，我已经意识到了这一点。 我的问题是为什么脚本不会阻止其他资源的加载。 Firebug 显示某些 JavaScript 文件不会阻止加载其他资源。 我想知道为什么会发生这种情况。
I'm trying to profile the performance of a web site that I'm fairly confident is being slowed down by the loading of JavaScript files on the page.
The same JavaScript files are included several times on the page, and <script /> tags are scattered throughout the page instead of being included at the bottom.
As I suspected, when looking at FireBug's "Net" tab, most of the time (not all) when JavaScript is being loaded, no other files are requested. The browser waits for the JavaScript to complete loading.
There are a few exceptions however. There are a few occasions where JavaScript is loaded, but then at the same time, other resources appear to get loaded, such as other JavaScript files and images.
I always thought that JavaScript blocks the loading of other resources on the page. Am I incorrect in thinking this, or does this behavior vary depending on the browser or browser version?
UPDATE:
To those who have explained how loading a script blocks the loading of other resources, I'm already aware of this. My question is why a script wouldn't block the loading of other resources. Firebug is showing that some JavaScript files do not block loading other resources. I want to know why this would happen.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（10）
Javascript 资源请求确实是阻塞的，但是有一些方法可以解决这个问题（即：在头部注入 DOM 脚本标签，以及 AJAX 请求），而我自己看不到页面的情况很可能就是这里发生的情况。
包含相同 JS 资源的多个副本非常糟糕，但不一定是致命的，并且是典型的大型站点，这些站点可能是从不同团队的工作中积累起来的，或者只是简单的旧式糟糕编码、规划，或维护。
就雅虎建议将脚本放置在正文底部而言，这可以改善感知响应时间，并且可以在一定程度上改善实际加载时间（因为之前的所有资源都允许首先异步），但它永远不会像非阻塞请求那样有效（尽管它们具有很高的技术能力障碍）。
这里对非阻塞 JS 进行了相当不错的讨论。
Javascript resource requests are indeed blocking, but there are ways around this (to wit: DOM injected script tags in the head, and AJAX requests) which without seeing the page myself is likely to be what's happening here.
Including multiple copies of the same JS resource is extremely bad but not necessarily fatal, and is typical of larger sites which might have been accreted from the work of separate teams, or just plain old bad coding, planning, or maintenance.
As far as yahoo's recommendation to place scripts at the bottom of the body, this improves percieved response times, and can improve actual loading times to a degree (because all the previous resources are allowed to async first), but it will never be as effective as non-blocking requests (though they come with a high barrier of technical capability).
Pretty decent discussion of non-blocking JS here.
我不完全确定 Firebug 是否真实反映了浏览器内发生的情况。 资源加载的时机似乎不错，但我不确定它是否真实反映了正在发生的事情。 我在使用 HTTP 嗅探器/代理应用程序来监视来自浏览器的实际 HTTP 请求时运气更好。 我使用 Fiddler，但我知道还有其他工具。
简而言之，这可能是该工具的问题，而不是资源实际加载方式的问题……至少值得排除。
I'm not entirly sure that Firebug offers a true reflection of what is going on within the browser. It's timing for resource loading seems to be good but I am not sure that it is acting as a true reflection of exactly what is going on. I've had better luck using HTTP sniffers/proxy applications to monitor the actual HTTP requests coming from the browser. I use Fiddler, but I know there are other tools out there as well.
In short, this many be an issue with the tool and not with how resources are actually being loaded ... at least worth ruling out.
我想您使用的是 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，因此它没有任何其他可请求的内容。
如果您可以提供您正在谈论的页面的链接。 这样可以帮助大家给出更准确的答案。
I suppose you're using Firefox 3.0.10 and Firebug 1.3.3 since those are the latest releases.
The Firebug 1.4 beta has done many improvements on the net tab, but it requires Firefox 3.5. If you want to test it in Firefox 3.0, use one of the previous 1.4 alpha versions. But even with the improvements I still struggle to understand the result. I wish the Firebug developers would document more precisely what each part of a download means. It doesn't make sense to me why queuing is after connecting.
My conclusion was not to trust the results in Firebug, and ended up using the WebPageTest. Which was surprisingly good to come from AOL ;-)
Also, what kind of resources are being loaded at the same time as the javascript? Try tracing down the resources that are loaded at the same time, and see if it's referenced in a css/iframe/html-ajax. I'm guessing the reason why nothing else is loaded, is because the browser stops parsing the current HTML when it sees a script tag (without defer). Since it can't continue parsing the HTML, it has nothing more to request.
If you could provide a link to the page you're talking about. It would help everyone to give a more precise answer.
我相信内容已下载，但在 JavaScript 加载完成之前不会渲染。
从服务器的角度来看，这没什么大不了的，但对于用户来说，它可以在速度上产生巨大的差异。
I believe that the content is downloadeded, but not rendered until the JavaScript is finished loading.
This is, from the server's POV, not much of a deal, but to the user it can make a huge difference in speed.
如果您考虑一下，标签必须先完成处理，然后才能继续呈现内容。 如果标签使用 document.write 或其他一些非常愚蠢的东西怎么办？ 在脚本标记中的任何内容完成运行之前，页面无法确定它将显示什么。
If you think about it a tag has to finish processing before you can continue to render content. What if the tag used document.write or some other wonderfully dumb thing? Until anything within the script tag has finished running the page can't be sure what it's going to display.
浏览器通常会向单个域打开一定数量的连接。
因此，如果您从同一域加载所有脚本，通常会一个接一个地加载它们。
但是，如果这些脚本是从多个域加载的，它们将并行加载。
Browsers usually have a set number of connections opened to a single domain.
So, if you load all your scripts from the same domain you will usually load them one after the other.
But, if those scripts are loaded from several domains, they will be loaded in parallel.
浏览器在 JavaScript 下载过程中阻塞的原因是浏览器怀疑脚本内部会创建 DOM 节点。
例如，脚本内可能有“dcoument.write()”调用。
向浏览器提示脚本不包含任何 DOM 生成的一种方法是使用“defer”属性。
因此，
应该允许浏览器继续并行化请求。
参考文献：
http://www.w3.org/ TR/REC-html40/interact/scripts.html#adef-defer
http: //www.websiteoptimization.com/speed/tweak/defer/
The reason the browser is blocking during JavaScript downloading is that the browser suspects that there will be DOM nodes created inside the script.
For example, there might be "dcoument.write()" calls inside the script.
A way to hint to the browser that the script does not contain any DOM generation is with the "defer" attribute.
So,
should allow the browser to continue parallelizing the requests.
References:
http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer
http://www.websiteoptimization.com/speed/tweak/defer/
正如其他人所说，该脚本可能通过 DOM 注入加载其他资源。
Script.aculo.us 实际上是通过这样做来加载其子组件/脚本的——将其他
如果您想了解情况是否如此，请使用 Firebug 的分析器并查看脚本正在执行的操作。
As others have stated, the script is probably loading other resources through DOM injection.
Script.aculo.us actually loads its child components/scripts itself by doing this -- injecting other
<script>tags into the DOM for them.If you want to see whether or not this is the case, use Firebug's profiler and take a look at what the scripts are doing.
正如其他人所说，一种非阻塞方式是在页面
head中注入但 Firefox 也可以并行执行加载的
然后转到此页面，粘贴到输入文本区域，单击“JavaScript” ”，然后“加载脚本”（构建
在 FF 中尝试一下：您将看到“test2 ok”，移动对话框以查看“test ok”。
在其他浏览器中，您应该看到“test ok”（后面没有其他对话框），然后是“test2 ok”（Safari 4 除外，在测试之前显示 tes2）。
Like others said, one non-blocking way is to inject
<script>tags in the pagehead.But firefox can also execute loaded
<script>s in parallel:Copy the two lines below:
Then go to this page, paste in the input textarea, click "JavaScript", then "Load Scripts" (which builds and adds a
<script>child element to thehead).Try that in FF : you'll see "test2 ok", move the dialog box to see "test ok".
In other browsers, you should see "test ok" (with no other dialog behind) then "test2 ok", (except for Safari 4, showing me tes2 before test).
Firefox 3 引入了连接并行功能来提高加载网页时的性能，我敢打赌这就是您问题的根源;)
这是关于它的 ZDNET 博文。
Firefox 3 has introduced connection parallelism feature to improve performance while loading a webpage, I bet this is the source of your problem ;)
Here's the ZDNET blogpost about it.