Benchmark: Encode html without creating html elements

Encode html without creating html elements (version: 0)

There are two way of encoding html elements. One is the create an html element and let the browser handle it. The second looks at every character passed in and then runs a regex match on it and replaces the chars with &#CHAR_CODE;.

Comparing performance of: EncodeByCreatingElement vs EncodeUsingRegex

Created: 5 years ago by: Guest

Jump to the latest result

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js'></script>

Script Preparation code:


function EncodeByCreatingElement(value) {
  var element = angular.element('<div></div>');
  element.text(value); // not chainable, see #1044
  return element.html();
}

var regex = /[\u00A0-\u9999<>\&]/g;
function EncodeUsingRegex(value) {
  return value.replace(regex, ['&#', "$&".charCodeAt(0),';'].join(''));
}

function getRandomUnicodeChar() {
  return String.fromCharCode(0x30A0 + Math.random() * (0x30FF-0x30A0+1));
}

Tests:

EncodeByCreatingElement
EncodeByCreatingElement(getRandomUnicodeChar())
EncodeUsingRegex
EncodeUsingRegex(getRandomUnicodeChar())

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
EncodeByCreatingElement
EncodeUsingRegex

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 months ago)

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

Browser/OS: Chrome 121 on Windows

View result in a separate tab

Test name	Executions per second
EncodeByCreatingElement	663899.9 Ops/sec
EncodeUsingRegex	2028285.0 Ops/sec