Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
domparser vs native vs none long unrendered
(version: 0)
Comparing performance of:
domparser vs native vs none
Created:
2 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="foo">hello</div>
Script Preparation code:
window.testString = ` <div id="p-interaction" class="vector-menu mw-portlet mw-portlet-interaction" > <div class="vector-menu-heading"> Contribute </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"><li id="n-help" class="mw-list-item"><a href="/wiki/Help:Contents" title="Guidance on how to use and edit Wikipedia"><span>Help</span></a></li><li id="n-introduction" class="mw-list-item"><a href="/wiki/Help:Introduction" title="Learn how to edit Wikipedia"><span>Learn to edit</span></a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikipedia:Community_portal" title="The hub for editors"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes to Wikipedia [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_upload_wizard" title="Add images or other media for use on Wikipedia"><span>Upload file</span></a></li></ul> </div> </div> <div class="vector-main-menu-action vector-main-menu-action-lang-alert"> <div class="vector-main-menu-action-item"> <div class="vector-main-menu-action-heading vector-menu-heading">Languages</div> <div class="vector-main-menu-action-content vector-menu-content"> <div class="mw-message-box-notice vector-language-sidebar-alert mw-message-box">Language links are at the top of the page across from the title.</div> </div> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container"> <img class="mw-logo-wordmark" alt="Wikipedia" src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" style="width: 7.5em; height: 1.125em;"> <img class="mw-logo-tagline" alt="The Free Encyclopedia" src="/static/images/mobile/copyright/wikipedia-tagline-en.svg" width="117" height="13" style="width: 7.3125em; height: 0.8125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" id="" class="mw-ui-button mw-ui-quiet mw-ui-icon-element search-toggle" title="Search Wikipedia [f]"accesskey="f"><span class="mw-ui-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div> <form action="/w/index.php" id="searchform" class="vector-search-box-form"> <div id="simpleSearch" class="vector-search-box-inner" data-search-loc="header-moved"> <input class="vector-search-box-input" type="search" name="search" placeholder="Search Wikipedia" aria-label="Search Wikipedia" autocapitalize="sentences" title="Search Wikipedia [f]" accesskey="f" id="searchInput" > <input type="hidden" name="title" value="Special:Search"> <input id="mw-searchButton" class="searchButton mw-fallbackSearchButton" type="submit" name="fulltext" title="Search Wikipedia for this text" value="Search"> <input id="searchButton" class="searchButton" type="submit" name="go" title="Go to a page with this exact name if it exists" value="Go"> </div> </form> </div> </div>`;
Tests:
domparser
document.createElement("div").append(new DOMParser().parseFromString(window.testString, "text/html").body);
native
document.createElement("div").setHTML(window.testString);
none
document.createElement("div").innerHTML = window.testString;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
domparser
native
none
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):
The provided benchmark measures the performance of three different approaches for parsing and rendering HTML content in JavaScript: 1. **DOMParser**: This approach uses the `DOMParser` API to parse the HTML string into a DOM document, which can then be appended to an element or used as-is. 2. **Native**: This approach uses the browser's native HTML parser to set the HTML content of an element using the `setHTML()` method. 3. **None** (or no-op): This approach simply assigns the raw HTML string to the `innerHTML` property of a newly created element, without parsing or processing it. Let's break down each option: ### DOMParser Pros: * Can handle more complex HTML structures and attributes than native parser * Provides access to parsed document nodes and elements Cons: * May be slower due to additional overhead from parsing the HTML string into a DOM document * Requires creating a new DOM document, which may have memory implications In the benchmark, the `DOMParser` approach is executed at approximately 2197.57958984375 executions per second. ### Native Pros: * Typically faster than `DOMParser` due to optimized native parsing algorithms * Does not require creating a new DOM document or string manipulation Cons: * May not handle complex HTML structures or attributes as well as `DOMParser` * Can be more memory-intensive if the input HTML is large In the benchmark, the `Native` approach is executed at approximately 2344.590576171875 executions per second. ### None (no-op) Pros: * Typically fastest option due to minimal processing and no DOM creation * Lowers memory usage since no new elements or documents are created Cons: * May not handle HTML correctly or preserve structure due to simple assignment * Can be less reliable if input HTML is malformed or contains errors In the benchmark, the `None` (no-op) approach is executed at approximately 3261.744873046875 executions per second. Overall, the results suggest that the **None** (no-op) approach is the fastest option in this specific benchmark, likely due to its simplicity and minimal processing requirements. However, the performance difference between these options may vary depending on the specific use case or requirement for parsing and rendering HTML content in JavaScript.
Related benchmarks:
querySelector vs. getElementsByClassName[0]
PAW-PruebaCreateElement vs innerHTML
querySelectorAll(*) vs getElementsByTagName(*) iteration
domparser vs native vs none long
Comments
Confirm delete:
Do you really want to delete benchmark?