Ajaxチャット・ページでブラウザ・ウィンドウがフリーズ

Question

私はウェブサイトを持っています。私はjQuery AJAXとチャット・ページをコーディングしました。 3つのajax呼び出しがあります。

1. 新しいチャットテキストを送信するためのAJAX要求、検出したユーザのための
2. AJAX要求は、新しいメッセージを検出するための
3. AJAX要求を入力しています。

チャットのためにJSONを使用してデータを送受信します。私はAJAXとのチャットには最高のテクノロジーを使用しましたが、入力ボックスにメッセージを入力するか、チャットの履歴で上下にスクロールするとWebページがフリーズします。なぜページがフリーズしているのか分かりません。

最初にすべてのチャット履歴を取得していました。何かがあれば新しいメッセージだけを取り出すように変更しましたが、これは私の問題を解決しませんでした。

第2に、私はasync=trueまたはを偽に設定しようとしました。 - これは私の問題を解決しません。凍結せずに正しく動作する必要がありますが、凍結します。

スクリーンショットは以下のとおりです。

Answer 1

あなたのAJAX要求をキューイングしていますか？

$.Deferredを使用する場合は、jQueryを使用している場合は.queue()を使用するか、関数内にAJAX関数を直接配置してください。あるいは、機能上にsetTimeoutを設定/微調整する必要があるかもしれません。

かなり素晴らしい開発者（私ではない）developed an ajaxQueue pluginは、これらのイベントをうまく処理します。作業中の例はhereです。

Answer 2

要件に基づいて、実装に2つの問題があると思います。

1. あなたは、キーイベント（キーアップ、キーダウン、キー押下のいずれか）をバインドする必要があることを意味するユーザー入力型の機能があります。イベントハンドラをデバウンスしなかった場合、入力されたすべての文字の要求になり、ブラウザがフリーズすることがあります。 jQueryのデバウンス機能のための使いやすいプラグインがいくつかあります。ここに例がありますhttp://benalman.com/projects/jquery-throttle-debounce-plugin/
2. DOM操作はすべてのブラウザで非常に時間がかかります。 AngularとReactとは異なり、jQueryはそれを最適化しませんでした。 DOM要素の追加/更新/削除を最小限に抑える必要があります。メッセージを取得し、DOMツリーで何かをする前に、それらがそれぞれ存在するかどうかをチェックします。

$.ajax()のasyncオプションはデフォルトではdocumentに基づいて真実になることです。自分で追加する必要はありません。