4

現在、単一ページの AJAX アプリケーションを構築しています。これは、ユーザーの選択に基づいて複数のブランチと異なる言葉遣いを備えたマルチステップ ウィザードとして構築された大きな「サインアップ フォーム」です。フォームの最後には、編集可能なレビュー ページがあります。ユーザーがフォームを送信すると、かなり大きなメールが送信され、小さなメールがユーザーに送信されます。自分の冒険の本を選ぶのはとても退屈なようなものです。

機能のクリープにより、このアプリのサイズは現在のアーキテクチャの能力を超えて押し上げられており、特に Internet Explorer を使用しているコンピューターでは動作が遅すぎます (Web アプリには適していません)。現在、64 の個別のステップ、5400 の DOM 要素があり、.aspx ファイルだけで 300kb (4206 LOC) になります。アプリの読み込みには、FireFox 3 を実行する高速なマシンで 1.5 秒、IE7 を実行する低速のマシンで 20 秒かかります。ステップ間の移動には、ほぼ同じ時間がかかります。

それでは、機能を要約しましょう。

  • マルチステップ、マルチパス ウィザード スタイル フォーム (64 ステップ)
  • 現在のステップは、次のように表示されます: http://codylindley.com/CSS/325/css-step-menu
  • 複数の検証済みフィールド
  • ユーザーの選択に基づいて言葉遣いを変更する
  • 最終的な編集可能なレビュー ページ

jQuery 1.3.2 と次のプラグインを使用しています。

  • jQuery フォーム ウィザード プラグイン
  • jQueryのclueTipプラグイン
  • jQueryのセクシーコンボ
  • jQuery meioMask プラグイン

また、XML ファイルから言葉遣いをロードするためのカスタム スクリプト、レビュー ページの実行、美的要素も含まれています。

これはどこにも公開されていませんが、この種のプロジェクトに取り組み、軽量で拡張可能にする方法についてのヒントを主に探しています。ツール、チュートリアル、またはテクノロジに関するアイデアを誰かが持っている場合、それが私が探しているものです。私はかなり初心者のプログラマーです (私は主に CSS/xHTML/デザインの担当者です) ので、穏やかに話してください。このアプリを高速化するには、適切な攻撃計画が必要です。何か案は？

4

4 に答える 4

4

1 つの方法は、ステップを複数のページ/リクエストに分割することです。これを行うには、前のページの状態をどこかに保存する必要があります。データベースを使用して、これまたは他の方法を実行できます。

もう 1 つの方法は、AJAX を介して必要なパーツを動的にロードすることです。ただし、これは 54000 の DOM 要素には役立ちませんが、最初のページの読み込みには役立ちます。

質問のコメントに基づいて、この問題を「解決」する簡単な方法は、質問のすべてのフィールドをミラーリングする C# クラスを作成することです。このようなもの：

public class MySurvey
{
  public string FirsName { get; set; }
  public string LastName { get; set; }
  // and so on...
}

次に、これをセッションに保存します（簡単にしてください...これが「最善の」方法ではないことはわかっています）。

public MySurvey Survey 
{
  get 
  { 
    var survey = Session["MySurvey"] as MySurvey;
    if (survey == null)
    {
      survey = new MySurvey();
      Session["MySurvey"] = survey;
    }
    return survey;
  }
}

このようにして、操作できる null 以外の Survey オブジェクトを常に持つことができます。

次のステップは、その大きなフォームを小さなページに分割することです。たとえば、step1.aspx、step2.aspx、step3.aspx などです。これらのページはすべて、上記のプロパティを含む共通の基本ページから継承します。この後は、step1.aspx からの要求を送り返し、Survey に保存するだけです。これは、今行っていることと同様ですが、小さな部分ごとに行います。完了したら、(Response.Redirect("~/stepX.aspx")) を次のページにリダイレクトします。前のページの情報は、セッション オブジェクトに保存されます。ブラウザのページを閉じると、戻ることはできません。

セッションに保存するのではなく、データベースまたは Cookie に保存できますが、Cookie は 4K に制限されているため、収まらない場合があります。

