HTML escape foo

JavaScript performance comparison

Revision 2 of this test case created by Rei-chan

Info

Evolution of HTML escape code.

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    var html_escape_table = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    };
   
    function html_escape_1(html) {
      return html.replace(/[&<>"']/g, function(m) {
        return html_escape_table[m[0]];
      });
    };
   
    function html_escape_2(html) {
      return html.replace(/[&<>"']/g, function(m) {
        return html_escape_table[m];
      });
    };
   
    function html_escape_3(html) {
      return html.replace(/[&<>"']/g, function(m) {
        switch (m) {
        case '&':
          return '&amp;';
        case '<':
          return '&lt;';
        case '>':
          return '&gt;';
        case '"':
          return '&quot;';
        case "'":
          return '&#39;';
        }
      });
    }
   
    var regex_3a = /[&<>"']/g;
   
    function replacer_3a(m) {
      switch (m) {
      case '&':
        return '&amp;';
      case '<':
        return '&lt;';
      case '>':
        return '&gt;';
      case '"':
        return '&quot;';
      case "'":
        return '&#39;';
      }
    }
   
    function html_escape_3a(html) {
      return html.replace(regex_3a, replacer_3a);
    }
   
    function html_escape_3b(html) {
      return html.replace(/&|<|>|"|'/g, function(m) {
        switch (m) {
        case '&':
          return '&amp;';
        case '<':
          return '&lt;';
        case '>':
          return '&gt;';
        case '"':
          return '&quot;';
        case "'":
          return '&#39;';
        }
      });
    }
   
    // Taken from www.google.com, length = 15380
    var _text = '<!doctype html><html itemscope="itemscope" itemtype="http://schema.org/WebPage"><head><meta content="Search the world\'s information, including webpages, images, videos and more. Google has many special features to help you find exactly what you\'re looking for." name="description"><meta content="noodp" name="robots"><meta itemprop="image" content="/images/google_favicon_128.png"><meta id="mref" name="referrer" content="origin"><title>Google</title><script>(function(){g?"&oggv="+d(g):"","&ogd=",d("com"),"&ogl=",d("en"),"&ogus=",Lb()];if(b){"ogw"in b&&(c.push("&ogw="+b.ogw),delete b.ogw);var l;g=b;f=[];for(l in g)0!=f.length&&f.push(","),f.push(Nb(l)),f.push("."),f.push(Nb(g[l]));l=f.join("");""!=l&&(c.push("&ogad="),c.push(d(l)))}w(c.join(""))}}function Nb(a){"number"==typeof a&&(a+="");return"string"==typeof a?a.replace(".","%2E").replace(",","%2C"):a}v=Mb;r("il",v,x);var Ob={};y.il=Ob;var Pb=function(a,b,c,d,g,f,m,l,p,t){D(function(){n.paa(a,b,c,d,g,f,m,l,p,t)})},Qb=function(){D(function(){n.prm()})},Rb=function(a){D(function(){n.spn(a)})},Sb=function(a){D(function(){n.sps(a)})},Tb=function(a){D(function(){n.spp(a)})},Ub={"27":"//lh4.googleusercontent.com/-bfi3qmEPAyw/AAAAAAAAAAI/AAAAAAAAAAA/7ypJGn3R6aE/s27-c/photo.jpg","27":"//lh4.googleusercontent.com/-bfi3qmEPAyw/AAAAAAAAAAI/AAAAAAAAAAA/7ypJGn3R6aE/s27-c/photo.jpg","27":"//lh4.googleusercontent.com/-bfi3qmEPAyw/AAAAAAAAAAI/AAAAAAAAAAA/7ypJGn3R6aE/s27-c/photo.jpg"},Vb=function(a){return(a=Ub[a])||"//lh4.googleusercontent.com/-bfi3qmEPAyw/AAAAAAAAAAI/AAAAAAAAAAA/7ypJGn3R6aE/s27-c/photo.jpg"},a.test(c)&&google.https()?(google.ml(Error("GLMM"),!1,{src:c}),delete f[e]):(d.src=c,google.li=e+1)},lc:[],li:0,j:{en:1,b:!!location.hash&&!!location.hash.match("[#&]((q|fp)=|tbs=simg|tbs=sbi)"),bv:21,cf:"",pm:"p",u:"98fe0ef8"},Toolbelt:{},y:{},x:function(a,b){google.y[a.id]=[a,b];return!1},load:function(a,b){google.x({id:a+k++},function(){google.load(a,b)})}};var k=0;window.onpopstate=function(){google.j.psc=1};window.gbar&&gbar.pw&&gbar.pw.su&&gbar.pw.su(true);</script> </head><body class="hp" onload="try{if(!google.j.b){document.f&amp;&amp;document.f.q.focus();document.gbqf&amp;&amp;document.gbqf.q.focus();}}catch(e){}if(document.images)new Image().src=\'/images/nav_logo123.png\'" alink="#dd4b39" bgcolor="#fff" id="gsr" link="#12c" text="#222" vlink="#61c"><div id="pocs" style="display:none;position:absolute"><div id="pocs0"><span><span>Google</span> Instant is unavailable. Press Enter to search.</span>&nbsp;<a href="/support/websearch/bin/answer.py?answer=186645&amp;form=bb&amp;hl=en">Learn more</a></div><div id="pocs1"><span>Google</span> Instant is off due to connection speed. Press Enter to search.</div><div id="pocs2">Press Enter to search.</div></div><div id="cst"><div style="display:none">&nbsp;</div></div> <a href="/setprefs?prev=https://www.google.com/&amp;sig=0_MpHK4ZhAeXB_sf1ytbHnYxrTacw%3D&amp;suggon=2" style="left:-1000em;position:absolute">Screen reader users, click here to turn off Google Instant.</a>  <textarea name="csi" id="csi" style="display:none"></textarea><script>if(google.j.b)document.body.style.visibility=\'hidden\';</script><div id="mngb"><div id=gb><script>window.gbar&&gbar.eli&&gbar.eli()</script><div id=gbw><div id=gbzw><div id=gbz><span class=gbtcb></span><ol id=gbzc class=gbtc><li class=gbt><a onclick=gbar.logger.il(1,{t:119}); class=gbzt id=gb_119 href="https://plus.google.com/u/0/?tab=wX"><span class=gbtb2></span><span class=gbts>+Rei</span></a></li><li class=gbt><a onclick=gbar.logger.il(1,{t:1}); class="gbzt gbz0l gbp1" id=gb_1 href="https://www.google.com/webhp?hl=en&tab=ww"><span class=gbtb2></span><span class=gbts>Search</span></a></li><li class=gbt><a onclick=gbar.qs(this);gbar.logger.il(1,{t:2}); class=gbzt id=gb_2 href="https://www.google.com/imghp?hl=en&tab=wi"><span class=gbtb2></span><span class=gbts>Images</span></a></li><li class=gbt><a onclick=gbar.qs(this);gbar.logger.il(1,{t:8}); class=gbzt id=gb_8 href="https://maps.google.com/maps?hl=en&tab=wl"><span class=gbtb2></span><span class=gbts>Maps</span></a></li><li class=gbt><a onclick=gbar.logger.il(1,{t:78}); class=gbzt id=gb_78 href="https://play.google.com/?hl=en&tab=w8"><span class=gbtb2></span><span class=gbts>Play</span></a></li><li class=gbt><a onclick=gbar.qs(this);gbar.logger.il(1,{t:36}); class=gbzt id=gb_36 href="https://www.youtube.com/?tab=w1"><span class=gbtb2></span><span class=gbts>YouTube</span></a></li><li class=gbt><a onclick=gbar.logger.il(1,{t:5}); class=gbzt id=gb_5 href="https://news.google.com/nwshp?hl=en&tab=wn"><span class=gbtb2></span><span class=gbts>News</span></a></li><li class=gbt><a onclick=gbar.logger.il(1,{t:23}); class=gbzt id=gb_23 href="https://mail.google.com/mail/?tab=wm"><span class=gbtb2></span><span class=gbts>Gmail</span></a></li><li class=gbt><a onclick=gbar.logger.il(1,{t:25}); class=gbzt id=gb_25 href="https://drive.google.com/?tab=wo&authuser=0"><span class=gbtb2></span><span class=gbts>Drive</span></a></li><li class=gbt><a onclick=gbar.logger.il(1,{t:24}); class=gbzt id=gb_24 href="https://www.google.com/calendar?tab=wc"><span class=gbtb2></span><span class=gbts>Calendar</span></a></li><li class=gbt><a class=gbgt id=gbztm href="http://www.google.com/intl/en/options/" onclick="gbar.tg(event,this)" aria-haspopup=true aria-owns=gbd><span class=gbtb2></span><span id=gbztms class="gbts gbtsa"><span id=gbztms1>More</span><span class=gbma></span></span></a><div class=gbm id=gbd aria-owner=gbztm><div id=gbmmb class="gbmc gbsb gbsbis"><ol id=gbmm class="gbmcc gbsbic"><li class=gbmtc><a onclick=gbar.qs(this);gbar.logger.il(1,{t:51}); class=gbmt id=gb_51 href="https://translate.google.com/?hl=en&tab=wT">Translate</a></li><li class=gbmtc><a onclick=gbar.logger.il(1,{t:17}); class=gbmt id=gb_17 href="http://www.google.com/mobile/?hl=en&tab=wD">Mobile</a></li><li class=gbmtc><a onclick=gbar.qs(this);gbar.logger.il(1,{t:10}); class=gbmt id=gb_10 href="http://books.google.com/bkshp?hl=en&tab=wp">Books</a></li><li class=gbmtc><a onclick=gbar.logger.il(1,{t:172}); class=gbmt id=gb_172 href="https://www.google.com/offers?utm_source=xsell&utm_medium=products&utm_campaign=sandbar&hl=en&tab=wG">Offers</a></li><li class=gbmtc><a onclick=gbar.logger.il(1,{t:212}); class=gbmt id=gb_212 href="https://wallet.google.com/manage/?tab=wa">Wallet</a></li><li class=gbmtc><a onclick=gbar.qs(this);gbar.logger.il(1,{t:6}); class=gbmt id=gb_6 href="http://www.google.com/shopping?hl=en&tab=wf">Shopping</a></li><li class=gbmtc><a onclick=gbar.logger.il(1,{t:30}); class=gbmt id=gb_30 href="https://www.blogger.com/?tab=wj">Blogger</a></li><li class=gbmtc><a onclick=gbar.qs(this);gbar.logger.il(1,{t:27}); class=gbmt id=gb_27 href="https://www.google.com/finance?tab=we">Finance</a></li><li class=gbmtc><a onclick=gbar.qs(this);gbar.logger.il(1,{t:31}); class=gbmt id=gb_31 href="https://plus.google.com/u/0/photos?tab=wq">Photos</a></li><li class=gbmtc><a onclick=gbar.qs(this);gbar.logger.il(1,{t:12}); class=gbmt id=gb_12 href="http://video.google.com/?hl=en&tab=wv">Videos</a></li><li class=gbmtc><div class="gbmt gbmh"></div></li><li class=gbmtc><a onclick=gbar.logger.il(1,{t:66}); href="http://www.google.com/intl/en/options/" class=gbmt>Even more</a></li></ol><div class=gbsbt></div><div class=gbsbb></div></div></div></li></ol></div></div><div id=gbq><div id=gbq1 class="gbt gbqfh"><a class=gbqla href="/webhp?hl=en&tab=ww" onclick="gbar.logger.il(39)" title="Go to Google Home"><table id=gbqlt><tr><td id=gbqlw class=gbgt><span id=gbql></span></td></tr></table><div class=gbqlca></div></a></div><div id=gbq2 class="gbt gbqfh"><div id=gbqfw ><form id=gbqf name=gbqf method=get action="/search" onsubmit="gbar.logger.il(31);"><fieldset class=gbxx><legend class=gbxx>Hidden fields</legend><div id=gbqffd><input type=hidden name="output" value="search"><input type=hidden name="sclient" value="psy-ab"></div></fieldset><fieldset class=gbqff id=gbqff><legend class=gbxx></legend><div id=gbfwa class="gbqfwa "><div id=gbqfqw class=gbqfqw><div id=gbqfqwb class=gbqfqwc><input id=gbqfq class=gbqfif name=q type=text autocomplete=off value="" ></div></div></div></fieldset><div id=gbqfbw><button id=gbqfb aria-label="Google Search" class=gbqfb name=btnG><span class=gbqfi></span></button></div><div id=gbqfbwa class=jsb><button id=gbqfba aria-label="Google Search" name=btnK class=gbqfba><span id=gbqfsa>Google Search</span></button><button id=gbqfbb aria-label="I\'m Feeling Lucky" name=btnI class="gbqfba" onclick="google.x(this,function() {google.ifl && google.ifl.o();})"><span id=gbqfsb>I\'m Feeling Lucky</span></button></div></form></div></div></div><div id=gbu><div id=gbvg class=gbvg><h2 class=gbxx>Account Options</h2><span class=gbtcb></span><ol class="gbtc gbsr"><li class=gbt><a class=gbgt id=gbg6 href="https://plus.google.com/u/0/me?tab=wX" onclick="gbar.tg(event,document.getElementById(\'gbg4\'))" tabindex=-1 aria-haspopup=true aria-owns=gbd4><span id=gbi4t>Rei Ayanami</span></a></li><li class="gbt gbtn"><a class="gbgt gbgtd" id=gbg1 href="https://plus.google.com/u/0/notifications/all?hl=en" title="Notifications" onclick="gbar.tg(event,this)" aria-haspopup=true aria-owns=gbd1><span id=gbgs1 class=gbg1t><span id=gbi1a class=gbid></span><span id=gbi1 class=gbids>&nbsp;</span></span><span class=gbmab></span><span class=gbmac></span></a><div id=gbd1 class="gbm gbmsgo" aria-owner=gbg1><div class=gbmc></div><div class=gbmsg></div></div></li><li class="gbt gbtsb"><a class=gbgt id=gbg3 href="https://plus.google.com/u/0/stream/all?hl=en" onclick="gbar.tg(event,this)" aria-haspopup=true aria-owns=gbd3><div id=gbgs3><span class=gbmab></span><span class=gbmac></span><span id=gbgsi></span><span id=gbgss>&nbsp;</span><span id=gbi3>Share</span><span id=gbgsa></span></div></a><div class="gbm gbmsgo" id=gbd3 aria-owner=gbg3><div class=gbmc></div><div class=gbmsg></div></div></li><li class=gbt guidedhelpid=gbacsw><a class="gbgt gbg4p" id=gbg4 href="https://plus.google.com/u/0/me?tab=wX" onclick="gbar.tg(event,this)" aria-haspopup=true aria-owns=gbd4><span id=gbgs4><img id=gbi4i width=27 height=27 onerror="window.gbar&&gbar.pge?gbar.pge():this.loadError=1;" src="//lh4.googleusercontent.com/-bfi3qmEPAyw/AAAAAAAAAAI/AAAAAAAAAAA/7ypJGn3R6aE/s27-c/photo.jpg" alt="Rei Ayanami"><img id=gbi4ip style=display:none><span id=gbi4id style="display:none"></span><span class=gbmai></span><span class=gbmab></span><span class=gbmac></span></span></a><div class=gbm id=gbd4 aria-owner=gbg4 guidedhelpid=gbd4><div class=gbmc><div id=gbmpdv><div id=gbmpiw><a class="gbmpiaa gbp1" onclick="gbar.logger.il(10,{t:146})" href="https://plus.google.com/u/0/me?tab=wX"><span id=gbmpid style="display:none"></span><img id=gbmpi width=96 height=96 onerror="window.gbar&&gbar.ppe?gbar.ppe():this.loadError=1;" src="//lh4.googleusercontent.com/-bfi3qmEPAyw/AAAAAAAAAAI/AAAAAAAAAAA/7ypJGn3R6aE/s27-c/photo.jpg" alt="Rei Ayanami"></a><span id=gbmpicb><span class=gbxv>Change photo</span></span><a href="https://plus.google.com/u/0/me?tab=wX" id=gbmpicp onclick="gbar.i.e(event)">Change photo</a></div><div class=gbpc><span id=gbmpn class=gbps onclick="gbar.logger.il(10,{t:69})">Rei Ayanami</span><span class=gbps2>mvasilkov@gmail.com</span><div class=gbmlbw><a id=gb_156 onclick="gbar.logger.il(10,{t:156})" href="https://www.google.com/settings?ref=home" class=gbmlb>Account</a>&ndash;<a onclick="gbar.logger.il(10,{t:156})" href="https://www.google.com/settings/privacy?tab=4" class=gbmlb>Privacy</a></div><a role=button id=gbmplp onclick="gbar.logger.il(10,{t:146})" href="https://plus.google.com/u/0/me?tab=wX" class="gbqfb gbiba gbp1">View profile</a></div></div><div id=gbmps><div id=gbmpasb class=\'gbsb gbsbis\'><div id=gbmpas class=gbsbic><div id=gbmpm_0 class="gbmtc gbp0"><a id=gbmpm_0_l href="https://www.google.com/webhp?authuser=0" class=gbmt><span class="gbmpiaw gbxv"><img class=gbmpia width=48 height=48 onerror="window.gbar&&gbar.pae?gbar.pae(this):this.loadError=1;" data-asrc="//lh4.googleusercontent.com/-bfi3qmEPAyw/AAAAAAAAAAI/AAAAAAAAAAA/7ypJGn3R6aE/s48-c/photo.jpg" alt="Rei Ayanami"></span><span class=gbmpnw><span class=gbps>Rei Ayanami</span><span class=gbps2>mvasilkov@gmail.com</span></span></a></div></div><div class=gbsbt></div><div class=gbsbb></div></div><div id=gbmppc class="gbxx gbmtc"><a class=gbmt href="https://plus.google.com/u/0/dashboard"><span class=gbmppci></span>All your Google+ pages &rsaquo;</a></div></div><table id=gbmpal><tr><td class=gbmpala><a role=button href="https://accounts.google.com/AddSession?hl=en&continue=https://www.google.com/" class=gbqfbb>Add account</a></td><td class=gbmpalb><a target=_top role=button id=gb_71 onclick="gbar.logger.il(9,{l:\'o\'})" href="https://accounts.google.com/Logout?hl=en&continue=https://www.google.com/" class=gbqfbb>Sign out</a></td></tr></table></div></div></li><noscript><li class=gbt><a id=gbg7 href="https://accounts.google.com/Logout?hl=en&continue=https://www.google.com/" class=gbgt><span class=gbgs><span class=gbit>Sign out</span></span></a></li></noscript><div style="display:none"><div class=gbm id=gbd5 aria-owner=gbg5><div class=gbmc><ol id=gbom class=gbmcc><li class="gbkc gbmtc"><a  class=gbmt href="/preferences?hl=en">Search settings</a></li><li class=gbmtc><div class="gbmt gbmh"></div></li><li class="gbe gbmtc"><a  id=gmlas class=gbmt href="/advanced_search?hl=en">Advanced search</a></li><li class="gbe gbmtc"><a  class=gbmt href="/language_tools?hl=en">Language tools</a></li><li class=gbmtc><div class="gbmt gbmh"></div></li><li class="gbkp gbmtc"><a class=gbmt href="https://www.google.com/history/?hl=en">Web History</a></li></ol></div></div></div></ol><div id=gbdw></div></div></div></div><div id=gbx1 class="gbqfh"></div><div id=gbx3></div><div id=gbbw><div id=gbb></div></div><script>window.gbar&&gbar.elp&&gbar.elp()</script></div><div data-ved="0CAQQnRs" id="iflved" style="display:none"></div></div><textarea name="wgjc" id="wgjc" style="display:none"></textarea><textarea name="wgjs" id="wgjs" style="display:none"></textarea><textarea name="wgju" id="wgju" style="display:none"></textarea><textarea name="hcache" id="hcache" style="display:none"></textarea><div id="main"><span class="ctr-p" id="body"><center><div id="lga" style="height:231px;margin-top:-22px"><img alt="Google" height="95" src="/images/srpr/logo4w.png" width="275" id="hplogo" onload="window.lol&&lol()" style="padding-top:112px"></div><div style="height:102px"></div><div id="prm-pt" style="font-size:83%;min-height:3.5em"><br><script>window.gbar&&gbar.up&&gbar.up.tp&&gbar.up.tp();</script></div></center></span><div class="ctr-p" id="footer"><div><div id="ftby"><div id="fll"><div id="flls"><a href="/intl/en/ads/">Advertising&nbsp;Programs</a>‎<a href="/services/">Business Solutions</a>‎<a href="/intl/en/policies/">Privacy & Terms</a>‎</div><div id="flrs"><a href="https://plus.google.com/116899029375914044550" rel="publisher">+Google</a>‎<a href="/intl/en/about.html">About Google</a>‎<a href="https://www.google.com/setprefdomain?prefdom=IL&amp;prev=https://www.google.co.il/&amp;sig=0_ybp6s_dOvV6_W4BjV95Tdp-GcOc%3D">Google.co.il</a>‎</div></div><div id="flci"></div></div></div></div></div><script>(function(){var _co=\'[\x22body\x22,\x22footer\x22,\x22xjsi\x22]\';var _mstr=\'\x3cspan class\x3dctr-p id\x3dbody\x3e\x3c/span\x3e\x3cspan class\x3dctr-p id\x3dfooter\x3e\x3c/span\x3e\x3cspan id\x3dxjsi\x3e\x3c/span\x3e\';function _gjp(){!(location.hash && _gjuc())&& setTimeout(_gjp,500);}';
};
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Original code
window._result = html_escape_1(_text).length;
pending…
Remove array access
window._result = html_escape_2(_text).length;
pending…
Rewrite with no array
window._result = html_escape_3(_text).length;
pending…
Named function
window._result = html_escape_3a(_text).length;
pending…
Rewrite regex
window._result = html_escape_3b(_text).length;
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

1 comment

fereshteh commented :

123

Add a comment