Fast way to join a complex HTML string.

JavaScript performance comparison

Revision 6 of this test case created by 十年灯

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  var aString = 'My name is ${name},I\'m ${age}.My name is ${name},I\'m ${age}.My name is ${name},I\'m ${age}.My name is ${name},I\'m ${age}.My name is ${name},I\'m ${age}.My name is ${name},I\'m ${age}.'
  
  function mix(str, group) {
    return str.replace(/\$\{([^{}]+)\}/gm, function(m, n) {
      return (group[n] != undefined) ? group[n] : '';
    });
  }
  
  
  	function mix1 (str,group) {
  		return str.replace(/\$\{[^{}]+\}/gm,function (m,n) {
  			n = m.slice(2,-1);
  			return (group[n] != void 1) ? group[n] : '';
  		})
  	}
  
  function loopMix0(str, group) {
    var reg = /\$\{([^{}]+)\}/gm,
      res;
    while (res = reg.exec(str)) {
      str = str.substr(0, res.index) + ((group[res[1]] != undefined) ? group[res[1]] : '') + str.substr(res.index + res[0].length);
    }
    return str;
  }
  
  function loopMix1(str, group) {
    var reg = /\$\{([^{}]+)\}/gm,
      res, returnString = '',
      start = 0;
    while (res = reg.exec(str)) {
      returnString += str.substring(start, res.index) + ((group[res[1]] != undefined) ? group[res[1]] : '');
      start = res.index + res[0].length;
    }
    returnString += str.substr(start);
    return returnString;
  }
  
  function loopMix2(str, group) {
    var reg = /\$\{([^{}]+)\}/gm,
      res, returnString = '',
      start = 0;
    while (res = reg.exec(str)) {
      returnString += str.substring(0, res.index) + ((group[res[1]] != undefined) ? group[res[1]] : '');
      start = res.index + res[0].length;
      str = str.substr(start);
      // console.log(str)
      reg.lastIndex = 0;
    }
    returnString += str;
    return returnString;
  }
  
  
  	function loopMix2_1 (str,group) {
  		var reg = /\$\{[^{}]+\}/gm, res,returnString = '',start = 0,n;
  		while(res = reg.exec(str)) {	
  			n = res[0].slice(2,-1);		
  			returnString += str.substring(0,res.index)+((group[n] != undefined) ? group[n] : '');
  			start = res.index+res[0].length;
  			str = str.substr(start);
  			// console.log(str)
  			reg.lastIndex = 0;
  		}
  		returnString += str;
  		return returnString;
  	}
  
  function loopMix3 (str,group) {
  		var index=0,close=0,returnString = '';
  		while((index = str.indexOf('${',index)) !== -1) {	
  			returnString += str.substring(close,index);
  			close = str.indexOf('}',index);
  			var name = str.substring(index+2,close);
  			returnString += (group[name] != undefined) ? group[name] : ''
  			index = close;
  			close +=1;
  		}
  		returnString += str.substr(close);
  		return returnString;
  	}

};
</script>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
loopMix2_1,just loopMix2 but with no regexp's ()
loopMix2_1(aString, {
  name: 'LIX',
  age: 11
})
pending…
mix, use string's replace+RegExp
mix(aString, {
  name: 'LIX',
  age: 11
})
pending…
loopMix0,loop regexp 'exec'
loopMix0(aString, {
  name: 'LIX',
  age: 11
})
pending…
loopMix1
loopMix1(aString, {
  name: 'LIX',
  age: 11
})
pending…
loopMix2
loopMix2(aString, {
  name: 'LIX',
  age: 11
})
pending…
loopMix3,string's indexOf,no RegExp!
loopMix3(aString, {
  name: 'LIX',
  age: 11
})
pending…
mix1,also replace+regexp,but no regexp-group,substituted with 'slice'
mix1(aString, {
  name: 'LIX',
  age: 11
})
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.

0 Comments