Ajax聊天页面冻结了浏览器窗口

Question

我有网站。我用jQuery AJAX编写了聊天页面。有3个ajax电话。

1. 发送新聊天文字的AJAX请求，
2. 检测用户的AJAX请求正在输入
3. AJAX请求检测新邮件。

我使用JSON发送和接收聊天的低数据。我使用最好的技术与AJAX聊天，但是当我在输入框中输入消息或在聊天历史中向上和向下滚动时，网页会冻结。我无法理解为什么页面会冻结。

首先，我获取了所有聊天记录。我改了它，所以它只提取新消息，如果有的话，但这并没有解决我的问题。

其次，我尝试设置async=true或 false - 这并不能解决我的问题。它必须正常工作而不冻结，但它会冻结。

屏幕截图如下。

Answer 1

您是否在排队AJAX请求？

如果你正在使用jQuery，使用$.Deferred，或者直接将AJAX函数直接放在函数中，你可以使用.queue()。或者，您可能需要在函数上设置/调整setTimeout。

一个非常棒的开发人员（谁不是我）developed an ajaxQueue plugin能很好地处理这些事件。一个有效的jsfiddle示例是here。

Answer 2

根据您的要求，我可以想象实施中存在两个可能的问题。

1. 你有一个用户输入功能，这意味着你必须绑定一个键事件（键入，按键，按键）如果你没有去除你的事件处理程序，将会有一个请求对于键入的每个字符，可能会冻结浏览器。 jQuery的debounce功能有一些易于使用的插件。这是一个示例http://benalman.com/projects/jquery-throttle-debounce-plugin/
2. DOM操作在所有浏览器中都非常耗时。与Angular和React不同，jQuery没有为您优化它。您必须最小化添加/更新/删除DOM元素。假设您获取消息，在DOM树中执行任何操作之前，请检查是否存在任何更改/它们是否存在。

基于document，async的{​​{1}}选项默认为true。您不需要自己添加它。