Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Dompurify vs xss
(version: 0)
Comparing performance of:
DOMPurify vs Sanitize HTML
Created:
3 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<script src="https://cdn.jsdelivr.net/npm/xss@1.0.6/dist/xss.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.0/purify.min.js"></script>
Script Preparation code:
window.testcontent = `<h4><span style="color: #808080;">WORK BY FUNCTION</span></h4> <table style="border-collapse: collapse; width: 100%; height: 128px;" border="1"> <tbody> <tr style="height: 11px;"> <td style="width: 20%; height: 11px; text-align: center; background: #000; color: white;"> </td> <td style="width: 20%; height: 11px; text-align: center; background: #ff1493; color: white;"><strong>PM</strong></td> <td style="width: 20%; height: 11px; text-align: center; background: #228b22; color: white;"><strong>Design</strong></td> <td style="width: 20%; height: 11px; text-align: center; background: #9400d3; color: white;"><strong>Dev</strong></td> <td style="width: 20%; height: 11px; text-align: center; background: #ff4500; color: white;"><strong>QE</strong></td> </tr> <tr style="height: 13px;"> <td style="width: 20%; height: 13px; text-align: center; background: #000; color: white;"><strong>Is work needed?</strong> <br />YES | NO | ?</td> <td style="width: 20%; height: 13px; text-align: center;">-</td> <td style="width: 20%; height: 13px; text-align: center;">-</td> <td style="width: 20%; height: 13px; text-align: center;">-</td> <td style="width: 20%; height: 13px; text-align: center;">-</td> </tr> <tr style="height: 26px;"> <td style="width: 20%; text-align: center; background: #000000; color: white; height: 26px;"><strong>Can work start?<br /></strong>YES | NO | - | ?</td> <td style="width: 20%; text-align: center; background: #cccccc; color: #cccccc; height: 26px;">-</td> <td style="width: 20%; text-align: center; height: 26px;">-</td> <td style="width: 20%; text-align: center; height: 26px;">NO</td> <td style="width: 20%; text-align: center; height: 26px;">-</td> </tr> <tr style="height: 13px;"> <td style="width: 20%; height: 13px; text-align: center; background: #000; color: white;"><strong>Is work complete?</strong><br />YES | NO | - | ?</td> <td style="width: 20%; height: 13px; text-align: center;">-</td> <td style="width: 20%; height: 13px; text-align: center;">-</td> <td style="width: 20%; height: 13px; text-align: center;">-</td> <td style="width: 20%; height: 13px; text-align: center;">-</td> </tr> <tr style="height: 13px;"> <td style="width: 20%; text-align: center; background: #000000; color: white; height: 13px;"><strong>Who did the work?</strong><br />Name A | - | ?</td> <td style="width: 20%; text-align: center; height: 13px;">-</td> <td style="width: 20%; text-align: center; height: 13px;">-</td> <td style="width: 20%; text-align: center; height: 13px;">-</td> <td style="width: 20%; text-align: center; height: 13px;">-</td> </tr> <tr style="height: 26px;"> <td style="width: 20%; text-align: center; background: #000000; color: white; height: 26px;"><strong>Artifact Links<br /><br /></strong></td> <td style="width: 20%; text-align: center; height: 26px;"> </td> <td style="width: 20%; text-align: center; height: 26px;"> </td> <td style="width: 20%; text-align: center; height: 26px;"> <p><a href="#">Test</a></p> <p><a href="#">Test</a></p> </td> <td style="width: 20%; text-align: center; height: 26px;"> </td> </tr> <tr style="height: 26px;"> <td style="width: 20%; text-align: center; background: #000000; color: white; height: 26px;"><strong>Notes<br /><br /></strong></td> <td style="width: 20%; text-align: center; height: 26px;"> </td> <td style="width: 20%; text-align: center; height: 26px;"> </td> <td style="width: 20%; text-align: center; height: 26px;"> </td> <td style="width: 20%; text-align: center; height: 26px;"> </td> </tr> </tbody> </table> <p> </p> <h4><span style="color: #808080;">PRODUCT REQUIREMENTS</span></h4> <p> </p> <h4><span style="color: #808080;">FUNCTIONAL REQUIREMENTS</span></h4> <p> </p> <p> </p>`
Tests:
DOMPurify
var frag = document.createDocumentFragment(); frag.innerHTML = DOMPurify.sanitize(window.testcontent); document.appendChild(frag);
Sanitize HTML
var frag = document.createDocumentFragment(); frag.innerHTML = filterXSS(window.testcontent); document.appendChild(frag);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
DOMPurify
Sanitize HTML
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):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net. **What is being tested?** The provided JSON represents two benchmark tests: 1. **Dompurify vs XSS**: This test compares the performance of `DOMPurify` and a custom filtering function (`filterXSS`) in sanitizing HTML content. 2. **Sanitize HTML**: This test measures the performance of a single function that uses `document.createDocumentFragment()` to sanitize HTML content. **How does it work?** The benchmark code is executed repeatedly, with each execution generating a new random HTML fragment. The fragment is then sanitized using either `DOMPurify` or the custom filtering function (`filterXSS`). The resulting sanitized HTML is then appended to a document fragment and cleared from the original document. **Individual test cases:** 1. **DOMPurify**: This test creates a document fragment, sets its inner HTML to the sanitized result of `DOMPurify.sanitize(window.testcontent)`, and appends the fragment to the original document. 2. **Sanitize HTML**: This test is similar to the previous one, but uses a custom filtering function (`filterXSS`) instead of `DOMPurify`. **Latest benchmark results:** The latest results show two tests: 1. **Sanitize HTML (Chrome 106)**: This test was run on Chrome 106 and resulted in approximately 8,376 executions per second. 2. **DOMPurify (Chrome 106)**: This test was also run on Chrome 106 and resulted in approximately 5,476 executions per second. These results indicate that the custom filtering function (`filterXSS`) is slightly faster than `DOMPurify` when sanitizing HTML content in this specific benchmark. However, it's essential to note that performance differences may vary depending on the specific use case and requirements. **Notes:** * The benchmark uses a document fragment to sanitize the HTML content, which can help reduce the number of DOM mutations and improve performance. * The `filterXSS` function is not implemented in this example, so its exact behavior and performance characteristics are unknown. * MeasureThat.net provides detailed metrics, such as executions per second, which can be used to compare the performance of different sanitization libraries or custom filtering functions. By examining these benchmark results, developers can gain insights into the performance characteristics of `DOMPurify` and custom filtering functions in JavaScript.
Related benchmarks:
test DomParser test 2
querySelector vs getElementsByClassName with more code
DOMPurify vs JSXSS
exec vs replace
Comments
Confirm delete:
Do you really want to delete benchmark?