加载一定数量的 javascript/css 文件后,文件加载时间过长

加载一定数量的 javascript/css 文件后,文件加载时间过长

我遇到了一个问题,在页面加载时(在加载了一定数量的 .js 或 .css 文件之后),文件加载时间过长。起初我以为问题一定出在 .js 文件中,但后来我意识到内容无关紧要,我尝试删除加载时间过长的 .js 文件的内容,但问题仍然存在。我还意识到,如果我改变文件的加载顺序,那么我最后留下的文件总是加载时间很长的文件(加载时间因 PC 而异,在我的 PC 上是 5-6 秒,在另一台 PC 上是 19-20 秒)。我目前正在使用 Apache 2.4 进行开发,我怀疑问题一定出在设置中的某个地方。

您可以在此处看到此问题:

图像

任何帮助,将不胜感激。

答案1

这种情况很奇怪。我的建议是分析应用程序客户端并尝试了解发生了什么。

一般来说,问题可能取决于:

  1. 本地缓存的内容读取速度非常慢,这不应该依赖于特定的文件损坏,因为文件读取速度慢取决于您在 JS 引用中输入的序列。

  2. 客户端的渲染问题(但这不会改变引用项的顺序)

  3. 您的 Apache 服务器上可能存在并行传输问题。这可能意味着您需要使用不同的 GET 操作获取大量文件,而 Apache 无法并行处理所有这些文件。因此,序列化可能会发生,并产生您所遇到的影响。

  4. 获取相同文件的不同方法,可能在 apache 上打开另一个工作程序(即通过直接 IP 到 Apache 的主页,通过代理指向同一个 Apache 的 JS。并且 Apache 在单个工作程序场景中配置(我没有足够的信息来判断)

  5. 一款在本地运行的杀毒软件,会在浏览器加载操作时触发

我的建议是:

  1. 安装分析工具(我首选的是使用 Firebug)
  2. 在 NET 面板中分析应用程序
  3. 加载页面并查看项目如何加载
  4. 尝试检查 Apache 中的日志。对于这个特定问题,如果您正在开发服务器上工作,请尝试增加日志记录级别以进行调试。“LogLevel Debug”

在分析结束时,您将注意到哪个是导致该过程序列化的原因。

答案2

浏览器对域的并发连接数有限制。这意味着,在之前的资源加载完成之前,浏览器不会打开其他连接来加载更多资源。这可能是导致此行为的原因之一。

因此建议将所有.js代码放入一个文件中,也.css放入一个文件中。

另一种可能性是,如果所有页面加载时都发生这种情况,则 HTTP 缓存标头可能设置为浏览器端不进行缓存。因此浏览器每次连接到页面时都会加载资源,这也会减慢该过程。

相关内容