1

1ページにRIAを作成しました。Dojo1.7.2を使用しています。このページには、約200のdijit / NumberSpinnersと、いくつかのTabContainersおよびTitlePanesが含まれています。もちろん、これは、クライアントの会社が使用しているInternet Explorer 8を除いて、すべてのブラウザーで完全に機能します。

すべてのブラウザーで、ページ全体の解析に数秒かかります。IE8では2分でしたが、次のヒントを使用して40秒に短縮しました。

  • カスタムビルドを使用する
  • 宣言的ではなくプログラムでウィジェットを作成する
  • ウィジェットが表示されたら、ウィジェットを解析します。（これは解析を高速化するものではなく、ユーザーがアプリケーションを使用している間、前ではなく待機するだけです。）
  • NumberTextBoxの代わりにNumberSpinnersを使用します（これにより、解析時間が半分に短縮されました！）

他のヒントはありますか？NumberSpinnersを再利用して、divが表示されたときにそれらをスローすることもできますが、これには、アプリケーションを大幅に書き直す必要があります。

4

1 に答える 1

2

あなたが直面している状況は、非常に多くのノードが DOM でプログラム的に作成されているということです。IE は、javascript エンジンによって抑制されているため、これに対するパフォーマンスが低くなります。えっ？！

あなたの目標は、実行時にこれをオーバーライドするのではなく、事前に可能な限り定義することです。これは、 data-dojo-props / construct 引数でパラメーターを設定することを意味します。これは特に onClick ハンドラーなどに当てはまります。次のようにすることでこれを実現できます。

var MyConstruct = dojo.define("foo.MyConstruct", [ /* inheritance */ dijit.form.ValidationTextBox ], function() {
      // instead of setting properties during construct, preset those which are possible
      constraints: { min: 0, max: 100 },
      postMixInArguments: function() {
          this.inherited(arguments);    // call widget first
          if(this.constructParameter) ; // act on it
      },
      // implement any overrides you otherwise would need
      // and for minimal runtime overhead, redefine the private version, like _onBlur
      // copy the source and change what you need
      onBlur: function () {
          // an event override example
      }
});

しかし; NumberSpinners > NumberTextBoxes が 50% 減少したのはなぜですか? これが理由です：

テンプレート テキストボックス

<div class="dijit dijitReset dijitInline dijitLeft" id="widget_${id}" role="presentation"
    ><div class="dijitReset dijitInputField dijitInputContainer"
        ><input class="dijitReset dijitInputInner" data-dojo-attach-point='textbox,focusNode' autocomplete="off"
            ${!nameAttrSetting} type='${type}'
    /></div
></div>

テンプレートスピナー

<div class="dijit dijitReset dijitInline dijitLeft"
    id="widget_${id}" role="presentation"
    ><div class="dijitReset dijitButtonNode dijitSpinnerButtonContainer"
        ><input class="dijitReset dijitInputField dijitSpinnerButtonInner" type="text" tabIndex="-1" readonly="readonly" role="presentation"
        /><div class="dijitReset dijitLeft dijitButtonNode dijitArrowButton dijitUpArrowButton"
            data-dojo-attach-point="upArrowNode"
            ><div class="dijitArrowButtonInner"
                ><input class="dijitReset dijitInputField" value="&#9650;" type="text" tabIndex="-1" readonly="readonly" role="presentation"
                    ${_buttonInputDisabled}
            /></div
        ></div
        ><div class="dijitReset dijitLeft dijitButtonNode dijitArrowButton dijitDownArrowButton"
            data-dojo-attach-point="downArrowNode"
            ><div class="dijitArrowButtonInner"
                ><input class="dijitReset dijitInputField" value="&#9660;" type="text" tabIndex="-1" readonly="readonly" role="presentation"
                    ${_buttonInputDisabled}
            /></div
        ></div
    ></div
    ><div class='dijitReset dijitValidationContainer'
        ><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="&#935;" type="text" tabIndex="-1" readonly="readonly" role="presentation"
    /></div
    ><div class="dijitReset dijitInputField dijitInputContainer"
        ><input class='dijitReset dijitInputInner' data-dojo-attach-point="textbox,focusNode" type="${type}" data-dojo-attach-event="onkeypress:_onKeyPress"
            role="spinbutton" autocomplete="off" ${!nameAttrSetting}
    /></div
></div>

TextBox テンプレートを最適化するためにできることはあまりありません。_getTypeAttr を介して通常の exp 置換を使用して設定される ${type} パラメータのみがエントリポイントになります。postMixInProps では (_TemplatedMixin が実行されて DOM が生成される前)、値は他のものが指定されていても 'text' にオーバーライドされます。ただし、これがどのように関係するかはわかりませんが、focusNode + FocusMixin を取り除きたいと思う人もいるかもしれませんが、それについては説明しません。

dijit/form/MappedTextBox ( <input>'true' 値を含むhidden を作成します。 http://bugs.dojotoolkit.org/ticket/8660を参照してください。これにより、'this.name' に正規表現置換が適用されます。 ' 問題を解決するには - 入力フィールドの name 属性を除外すると、それが処理されます (可能であれば、代わりに Id を使用します)。

テンプレート検証テキストボックス

NumberTextBox を使用する主な理由は、範囲の制限ですよね? その特定のモジュールをロードするために、多くの mixin が実行されますが、基本的には ValidationTextBox に基づいています。これは.validate機能を提供し、必要に応じてメッセージを表示します。上記の focusmixin の削除に関する注記は、メッセージが onBlur イベントに作用するため、ビジネスを停止します。

NumberTextBox ではなく ValidationTextBox を使用し、カスタム機能によって範囲チェックを実装すると、驚くほどうまくいくと思います。多くの eval'd コードが validationtextbox の上で実行され、numbertextboxes になります。そのうちのいくつかはおそらくオーバーヘッドです。

<div class="dijit dijitReset dijitInline dijitLeft"
    id="widget_${id}" role="presentation"
    ><div class='dijitReset dijitValidationContainer'
        ><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="&#935; " type="text" tabIndex="-1" readonly="readonly" role="presentation"
    /></div
    ><div class="dijitReset dijitInputField dijitInputContainer"
        ><input class="dijitReset dijitInputInner" data-dojo-attach-point='textbox,focusNode' autocomplete="off"
            ${!nameAttrSetting} type='${type}'
    /></div
></div>

検証へのサンプル オーバーライド:

dijit.byId("validationTextBoxNodeId").validator = function(value, constraints){

    // Check that email has not been used yet.
    if(some-checks){
        return true;
    }else{
        return false;
    }
}
于 2012-06-04T11:48:06.457 に答える