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

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中。

但是我完全不知道哪种方法更有效的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 毫秒，创建按钮：0.022 毫秒。