Chrome无法完成JS文件的加载

23

我正在编写一个应用程序,其中在<head>部分包括约12个短JS文件(我知道,我应该将它们合并并将它们移动到<body>结束之前; 在生产中会处理这些问题)

问题是当我尝试在Chrome中加载应用程序时,某些文件立即加载而某些则根本无法完成加载! Chrome一直在尝试加载12个JS文件,并且永远不会呈现页面,直到我点击“停止”。

当我点击停止时,HTML被呈现,JS文件失败,如下图所示:

JS Load errors

请注意,每次尝试都会失败不同的JS文件!不是同一个文件每次都卡住了!

检查失败文件的标头显示“注意:请求尚未完成”。有时文件在“接收”状态下卡住多分钟!

enter image description here

现在有趣的事情来了,在按停止后,如果我聚焦于地址栏并按回车键,则所有JS文件立即加载,应用程序正常工作!

在服务器端,我使用Apache,PHP和MySQL。我是否在Apache中错误配置了某些内容?

经过累人的2天之后的状态:什么都没有,这让我发疯了。 我尝试从不同的机器运行代码,尝试更改apache缓存设置并在javascript中更改了很多东西,但什么都没用。最糟糕的是,没有人能确定问题出在哪里!


尝试关闭一些 Chrome 扩展程序。众所周知,Adblock 会干扰开发。 - evolutionxbox
所有的扩展都被阻止了。难道没有人遇到过这样的问题吗?为什么会有负评?我还没有在任何地方找到解决方案! - KJ Saxena
你尝试过在其他地方托管文件吗?也许有某种 MIME 类型问题?(我没有投反对票)。 - evolutionxbox
1
加载压缩的jQuery需要3.5分钟 - 这里肯定有什么问题。你只在Chrome中遇到这种问题吗?在Firefox中会发生什么? - bancer
1
你尝试过注释掉或删除每个include,重新加载并查看是否出现相同的问题吗? - dmo
显示剩余6条评论
7个回答

19

可能的原因是您启用了Keep-Alive,但它无法正常工作。我以前见过这种情况。浏览器会建立最大连接数(通常为6个)与您的服务器进行连接,下载第一批文件(CSS,JS等)。然后这些连接在超时之前不会被释放。我的症状与您的略有不同 - 超时时间为20秒,然后每次加载6个文件,但这仍然可能是问题的原因。

在Apache配置文件中(在大多数系统中为httpd.conf),查找 KeepAlive 行(如果缺少,请添加该行),并将其设置为 Off


3
能否详细说明"keep-alive"为何无法正常工作?它如何引起问题?我在使用IIS时也遇到了同样的问题。 - roman m

7
不仅仅是答案,下面是我如何解决问题的方法。
首先,我会尝试逐个注释标签并重新加载网页,以查找阈值。由于这很可能是服务器配置问题,因此我每次尝试后都会重启服务器以获得干净的状态,即不保留任何尝试之间的状态。
其次,我会尝试通过您喜欢的编程语言中的脚本来请求各种JavaScript,并等待几毫秒后逐个获取脚本(例如使用curl)。我想在这里也会遇到一个阈值。比如,每秒获取一个脚本是有效的,但当请求过于接近时,服务器就会卡住。
如果还没有线索,我会使用tcpdump来观察浏览器和服务器之间的流量。好吧,这可能有点底层!
但也许我会使用netstat来查看浏览器打开了多少与服务器的并行连接来获取资源,并查看我们是否达到了并发限制。
抱歉这只是一个解决方案,但我希望您能获得一些想法,并且最终非常想知道您的问题是什么!

5

我们在浏览器中发出一个请求后,收到了完全相同的消息:“警告:请求尚未完成”。

这个请求本身是15 MB的JSON格式,被传输到一个Angular 1应用程序中。这个请求大约需要2秒钟的时间。请求结束后,Angular运行周期阻塞了浏览器超过12秒钟(通过请求期间的性能分析可见)。在此期间,Chrome显示了“警告:请求尚未完成”的消息,尽管请求实际上已经完成。


嘿,你能详细说明一下“请求期间的分析”吗?我认为我也遇到了同样的问题,但我想确认一下。 - Chagai Friedlander
1
嗯,好久不见了。我想应该是这样的:启动浏览器的分析器,然后加载页面,在请求完成并且应用程序呈现后停止分析器。 - Jos de Jong

3

检查 Content-Length 头部。服务器可能传递不正确的值 - 大于实际内容长度。


1

2
链接已失效。 - Alireza

0

有许多好的答案,但如果你想要一个做这个的百分百可靠的方法,你可以使用 PHP 一次性发送所有脚本。如果问题确实是太多连接到服务器,你可以添加一些像这样的 HTML 代码:

<script type="text/javascript" src="scripts/scripts.php />

然后在 scripts.php 中,您可以使用 include() 函数来包含所有 JavaScript 文件,如下所示:

<?php
header(''); // control all your headers
include('jquery-1.9.1.min.js');
// rest of scripts
?>

如果其他方法都无效,而问题是连接过多,那么这个方法应该有效。


0
我曾经运行了一个linux+nginx+nodejs的堆栈,但是页面有时会卡住,可能每20次加载中就有1次。添加HTTPS解决了这个问题。
注意:在安卓上使用Chrome时遇到的问题。
希望这对像我一样在开发过程中使用HTTP的人有所帮助!

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接