如何优化 Jquery 中的 ajax 请求？ [关闭]

Posted 2023-03-05

【中文标题】如何优化 Jquery 中的 ajax 请求？ [关闭]

【英文标题】：How to optimize the ajax requests in Jquery? [closed]

【发布时间】：2016-01-13 12:50:39

【问题描述】：

我正在使用 jquery mobile、jquery 和 php 后端构建一个移动应用程序。 我的问题是在某些页面中我正在发送和接收多个 ajax 请求，这些请求明显降低了性能并导致内存泄漏，从而导致应用程序在网络连接不足时崩溃

优化 ajax 请求的可能方式有哪些？

注意：- 我定期发送一些 ajax 请求（比如每秒一次） 一些ajax是根据事件发送的

【问题讨论】：

你能把你的代码贴在这里吗？

@Chandresh 它的大伙伴，我只是在寻找一般的指导方针和想法

"一秒一次" 很多。你需要经常轮询吗？如果您请求越来越多而没有完成，浏览器将限制您的请求，可能会导致排队请求的累积。您可能需要仔细检查该代码是否存在内存泄漏。另外，如果您需要如此快速地更新，也许可以考虑使用网络套接字。

它实际上是一个社交应用程序，它必须定期从合作伙伴那里获取信息，这就是我们发送这些频繁请求的原因，而且项目几乎完成了，我只是在修复错误，我们无法更改使用的工作框架或技术（如 websocket），因此只寻找解决方法

像这样长时间轮询您的服务器最终会导致问题和巨大的开销。您应该考虑使用NodeJS 和socket.io 来处理事件和数据的广播，并使用PHP 来帮助初始化UI。这至少会更好地类似于实时交互，并让 Node 自己处理心跳。

【参考方案1】：

首先，正确编写的 Ajax 代码不会泄漏内存。所以，如果你真的有泄漏，那很可能是由错误编写的代码引起的，而不是使用 Ajax。

然后，您可以考虑一些优化。

将对服务器的多个请求合并为一个更大的请求。这样可以节省到服务器的往返次数、节省带宽、节省电池并提高性能。

不要每秒轮询。更明智地了解轮询服务器的频率。

延长轮询间隔以根据可能的活动改变它，切换到“长轮询”或切换到 webSocket，这样您就可以在没有轮询的情况下进行服务器推送。

分析导致过多内存消耗的原因并修复错误或重新设计以减少这种情况。很多 Ajax 调用没有理由“泄漏”内存。它会消耗电池寿命，但如果编码正确，则不会泄漏内存。

哦，不要犹豫，打开一些已经存在的大型社交网络应用程序，打开调试器，切换到网络选项卡，看看他们在做什么。您不妨向已经解决此问题的大规模应用学习。

【讨论】：

帅哥我已经在尝试这些优化了

@Geek - 见我刚刚添加的最后一段。

当然我会检查一下（我的意思是大型应用程序）

【参考方案2】：

长轮询优于轮询

如果您以设定的时间间隔进行轮询，最好在服务器端设置超时并等待返回消息直到给定数量的循环。这对 SPA 尤其有意义。 但是，如果您进行轮询，则应增加收到的每个空响应的时间间隔。

按事件分组请求，而不是按实体

假设您每 10 秒轮询一次，以检索新消息。此外，您每 10 秒轮询一次以检索更多通知。而不是做两个请求，你应该只做一个 ajax 请求并返回一个大的 json 响应，然后你用它来修改客户端的 DOM 元素。

尽可能使用服务器发送的事件或套接字

套接字或服务器发送的事件将导致更少的请求，并且只会在服务器端实际发生某些事情时通知您。这是一个很好的comparison。

【参考方案3】：

这里有一些你可以做的事情

首先

消除所有内存泄漏。将您的应用程序放入沙盒中，并给它最艰难的时间来记录任何内存泄漏。调查它们并更正您的代码。

那么

减少请求数。仔细研究您的应用程序中的最佳阈值，并且只在论文中触发您的请求。尝试批量处理您的请求，并尽可能将它们放入单个请求中。

尽可能使用 GET 请求。它们比较简单，而且行动迅速。此步骤对于在其操作中触发大量请求的应用程序很重要。

仔细选择数据格式。它可以是纯文本、JSON 或 XML。找出对你影响最小的那个 应用程序并适当地切换到该应用程序。配置你的服务器 尽可能使用数据压缩。

优化服务器。使用正确的 Expire 或 Cache-Control 标头 对于内容是服务器。如果可能，请使用ETags。

尝试将您的内容放在 CDN 上。这可能会将资源放在 地理位置更靠近用户，让您的应用程序运行得更快。

【参考方案4】：

另外，如果你想建立一个聊天服务器或向服务器发送快速消息，你应该使用像 socket.io 这样的 webSockets。

【讨论】：

答案有些不完整，但通过 websockets 引起了我的注意 :)

【参考方案5】：

优化（最小化）jQuery AJAX调用主要有3个步骤：

在调用函数时将完成的回调函数作为参数传递 从函数中返回 jqXhr 对象，并分配完成回调 或者切换到使用 jQuery.ajax()，并传递整个选项对象

请参考此链接：How to optimize (minimize) jQuery AJAX calls

【参考方案6】：

您可以为此使用 Ajax 调用的缓存功能，帮助您在请求期间首先获取所有数据并存储在缓存中，并且下次没有 Ajax 请求发生时，仅使用缓存数据完成数据操作。

此外，您只能通过减少 Ajax 调用时请求和发送的数据量来优化 Ajax 调用请求和响应时间。这只能通过在 Ajax 调用期间删除不需要的数据来完成。

除此之外，所有优化都取决于代码和数据库逻辑。为了提高性能并减少应用程序崩溃，优化的代码和数据库逻辑可以帮助您。

【参考方案7】：

使用 ajax 回调创建变量并使用它 您每创建一个新的 xhr 请求实例，该实例将在 内存直到完成回调执行。更好的方法是创建新的ajax 对先前 ajax 的请求完成，这意味着您将只有一个 xhr 请求实例。

数据发送到服务器后，清理你的对象数据，例如：

array.length = 0; 对象=空； 图片.src = ""; 文件 = 空；

【参考方案8】：

正如@jfriend00 所说，Ajax 请求不会产生内存泄漏问题...

这就是你的代码可能会做的事情！

满足您需要的最佳方法是使用您的数据层服务打开一个套接字层，因此，当域模型发生更改时，您可以收到通知，而不是轮询。

结帐Socket.io...

如果你不想实现一个 Socket Layer，我认为提高性能的方法并不多......

在我看来，除了 - 当然 - 代码改进操作（重构、ecc.）之外，您还可以做的一件事是实现一个“尾部管理系统”.. .

研究 Promise 的工作原理（es6、jQuery、Q、bluebird） 创建一个 QueueService，一个简单的 javascript 类，它知道如何序列化所有 (Ajax) 任务（承诺）； 在控制器和数据层访问服务之间插入 QueueService 实现一个简单的轻量级 CacheSystem，防止不必要的 AjaxRequest！