Question

在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中。< / p>

但是我完全不知道哪种方法更有效率w.r.t.记忆，甚至如何测试这样的东西。

Answer 1

你是对的，加载现有按钮而不是创建按钮肯定更快。解析标记在浏览器中得到了高度优化，而且正如您所提到的，必须创建元素并将其添加到DOM是额外的开销。我用秒表类运行了一个简单的基准测试：

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。

Dart：静态与动态资源利用率

1 个答案: