AJAX 加载时间 - 主机和服务器问题？

Question

我遇到了慢速 AJAX 调用的问题。这是一个常见的问题，但我已经完成了我能找到的所有研究中建议的一切。我希望得到阅读本文的人的共识。

基本上，我向 php 页面发出 ajax 请求，该页面从数据库中获取信息。

Here 是页面。

我已经对我所有的 javascript、mySQL 和 php 脚本、请求和页面进行了计时。 （如果你运行 firebug，你可以在控制台和 xml 中看到我的时间标记）

举个例子-

mysql请求耗时20ms PHP页面需要50ms 处理少量 xml（小于 1k）并生成标记的 ajax 成功脚本需要 8ms 才能运行。

然而，加载页面需要将近 4 秒。

所以，假设我的脚本没有滞后，这一定是服务器响应时间的问题，或者是我自己的互联网连接问题，对吧？

如果有任何理论或想法，我将不胜感激。

谢谢

Answer 1

好的，查看了您的页面，以下是我发现的一些会影响速度的问题：

1. 在 getMarkers 函数中获取数据需要 4 毫秒，但读取 xml 文件需要 892 毫秒。我建议您回退到 vanilla javascript 来读取您的 xml 文件，因为您正在执行的查找数量确实会损害您的性能。
2. 缩小并合并服务器上本地的所有脚本。我得到了一些非常高的响应时间。您可以通过这样做消除 4 个 http 请求，这对您的服务器上的响应时间会有所帮助。 （注意不要在此组合 jquery 或 jquery ui）
3. 由于您的服务器有点慢（不是您的错，这会有所不同，因为您可能在共享主机上）我建议将 jquery 和 jquery ui 链接到 google cdn 托管版本。这是Jquery CDN的帖子
4. 您的页面上有 24 张图片；其中 23 个小于 4KB。将这 23 个组合成一个 CSS sprite 图像，并指定一个 1px X 1px 空白 gif 作为内联 html 图像，并使用 CSS sprite 图像。如果您不熟悉，这里有一篇关于这是什么的好文章：CSS Sprites explained 这里还有很好的在线 css sprites 生成器：CSS Sprite generator
5. 确保此页面需要 Jquery UI。我没有看到任何需要它的东西。如果您可以删除它，您可以节省 206k。如果不需要，请记住删除关联的 CSS 文件。这将为您节省另外 2 个电话。
6. 没有深入挖掘，但如果您还没有开始在 $(document).ready() 中设置谷歌地图的调用，那么您的页面的其余部分可以加载并且您可以显示加载动画在那个区域。这样一来，用户就会知道发生了什么事情，并且您的页面会加载得更快。

因此，您可以通过执行上述操作大大加快速度。您将从 82 个组件减少到 51 个本地组件和 2 个在 Google CDN 上的组件。如果您可以改善 xml 读取时间，您还可以减少近一秒的加载时间