Benchmark: Map Code4 - MeasureThat.net

Tests:

innerText
const places = [ [-95.712891, 37.09024, "United States", "76.9 million visitors"], [-106.346771, 56.130367, "Canada", "76.9 million visitors"], [-102.552788, 23.634501, "Mexico", "76.9 million visitors"], [-51.925282, -14.235004, "Brazil", "76.9 million visitors"], [-63.616673, -38.416096, "Argentina", "76.9 million visitors"], [25.748152, 61.92411, "Finland", "76.9 million visitors"], [-3.435973, 55.378052, "United Kingdom", "76.9 million visitors"], [10.451526, 51.165691, "Germany", "76.9 million visitors"], [12.56738, 41.871941, "Italy", "76.9 million visitors"], [35.24332, 38.963745, "Turkey", "76.9 million visitors"], [-3.74922, 40.463669, "Spain", "76.9 million visitors"], [22.937506, -30.559483, "South Africa", "76.9 million visitors"], [46.869106, -18.766947, "Madagascar", "76.9 million visitors"], [103.846657, 46.862495, "Mongolia", "76.9 million visitors"], [78.962883, 20.593683, "India", "76.9 million visitors"], [138.25293, 36.204823, "Japan", "76.9 million visitors"], [100.992538, 15.870032, "Thailand", "76.9 million visitors"], [80.771797, 7.873054, "Sri Lanka", "76.9 million visitors"], [101.975769, 4.210484, "Malaysia", "76.9 million visitors"], [133.775131, -25.274399, "Australia", "76.9 million visitors"], [174.885971, -40.900558, "New Zealand", "76.9 million visitors"] ]; for (let i = 0; i < places.length; i++) { let marker = document.createElement("div"); marker.className = "main-marker"; let tooltip = document.createElement("div"); tooltip.className = "tooltip"; let placeName = document.createElement("p"); placeName.innerText = places[i][2]; tooltip.appendChild(placeName); let placeVisitors = document.createElement("span"); placeVisitors.innerText = places[i][3]; tooltip.appendChild(placeVisitors); let icomoon = document.createElement("i"); icomoon.className = "icon icon-ic-location"; marker.appendChild(tooltip); marker.appendChild(icomoon); }
textContent
const places = [ [-95.712891, 37.09024, "United States", "76.9 million visitors"], [-106.346771, 56.130367, "Canada", "76.9 million visitors"], [-102.552788, 23.634501, "Mexico", "76.9 million visitors"], [-51.925282, -14.235004, "Brazil", "76.9 million visitors"], [-63.616673, -38.416096, "Argentina", "76.9 million visitors"], [25.748152, 61.92411, "Finland", "76.9 million visitors"], [-3.435973, 55.378052, "United Kingdom", "76.9 million visitors"], [10.451526, 51.165691, "Germany", "76.9 million visitors"], [12.56738, 41.871941, "Italy", "76.9 million visitors"], [35.24332, 38.963745, "Turkey", "76.9 million visitors"], [-3.74922, 40.463669, "Spain", "76.9 million visitors"], [22.937506, -30.559483, "South Africa", "76.9 million visitors"], [46.869106, -18.766947, "Madagascar", "76.9 million visitors"], [103.846657, 46.862495, "Mongolia", "76.9 million visitors"], [78.962883, 20.593683, "India", "76.9 million visitors"], [138.25293, 36.204823, "Japan", "76.9 million visitors"], [100.992538, 15.870032, "Thailand", "76.9 million visitors"], [80.771797, 7.873054, "Sri Lanka", "76.9 million visitors"], [101.975769, 4.210484, "Malaysia", "76.9 million visitors"], [133.775131, -25.274399, "Australia", "76.9 million visitors"], [174.885971, -40.900558, "New Zealand", "76.9 million visitors"] ]; for (let i = 0; i < places.length; i++) { let marker = document.createElement("div"); marker.className = "main-marker"; let tooltip = document.createElement("div"); tooltip.className = "tooltip"; let placeName = document.createElement("p"); placeName.textContent = places[i][2]; tooltip.appendChild(placeName); let placeVisitors = document.createElement("span"); placeVisitors.textContent = places[i][3]; tooltip.appendChild(placeVisitors); let icomoon = document.createElement("i"); icomoon.className = "icon icon-ic-location"; marker.appendChild(tooltip); marker.appendChild(icomoon); }
fragment
const places = [ [-95.712891, 37.09024, "United States", "76.9 million visitors"], [-106.346771, 56.130367, "Canada", "76.9 million visitors"], [-102.552788, 23.634501, "Mexico", "76.9 million visitors"], [-51.925282, -14.235004, "Brazil", "76.9 million visitors"], [-63.616673, -38.416096, "Argentina", "76.9 million visitors"], [25.748152, 61.92411, "Finland", "76.9 million visitors"], [-3.435973, 55.378052, "United Kingdom", "76.9 million visitors"], [10.451526, 51.165691, "Germany", "76.9 million visitors"], [12.56738, 41.871941, "Italy", "76.9 million visitors"], [35.24332, 38.963745, "Turkey", "76.9 million visitors"], [-3.74922, 40.463669, "Spain", "76.9 million visitors"], [22.937506, -30.559483, "South Africa", "76.9 million visitors"], [46.869106, -18.766947, "Madagascar", "76.9 million visitors"], [103.846657, 46.862495, "Mongolia", "76.9 million visitors"], [78.962883, 20.593683, "India", "76.9 million visitors"], [138.25293, 36.204823, "Japan", "76.9 million visitors"], [100.992538, 15.870032, "Thailand", "76.9 million visitors"], [80.771797, 7.873054, "Sri Lanka", "76.9 million visitors"], [101.975769, 4.210484, "Malaysia", "76.9 million visitors"], [133.775131, -25.274399, "Australia", "76.9 million visitors"], [174.885971, -40.900558, "New Zealand", "76.9 million visitors"] ]; for (let i = 0; i < places.length; i++) { let markerFragment = document.createDocumentFragment(); let marker = document.createElement("div"); marker.className = "main-marker"; let mainFragment = document.createDocumentFragment(); let tooltipFragment = document.createDocumentFragment(); let tooltip = document.createElement("div"); tooltip.className = "tooltip"; tooltipFragment.appendChild(tooltip); let textFragment = document.createDocumentFragment(); let nameFragment = document.createDocumentFragment(); let placeName = document.createElement("p"); placeName.textContent = places[i][2]; nameFragment.appendChild(placeName); textFragment.appendChild(nameFragment); let visitorFragment = document.createDocumentFragment(); let placeVisitors = document.createElement("span"); placeVisitors.textContent = places[i][3]; visitorFragment.appendChild(placeVisitors); textFragment.appendChild(visitorFragment); tooltipFragment.appendChild(textFragment); mainFragment.appendChild(tooltipFragment); markerFragment.appendChild(mainFragment); let icomoonFragment = document.createDocumentFragment(); let icomoon = document.createElement("i"); icomoon.className = "icon icon-ic-location"; icomoonFragment.appendChild(icomoon); markerFragment.appendChild(icomoonFragment); marker.appendChild(markerFragment); }
innerHTML
const places = [ [-95.712891, 37.09024, "United States", "76.9 million visitors"], [-106.346771, 56.130367, "Canada", "76.9 million visitors"], [-102.552788, 23.634501, "Mexico", "76.9 million visitors"], [-51.925282, -14.235004, "Brazil", "76.9 million visitors"], [-63.616673, -38.416096, "Argentina", "76.9 million visitors"], [25.748152, 61.92411, "Finland", "76.9 million visitors"], [-3.435973, 55.378052, "United Kingdom", "76.9 million visitors"], [10.451526, 51.165691, "Germany", "76.9 million visitors"], [12.56738, 41.871941, "Italy", "76.9 million visitors"], [35.24332, 38.963745, "Turkey", "76.9 million visitors"], [-3.74922, 40.463669, "Spain", "76.9 million visitors"], [22.937506, -30.559483, "South Africa", "76.9 million visitors"], [46.869106, -18.766947, "Madagascar", "76.9 million visitors"], [103.846657, 46.862495, "Mongolia", "76.9 million visitors"], [78.962883, 20.593683, "India", "76.9 million visitors"], [138.25293, 36.204823, "Japan", "76.9 million visitors"], [100.992538, 15.870032, "Thailand", "76.9 million visitors"], [80.771797, 7.873054, "Sri Lanka", "76.9 million visitors"], [101.975769, 4.210484, "Malaysia", "76.9 million visitors"], [133.775131, -25.274399, "Australia", "76.9 million visitors"], [174.885971, -40.900558, "New Zealand", "76.9 million visitors"] ]; for (let i = 0; i < places.length; i++) { let marker = document.createElement("div"); marker.className = "main-marker"; marker.innerHTML = '<div class="tooltip"><p>'+places[i][2]+'</p><span>'+places[i][3]+'</span></div><i class="icon icon-ic-location"></i>' }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerText
textContent
fragment
innerHTML

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

