Benchmark: Get text content from a HTML string [5]

Get text content from a HTML string [5] (version: 5) Benchmark.js

Check different ways of getting text content from a HTML string. Tests with unsafe and safe ways.

Comparing performance of: `[Unsafe] HTML string to text via creating an unattached DOM element. vs [Unsafe] HTML string to text via reusing an unattached DOM element. vs [Safe] HTML string to text via creating and using a DOMParser vs [Safe] HTML string to text via reusing a DOMParser vs [Safe] HTML string to text via the a new Document vs [Safe] HTML string to text via the a cached Document vs [Safe] HTML string to text via the DOMPurify library`

Created: 4 years ago by: Registered User

Go to the latest result

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.3/purify.min.js'></script>

Script Preparation code:

function getHtmlString() {
   return `
      <div><b>HELLO</b>W<span style="color:blue;">O</span>RLD!</div>
      <p>Below is a red dot!</p>
      <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
      <span>RANDOM! ${Math.random()}</span>
      <div>
         <div>
            <div>
               <div>
                  <div>
                     <div>
                        <p>Cupcake tiramisu tiramisu oat cake biscuit jelly. Biscuit pie jujubes chocolate macaroon chupa chups. Brownie sweet roll pudding icing jelly liquorice. Sugar plum powder chupa chups powder carrot cake pie ice cream topping macaroon. Marshmallow macaroon cookie tiramisu bear claw tiramisu sweet. Tootsie roll jelly-o lemon drops dessert lemon drops toffee chocolate. Jelly beans fruitcake chocolate bar marzipan candy canes cheesecake. Lollipop donut marzipan dragée croissant shortbread. Gingerbread chupa chups liquorice apple pie ice cream gingerbread bonbon. Sweet roll brownie fruitcake pudding pie caramels tart. Icing topping tart chocolate cake brownie marshmallow cookie icing. Tootsie roll lemon drops toffee macaroon gummies. Halvah cookie gummi bears ice cream croissant chocolate bar jelly beans bonbon.</p>
                        <p>Chupa chups powder liquorice bonbon cake. Tootsie roll tiramisu sweet roll apple pie gingerbread jelly beans marshmallow dessert powder. Chocolate bar dessert halvah carrot cake cake candy canes biscuit. Macaroon marzipan liquorice chocolate cake muffin sesame snaps shortbread gummi bears apple pie. Pudding jelly-o gummi bears lollipop cake. Chocolate cake tootsie roll wafer sesame snaps soufflé macaroon jelly-o macaroon caramels. Tart danish donut fruitcake icing chupa chups toffee biscuit. Sweet oat cake ice cream shortbread caramels pie gummies topping topping. Jelly cake chocolate bar pudding sweet roll cotton candy marshmallow. Tiramisu marshmallow danish sweet roll jujubes croissant halvah. Muffin ice cream liquorice cheesecake candy jelly tootsie roll caramels sesame snaps. Toffee marshmallow carrot cake cake muffin carrot cake tootsie roll gummies. Cupcake chocolate bar fruitcake cotton candy gummies caramels muffin. Apple pie marshmallow apple pie carrot cake croissant halvah tiramisu.</p>
                        <p>Macaroon sweet liquorice oat cake fruitcake jelly beans shortbread gummi bears. Halvah danish dragée dessert macaroon candy canes cake pie cookie. Croissant cupcake topping bonbon jelly beans sweet roll sugar plum jelly-o pie. Toffee pie pudding chupa chups tootsie roll. Cookie candy cookie gummies bear claw candy candy canes icing gummi bears. Chupa chups gingerbread sesame snaps candy cotton candy halvah fruitcake sesame snaps jelly beans. Cake pastry wafer pudding gummi bears jelly-o jelly tiramisu candy canes. Toffee dessert toffee gummi bears topping gummi bears croissant toffee. Marzipan ice cream icing pudding lemon drops cake gummi bears icing. Sesame snaps toffee gingerbread soufflé cotton candy liquorice cookie. Sweet roll candy canes icing gummies cake pudding gingerbread. Biscuit cake chocolate pudding lemon drops pastry. Fruitcake oat cake caramels gummies jelly beans chocolate.</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   `;
}

//[Unsafe] Image onload/onerror code will stll run
function toTextContentViaElement(htmlString) {
   const element = document.createElement("div");
   element.innerHTML = htmlString;
   return element.textContent;
}

//[Unsafe] Image onload/onerror code will stll run
const cachedElement = document.createElement("div");
function toTextContentViaElementWithCache(htmlString) {
   cachedElement.innerHTML = htmlString;
   const textContent =  cachedElement.textContent;
   cachedElement.textContent = "";
   return textContent;
}

function toTextContentViaParser(htmlString) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString, "text/html");
  return doc.body.textContent;
}

const cachedParser = new DOMParser();
function toTextContentViaParserWithCache(htmlString) {
  const doc = cachedParser.parseFromString(htmlString, "text/html");
  return doc.body.textContent;
}

