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

【问题标题】：Ajax chat page freezes browser windowAjax 聊天页面冻结浏览器窗口
【发布时间】：2017-06-30 22:10:27
【问题描述】：

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

我使用 JSON 发送和接收低数据进行聊天。我使用 AJAX 聊天时使用了最好的技术，但是当我在输入框中输入消息或在聊天历史记录中上下滚动时，网页会冻结。我不明白为什么页面冻结。

首先我要获取所有聊天记录。我对其进行了更改，因此它仅在有新消息时才获取新消息，但这并没有解决我的问题。

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

截图如下。

【问题讨论】：

【解决方案1】：

您是否正在排队您的 AJAX 请求？

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

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

【讨论】：

【解决方案2】：

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

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

$.ajax() 的async 选项基于document 默认为真。不需要自己添加。

【讨论】：