Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Map Code4
(version: 0)
Comparing performance of:
innerText vs textContent vs fragment vs innerHTML
Created:
6 years ago
by:
Guest
Jump to the latest result
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>
Run tests (4)
Previous results
Fork
Test case name
Result
innerText
textContent
fragment
innerHTML
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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!
Related benchmarks:
Map vs Object 123456
Inverted map lookup vs. dynamic map lookup
Inverted map lookup vs. dynamic map lookup vs. Set
Object vs Map 5
Comparison of three map functions
Comments
Confirm delete:
Do you really want to delete benchmark?