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

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

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: 2 years ago by: Registered User

Jump 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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

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

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

Browser/OS: Chrome 93 on Windows

View result in a separate tab

Test name	Executions per second
[Unsafe] HTML string to text via creating an unattached DOM element.	12.0 Ops/sec
[Unsafe] HTML string to text via reusing an unattached DOM element.	13.2 Ops/sec
[Safe] HTML string to text via creating and using a DOMParser	12.2 Ops/sec
[Safe] HTML string to text via reusing a DOMParser	13.1 Ops/sec
[Safe] HTML string to text via the a new Document	16.0 Ops/sec
[Safe] HTML string to text via the a cached Document	24.7 Ops/sec
[Safe] HTML string to text via the DOMPurify library	3.3 Ops/sec

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

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

Created: 2 years ago by: Registered User

Jump to the latest 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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A