3

Dart では、クロスコンパイルされた JavaScript を実行する場合、要素のインスタンスを作成する方法が 2 つありますButtonElement。

動的に (新しいボタンを作成してブラウザの DOM に追加する):

ButtonElement button = new ButtonElement();
button
    ..name="fizz"
    ..id="blah"
    ..onClick.listen(handle);

window.document.body.children.add(button);

静的(ブラウザー DOM に既に存在する既存のボタンを読み込む):

ButtonElement button = querySelector("#button") as ButtonElement;
button
    ..name="fizz"
    ..id="blah"
    ..onClick.listen(handle);

上記の2つの方法間の速度とメモリの両方の考慮事項に興味があります。

  • どちらが速いですか、なぜですか?
  • メモリフットプリントが小さいのはどれですか?その理由は?

私の推測ButtonElementでは、前者の方法は、JavaScript に(CPU サイクルを消費する) を強制的に作成させ、それをブラウザーの DOM に追加する必要があるため、処理が遅くなります。

しかし、どの方法がメモリに関してより効率的であるか、またはそのようなことをテストする方法さえまったくわかりません。

4

1 に答える 1

3

そうです、ボタンを作成するよりも、既存のボタンをロードする方が確実に高速です。マークアップの解析はブラウザーで高度に最適化されており、さらに、要素を作成して DOM に追加する必要があるため、余分なオーバーヘッドが発生します。Stopwatch クラスで簡単なベンチマークを実行しました。

ButtonElement button1 = querySelector("#button") as ButtonElement
    ..name = "fizz"
    ..onClick.listen(handle);

Stopwatch s = new Stopwatch()
    ..start();

for(int i = 0; i < 1000; i++) {
  ButtonElement button1 = querySelector("#button") as ButtonElement
      ..name = "fizz$i"
      ..onClick.listen(handle);
}
s.stop();

print('queried button: ${s.elapsedMilliseconds / 1000} ms');

ButtonElement button2 = new ButtonElement()
    ..name = "fizz2"
    ..onClick.listen(handle);
document.body.children.add(button2);  

s.start();
for(int i = 0; i < 1000; i++) {
  ButtonElement button2 = new ButtonElement()
      ..name = "fizz2$i"
      ..onClick.listen(handle);

  document.body.children.add(button2);  
}

s.stop();

print('created button: ${s.elapsedMilliseconds / 1000} ms');

結果: クエリされたボタン: 0.01 ミリ秒、作成されたボタン: 0.022 ミリ秒。

于 2013-12-30T15:19:31.923 に答える