3

在 Dart 中，当你运行交叉编译的 JavaScript 时，有两种方法可以创建元素的实例，例如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);

我对上述两种方法之间的速度和内存考虑感兴趣：

  • 哪个更快，为什么？
  • 哪个内存占用更小，为什么？

我的猜测是前一种方法速度较慢，因为它强制 JavaScript 创建ButtonElement（占用 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 ms，创建按钮：0.022 ms。

于 2013-12-30T15:19:31.923 回答