Ajaxのコンテンツダウンロード時間が遅い問題の解決方法（詳細分析）

この記事では、Ajax のコンテンツのダウンロード時間が遅い問題の解決策と思考プロセスを、イベントの背景とプロセスの分析を通じて詳しく紹介します。必要な方は参考にしてください。 :

今日この記事では、Ajax のコンテンツのダウンロード時間が遅い問題の解決策と考え方を紹介します。

イベントの背景:

Ajax の応答速度が非常に遅いというバグが開発者から報告されました。原因を特定したところ、その速度の遅さの原因はコンテンツのダウンロード時間が長すぎることが判明しました。 Chrome では 2 秒以上の遅延が発生しましたが、この遅延はモバイル クライアントでも発生することが後で確認されました。スクリーンショットは次のとおりです:

プロセス分析:

1. 位置付けの理由:

まず、この遅延を見たときの私の最初の反応は、これはフロントエンドのバグではないということでした。バックエンドのクラスメイトにフィードバックをしました。しかし、バックエンドの位置決めを通じて、海外の文献を読むと、インターフェイスのフィードバック時間が非常に速いことがわかり、これは非標準のブラウザ イベントによって引き起こされるバグであることがわかりました。

2. バグ分析:

開発クラスメイトとのコミュニケーションを通じて、このバグには 2 つの特徴があることがわかりました。まず、この遅延は、Ajax リクエストを発生させるためにプルアップ読み込みが必要な場合にのみ存在し、環境とブラウザーが統合されています。以下の遅延時間は同様で、どちらも 2 ～ 3 秒です。

2 番目に、プルアップで読み込まれた一部のコンポーネントも Ajax をトリガーしますが、遅延はありません。

そこで、その理由を特定するには、まずそれを理解する必要があります。プロジェクトのアーキテクチャ設計により、すべてのプルアップ読み込みは基本的なコンポーネント パガーによって完了します。コードの一部は次のとおりです。図の原理は、ブラウザのスクロール イベントとサイズ変更イベントによってコンポーネントが表示領域にあるかどうかを常に検出し、表示されている場合は hasMore 関数をトリガーします。

次に、遅延問題のあるビジネスページと遅延のないビジネスページの間で、このコンポーネントの呼び出しの違いを確認します。

比較した結果、2 つのコンポーネント間に違いは見つかりませんでした。 (したがって、この謎に興味のある学生は、それについて話し合うために私に連絡してください...ソースコードをお送りすることもできます)

何度も問題を再現した後、PC 上の Chrome では明らかに遅延が発生していることがわかりました。タッチ モード使用時 マウスホイール遅延を使用すると、時々消えて再び表示されることがあります。したがって、問題はマウスホイール イベントとそれに密接に対応するスクロール イベントにあります。

バグの解決策:

異議申し立ての理由を組み合わせ、レビューされたいくつかの投稿を通じて議論された結果、次の結論が導き出されます:

1. Chrome ブラウザーのマウスホイール イベントがこの遅延の原因です (マウスホイール)。このイベントは標準的なイベントではないため、すべての人に推奨されるわけではありません)、もちろんです。コードではマウスホイール イベントを使用しませんでしたが、スクロール イベントを使用するとマウスホイール イベントと競合が発生する可能性があります。残念ながら、特別なモバイル クライアントの Web ビューにもこの欠陥が発生しました。

2. この問題を解決するには、このイベントをリッスンしてみてください (ブラウザーにこのイベントがない場合、このリッスンに応答せず、競合は発生しません)。イベントがトリガーされたら、すべてをキャンセルします。デフォルトの動作:

そのため、イベント モデルの deltaY (マウスの垂直スクロール量) をリッスンすることで、垂直方向の変位がある場合に、preventDefault がトリガーされるため、コードは次のようになります:

 window.addEventListener("mousewheel", (e) => {
   if (e.deltaY === 1) {
     e.preventDefault();
   }
 })

このコードをページの初期化に追加します。フロントエンド基本ライブラリのコード、そして魔法は、関連するページのコンテンツのダウンロード遅延の問題が解決されたことが判明しました。

概要:

互換性問題の本質: ​​

Webkit アーキテクチャには、一般にブラウザ間で共有されないモジュールがいくつかあり、ブラウザ間で共有されない特定の機能を持つモジュールもいくつかあります。ブラウザーの動作は、さまざまなコンパイル設定によって変更できます。したがって、Webkit を使用する多くのブラウザーは異なる動作を示す可能性があります。

上記は私があなたのためにまとめたものです。

関連記事:

開始処理とレビュー処理の実装方法
jsのカプセル化

ajax

関数の実装手順の詳細説明
PHP+Mys ql+Ajaxで実装淘宝顧客サービス Aliwangwang チャット機能の使い方（トップページ）

以上がAjaxのコンテンツダウンロード時間が遅い問題の解決方法（詳細分析）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。