<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="test.css" /> </head> <body> <div class="main-container"> <div class="board"> <div class="hand-container" id="player2-hand"></div> <div class="playing-area" id="player2-area"> <div class="left-section"> <div class="abilities"> <button class="circle ability" id="player2-draw-card-button"> <svg width="30%" viewbox="0 0 30 42" class="teardrop"> <path fill="rgb(66, 132, 169)" d="M15 3 Q16.5 6.8 25 18 A12.8 12.8 0 1 1 5 18 Q13.5 6.8 15 3z" /> <text x="50%" y="60%" text-anchor="middle" dominant-baseline="middle" font-size="20" fill="white"> 2 </text> </svg> Draw Card </button> <button class="circle ability" id="player2-draw-watersilo-button"> <svg width="30%" viewbox="0 0 30 42" class="teardrop"> <path fill="rgb(66, 132, 169)" d="M15 3 Q16.5 6.8 25 18 A12.8 12.8 0 1 1 5 18 Q13.5 6.8 15 3z" /> <text x="50%" y="60%" text-anchor="middle" dominant-baseline="middle" font-size="20" fill="white"> 1 </text> </svg> Water Silo </button> </div> <div class="cards-column"> <div class="card" id="watersilo"></div> <div class="card" id="raiders"></div> </div> <div class="water-container" id="player2-water-container"> <div class="circle water"></div> <div class="circle water"></div> <div class="circle water"></div> </div> </div> <div class="people-section"> <div class="column column1"> <div class="player2 card camp"></div> <div class="player2 card empty protected-row"></div> <div class="player2 card empty unprotected-row"></div> </div> <div class="column column2"> <div class="player2 card camp"></div> <div class="player2 card empty protected-row"></div> <div class="player2 card empty unprotected-row"></div> </div> <div class="column column3"> <div class="player2 card camp"></div> <div class="player2 card empty protected-row"></div> <div class="player2 card empty unprotected-row"></div> </div> </div> <div class="event-column"> <div class="event card empty" id="event3">3</div> <div class="event card empty" id="event2">2</div> <div class="event card empty" id="event1">1</div> </div> </div> <div class="center-draw-row"> <div class="card-section"> <div class="card-spot" id="draw-pile"></div> <div class="card-spot" id="discard-pile"></div> </div> </div> <div class="playing-area" id="player1-area"> <div class="left-section"> <div class="player1 abilities"> <button class="circle" id="player1-draw-card-button"> <svg width="30%" viewbox="0 0 30 42" class="teardrop"> <path fill="rgb(66, 132, 169)" d="M15 3 Q16.5 6.8 25 18 A12.8 12.8 0 1 1 5 18 Q13.5 6.8 15 3z" /> <text x="50%" y="60%" text-anchor="middle" dominant-baseline="middle" font-size="20" fill="white"> 2 </text> </svg> Draw Card </button> <button class="circle" id="player1-draw-watersilo-button"> <svg width="30%" viewbox="0 0 30 42" class="teardrop"> <path fill="rgb(66, 132, 169)" d="M15 3 Q16.5 6.8 25 18 A12.8 12.8 0 1 1 5 18 Q13.5 6.8 15 3z" /> <text x="50%" y="60%" text-anchor="middle" dominant-baseline="middle" font-size="20" fill="white"> 1 </text> </svg> Water Silo </button> </div> <div class="cards-column"> <div class="card" id="watersilo"></div> <div class="card" id="raiders"></div> </div> <div class="player1 water-container" id="player1-water-container"> <div class="circle water"></div> <div class="circle water"></div> <div class="circle water"></div> <!-- <div class="water-container2"> <div class="circle water"></div> <div class="circle water"></div> </div> --> </div> </div> <div class="people-section"> <div class="player1 column column1"> <div class="player1 card empty protected-row"></div> <div class="player1 card empty unprotected-row"></div> <div class="player1 card camp"></div> </div> <div class="player1 column column2"> <div class="player1 card empty protected-row"></div> <div class="player1 card empty unprotected-row"></div> <div class="player1 card camp"></div> </div> <div class="player1 column column3"> <div class="player1 card empty protected-row"></div> <div class="player1 card empty unprotected-row"></div> <div class="player1 card camp"></div> </div> </div> <div class="player1 event-column"> <div class="event card empty" id="event1">1</div> <div class="event card empty" id="event2">2</div> <div class="event card empty" id="event3">3</div> </div> </div> <div class="hand-container" id="player1-hand"></div> </div> <div class="info-column"> <div class="message-area">messages</div> </div> </div> </body></html><!-- <div class="handArea" id="player-hand"> <div class="card people" id="assassin"></div> <div class="card people" id="cultLeader"></div> <div class="card people" id="doomsayer"></div> <div class="card people" id="exterminator"></div> <div class="card people" id="gunner"></div> <div class="card people" id="holdout"></div> <div class="card people" id="looter"></div> <div class="card people" id="mimic"></div></div> -->/*your preparation JavaScript code goes hereTo execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/async function globalMeasureThatScriptPrepareFunction() { // This function is optional, feel free to remove it. // await someThing();}function $id(id) { return document.getElementById(id);}$id("player1-draw-watersilo-button");function $class(className) { return document.getElementsByClassName(className);}$class("player1 abilities");function $(val) { return document.querySelector(val);}$("#player1-draw-watersilo-button");function $(val) { return document.querySelector(val);}$(".player1 .abilities");--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| TESTER1 | |
| TESTER2 | |
| TESTER4 | |
| TESTER5 |
| Test name | Executions per second |
|---|---|
| TESTER1 | 40471852.0 Ops/sec |
| TESTER2 | 31960950.0 Ops/sec |
| TESTER4 | 1238068.2 Ops/sec |
| TESTER5 | 1141966.5 Ops/sec |
The provided benchmark focuses on testing the performance of different methods to retrieve HTML elements from the DOM (Document Object Model). The benchmark compares how quickly various functions can return elements based on different selectors, specifically for a web application interface. Here is a breakdown of the individual test cases, their purpose, and implications.
TESTER1
getElementById() method.#player1-draw-watersilo-button.TESTER2
getElementsByClassName()..player1 abilities (with a class name).TESTER4
querySelector().#player1-draw-watersilo-button.getElementById() and getElementsByClassName(), as it has to parse the selector and create a CSS-like matching algorithm.TESTER5
querySelector()..player1 .abilities (class selector).The benchmarks show a significant difference in performance between ID selection (getElementById()), and class or CSS selector methods (getElementsByClassName() and querySelector()):
getElementById() is the clear winner for speed, which is expected since accessing an ID is typically O(1) complexity.getElementsByClassName() is also fast but slower than ID selectors because it needs to traverse the DOM for all matching elements.querySelector() methods, while more flexible and powerful, are substantially slower due to the overhead of parsing and matching complex CSS selectors.querySelector() is slower, its ability to provide complex selectors can lead to cleaner, more maintainable code. It allows developers to write less code and avoid unnecessary DOM manipulation.getElementsByTagName(): Similar to getElementsByClassName(), it retrieves elements based on tag names but does not support the versatility of class names or IDs.document.querySelectorAll(): Provides a static NodeList of all elements matching a selector, allowing for batch operations but is also slower.In summary, when selecting a method for DOM querying, developers should weigh performance and specificity against the complexity of the selectors needed for their application.
