Benchmark: Escape HTML regex vs replace vs textNode vs Option 3

Tests:

Text node
const htmlStr = ` <div> <script></script> <input name="test" value="test" /> <img /> </div> `; const escapeElement = document.createElement('span'); const escapeTextNode = document.createTextNode(''); escapeElement.append(escapeTextNode); function escape(str) { escapeTextNode.textContent = str; return escapeElement.innerHTML; } let i = 0; for (; i < 10000; i++) { escape(htmlStr); }
Option node
const htmlStr = ` <div> <script></script> <input name="test" value="test" /> <img /> </div> `; const option = new Option(''); function escape(str) { option.label = str; return option.label; } let i = 0; for (; i < 10000; i++) { escape(htmlStr); }
Replace A
const htmlStr = ` <div> <script></script> <input name="test" value="test" /> <img /> </div> `; function escape(str) { const E = [ ['&', '&'], ['<', '<'], ['>', '>'], ["'", '''], ['"', '"'], ]; return (v) => E.reduce((r, e) => str.replaceAll(e[0], e[1]), v); } let i = 0; for (; i < 10000; i++) { escape(htmlStr); }
Replace B
const htmlStr = ` <div> <script></script> <input name="test" value="test" /> <img /> </div> `; function escape(str) { return str.replaceAll('&', '&') .replaceAll('<', '<') .replaceAll('>', '>') .replaceAll("'", ''') .replaceAll('"', '"'); return (v) => E.reduce((r, e) => str.replaceAll(e[0], e[1]), v); } let i = 0; for (; i < 10000; i++) { escape(htmlStr); }
Replace C
const htmlStr = ` <div> <script></script> <input name="test" value="test" /> <img /> </div> `; function escape(str) { return ('' + str).replace(/[^\w. ]/gi, c => '&#' + c.charCodeAt(0) + ';') } let i = 0; for (; i < 10000; i++) { escape(htmlStr); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Text node
Option node
Replace A
Replace B
Replace C

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/135.0.0.0 Safari/537.36 Edg/135.0.0.0

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
Text node	71.0 Ops/sec
Option node	115.9 Ops/sec
Replace A	10510.5 Ops/sec
Replace B	43.6 Ops/sec
Replace C	27.5 Ops/sec

Escape HTML regex vs replace vs textNode vs Option 3 (version: 0)

Comparing performance of: Text node vs Option node vs Replace A vs Replace B vs Replace C

Created: 2 years ago by: Guest

Jump to the latest result

Text node

Option node

Replace A

Replace B

Replace C

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A