1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62

// The purpose of this benchmark is measuring ef.js runtime performance in real
// browsers. However, due to JIT/GC and test procedures being lightweight, most of
// run duration would be < 1ms. Because of this, most likely p75 and p90 would be
// 0ms on dev machine.
import { group, bench } from "./framework.js";

import { attr, el, effect, signal } from "../../esm/es2019/ef.js";

await group("Element creation", [
  bench("Manual (DOM)", () => {
    const div = document.createElement("div");
    document.body.appendChild(div);

    const button = document.createElement("button");
    button.textContent = "Button";
    button.setAttribute("aria-disabled", "false");

    div.appendChild(button);

    document.body.removeChild(div);
  }),
  bench("Manual (innerHTML)", () => {
    const div = document.createElement("div");
    document.body.appendChild(div);

    div.innerHTML = `<button aria-disabled="false">Button</button>`;

    document.body.removeChild(div);
  }),
  bench("Without Signal", () => {
    const div = el("div");
    document.body.appendChild(div);

    div.appendChild(el("button", [attr("aria-disabled", "false")], ["Button"]));

    document.body.removeChild(div);
  }),
  bench("With Signal", () => {
    const div = el("div");
    document.body.appendChild(div);

    const $e = effect(() => {
      div.appendChild(
        el("button", [attr("aria-disabled", signal("false"))], ["Button"]),
      );
    });

    $e.dispose();

    document.body.removeChild(div);
  }),
  bench("With Signal (without dispose)", () => {
    const div = el("div");
    document.body.appendChild(div);

    div.appendChild(
      el("button", [attr("aria-disabled", signal("false"))], ["Button"]),
    );

    document.body.removeChild(div);
  }),
]).run();