于 2009-07-10T17:14:06.233 に答える
1

PBZ に同意します。個々のステップを保存するのが理想的です。ただし、これは AJAX で行うことができます。ただし、そうした場合、主にフロントエンド開発のスキルセットの範囲外であると思われるものが必要になる場合があります。おそらく、新しいデータベース行を作成して、それをユーザーのセッション ID に関連付ける必要があります。次のステップをクリックするたびに、その行が更新されます。場合によっては、それを IP アドレスに結び付けて、すべてが爆発した場合に戻ってきて、「私を覚えていますか?」アプリケーションがそれを取得できるようにします。

既存の構造を最適化する限り、最適化に関しては jQuery はかなり重く、多くの jQuery モジュールを追加することは役に立ちません。多くの時間を節約できるので、それが悪いと言っているわけではありませんが、多くの機能の 1 つにモジュールを使用している場合がいくつかあり、そのモジュール全体を数行の jQuery 対応の JavaScript に置き換えることができます。 .

個々の DOM 要素を最小化する限り、前述のステップはそれをスリム化するのに役立ちます。なぜなら、おそらく、必要かどうかに関係なく、これらのモジュールに対して多くの拡張可能な関数をロードしているからです。

バックエンドでは、最適化するように指示する方法を確認するためにソースを表示する必要がありますが、個々のステップには多くの冗長性があるように思えます。再帰、または少なくともいくつかのタスクを互いに委任します。

もっと役に立ちたいと思っていますが、ソースを掘り下げることなく、基本的な戦略しか提案できません. しかし、頑張ってください！

于 2009-07-10T18:00:03.363 に答える
0

主に JQuery の最適化の問題のように思えます。

最初の提案は、できるだけ多くの選択を ID セレクターに切り替えることです。id 属性の選択のみに移行できるようになったことで、200 ～ 300 倍以上のスピードアップが実現しました。

2 番目の提案は、より攻撃的な計画です。IE が主な問題領域であるため、IE8 デバッガーを使用することをお勧めします。IE8 で f12 を押すだけです... タブ 3 と 4 はそれぞれスクリプトとプロファイラーです。

できる限り #1 を実行したら、出発点として、プロファイラーに移動し、[プロファイリングの開始] をクリックして、Web ページでスロー アクションを実行し、プロファイリングを停止します。最長のメソッド呼び出しが表示され、それを処理するだけです。

より細かいテスト/開発については、スクリプトタブに移動してください。ブレークポイント ローカルなどは分析用です。イミディエイト ウィンドウを介して変更を開発/テストできます。つまり、関数を変更する場所にブレーク ポイントを配置し、関数をトリガーし、イミディエイト ウィンドウで定義された JavaScript の代わりに JavaScript を実行します。

何かを理解したと思ったら、変更をプロファイリングして、それらが本当に改善されていることを確認してください。プロファイラーを開始し、古いコードを実行し、停止して、ベンチマークを記録するだけです。次に、プロファイラーを再起動し、即時ウィンドウを使用して変更した関数を実行します。

それはそれについてです。前述のように、そのフローで十分に処理できない場合は、JQuery 自体 (およびそのプラグイン) のパフォーマンスが非常に高くないため、標準の JavaScript に置き換えるとすべてが高速化されます。プラグインのベンチマークが遅い場合は、それらを他のプラグインに置き換えることを検討してください。

于 2009-11-04T06:25:36.740 に答える
0

同意して、ステップを分割します。5400 要素は多すぎます。

1 ページに収める必要がある場合は、いくつかのオプションがあります。

  • 生の HTML、または HTML または DOM に解析するオブジェクトの配列のいずれかを取得する AJAX 要求
  • フレームまたは iframe
  • 現在のステップに基づいて innerHTML を設定するか、DOM を操作する JavaScript。このオプションを使用すると、IE7、特に IE6 でメモリ リークが発生することに注意してください。詳細については、Google IE6 JavaScript メモリ リークを参照してください。
  • document.write を使用して、現在のステップに必要な .js ファイルのみを含めます。

HTH。

于 2009-07-10T18:06:49.933 に答える