function toTextContentViaNewDocument(htmlString) {
   const doc = document.implementation.createHTMLDocument();
   doc.body.innerHTML = htmlString;
   return doc.body.textContent;
}

const cachedDoc = document.implementation.createHTMLDocument();
function toTextContentViaNewDocumentWithCache(htmlString) {
   cachedDoc.body.innerHTML = htmlString;
   const textContent = cachedDoc.body.textContent;
   cachedDoc.body.textContent = htmlString;
   return textContent;
}



const domPurifyConfig = { RETURN_DOM: true };
function toTextContentViaDomPurify(htmlString) {
  return DOMPurify.sanitize(htmlString, domPurifyConfig).textContent;
}

window.tempStore = [];

Tests:

[Unsafe] HTML string to text via creating an unattached DOM element.
window.tempStore.length = 0; for(let i = 0; i < 1000; i++) { const textContent = toTextContentViaElement(getHtmlString()); window.tempStore.push(textContent); }
[Unsafe] HTML string to text via reusing an unattached DOM element.
window.tempStore.length = 0; for(let i = 0; i < 1000; i++) { const textContent = toTextContentViaElementWithCache(getHtmlString()); window.tempStore.push(textContent); }
[Safe] HTML string to text via creating and using a DOMParser
window.tempStore.length = 0; for(let i = 0; i < 1000; i++) { const textContent = toTextContentViaParser(getHtmlString()); window.tempStore.push(textContent); }
[Safe] HTML string to text via reusing a DOMParser
tempStore.length = 0; for(let i = 0; i < 1000; i++) { const textContent = toTextContentViaParserWithCache(getHtmlString()); tempStore.push(textContent); }
[Safe] HTML string to text via the a new Document
window.tempStore.length = 0; for(let i = 0; i < 1000; i++) { const textContent = toTextContentViaNewDocument(getHtmlString()); window.tempStore.push(textContent); }
[Safe] HTML string to text via the a cached Document
window.tempStore.length = 0; for(let i = 0; i < 1000; i++) { const textContent = toTextContentViaNewDocumentWithCache(getHtmlString()); window.tempStore.push(textContent); }
[Safe] HTML string to text via the DOMPurify library
window.tempStore.length = 0; for(let i = 0; i < 1000; i++) { const textContent = toTextContentViaDomPurify(getHtmlString()); window.tempStore.push(textContent); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
[Unsafe] HTML string to text via creating an unattached DOM element.
[Unsafe] HTML string to text via reusing an unattached DOM element.
[Safe] HTML string to text via creating and using a DOMParser
[Safe] HTML string to text via reusing a DOMParser
[Safe] HTML string to text via the a new Document
[Safe] HTML string to text via the a cached Document
[Safe] HTML string to text via the DOMPurify library

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 136 on Windows

View result in a separate tab

[Safe] HTML string to text via the a cached Document

64/s

[Unsafe] HTML string to text via reusing an unattached DOM element.

48/s

[Safe] HTML string to text via creating and using a DOMParser

48/s

[Safe] HTML string to text via reusing a DOMParser

47/s

[Safe] HTML string to text via the a new Document

46/s

[Unsafe] HTML string to text via creating an unattached DOM element.

46/s

[Safe] HTML string to text via the DOMPurify library

12/s

View exact numbers

Test name	Executions per second
✓ [Safe] HTML string to text via the a cached Document	64 Ops/sec
[Unsafe] HTML string to text via reusing an unattached DOM element.	48 Ops/sec
[Safe] HTML string to text via creating and using a DOMParser	48 Ops/sec
[Safe] HTML string to text via reusing a DOMParser	47 Ops/sec
[Safe] HTML string to text via the a new Document	46 Ops/sec
[Unsafe] HTML string to text via creating an unattached DOM element.	46 Ops/sec
[Safe] HTML string to text via the DOMPurify library	12 Ops/sec

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

LLMs can make mistakes. Check important info.

It looks like you're providing benchmark results from a test suite that measures the performance of different approaches for converting HTML strings to text.

To summarize the results, here are some key takeaways:

1. **[Safe] HTML string to text via cached Document**: This approach is quite fast, with an average execution rate of 24.65 executions per second.
2. **[Safe] HTML string to text via new Document**: This approach is slower than the first one, with an average execution rate of 15.96 seconds.
3. **[Unsafe] HTML string to text via reusing an unattached DOM element**: This approach is significantly slower than the safe approaches, with an average execution rate of 13.20 seconds.
4. **[Safe] HTML string to text via DOMPurify library**: This approach is relatively fast, with an average execution rate of 3.35 seconds.

Some observations:

* The safe approaches using cached or reused Document/Parser objects are generally faster than the unsafe approaches.
* The DOMPurify library approach is slower than the cached Document approach but still quite fast overall.
* There's a significant performance difference between the new Document approach and the other two options, which may be due to the overhead of creating a new document and parsing it.

Please let me know if you'd like me to highlight any specific aspects or provide further analysis!