It seems like we have two JSON strings here, but I'll focus on the first one.

The first JSON string appears to be a list of geographic locations with their corresponding visitor numbers:
```
[
  [37.7749, -122.4194, "San Francisco", "23.5 million visitors"],
  [-33.8688, 151.2093, "Sydney", "13.7 million visitors"],
  ...
]
```
The code snippet you provided seems to be parsing this data and rendering it on a webpage using JavaScript. The `innerHTML` property is being used to set the content of HTML elements.

Based on the benchmark results, it appears that the execution time for setting the `innerHTML` property is relatively fast, with an average of 221.7841339111328 executions per second.

To answer your question, without more context or information about the specific use case, it's difficult to provide a definitive answer. However, I can suggest some possible scenarios where the execution speed of `innerHTML` might be relevant:

1. **Web scraping**: If you're using this data for web scraping purposes, the execution speed of `innerHTML` could impact your overall performance.
2. **Data visualization**: If you're displaying this data on a map or chart, the rendering speed of the HTML elements could affect the user experience.
3. **API integrations**: If this data is being fetched from an API and rendered on a webpage, the execution speed of `innerHTML` might impact the responsiveness of your application.

If you have more specific questions or context about your use case, I'd be happy to try and provide a more tailored answer!

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36

Browser/OS: Chrome 83 on Windows

View result in a separate tab

Test name	Executions per second
innerText	346.3 Ops/sec
textContent	391.5 Ops/sec
fragment	140.1 Ops/sec
innerHTML	221.8 Ops/sec

Related benchmarks:

Map Code4 (version: 0)

Comparing performance of: innerText vs textContent vs fragment vs innerHTML

Created: 4 years ago by: Guest

Jump to the latest result

innerText

textContent

fragment

innerHTML

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):