Tweaks to rnocache

JavaScript performance comparison

Revision 7 of this test case created by Charles McNulty

Preparation code

<script src="https://code.jquery.com/jquery-1.7b1.js"></script>
<div>Original: <div id="source"><select id="test_select" name="test_select">
	<option label="1">0</option>
	<option label="1">1</option>
	<option label="2">2</option>
	<option label="3" selected="selected">3</option>
	<option label="4">4</option>
	<option label="1">5</option>
	<option label="2">6</option>
	<option label="3">7</option>
	<option label="4">8</option>
	<option label="1">9</option>
</select>
</div></div>
Following two selects should be identical:
<div>Unoptimized copy: <div id="destination"></div></div>
<div>Optimized copy:<div id="destination2"></div></div>
<script>
  (function($) {
  
  var rinlinejQuery = / jQuery\d+="(?:\d+|null)"/g,
  	rleadingWhitespace = /^\s+/,
  	rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,
  	rtagName = /<([\w:]+)/,
  	rtbody = /<tbody/i,
  	rhtml = /<|&#?\w+;/,
  	rnocache = /<(?:script|object|embed|option|style)/i,
  	// checked="checked" or checked
  	rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i,
  	rscriptType = /\/(java|ecma)script/i,
  	rcleanScript = /^\s*<!(?:\[CDATA\[|\-\-)/,
  	wrapMap = {
  		option: [ 1, "<select multiple='multiple'>", "</select>" ],
  		legend: [ 1, "<fieldset>", "</fieldset>" ],
  		thead: [ 1, "<table>", "</table>" ],
  		tr: [ 2, "<table><tbody>", "</tbody></table>" ],
  		td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],
  		col: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ],
  		area: [ 1, "<map>", "</map>" ],
  		_default: [ 0, "", "" ]
  	},
  	safeFragment = (function() {
  		var nodeNames = (
  			"abbr article aside audio canvas datalist details figcaption figure footer " +
  			"header hgroup mark meter nav output progress section summary time video"
  		).split( " " ),
  		safeFrag = document.createDocumentFragment();
  
  		if ( safeFrag.createElement ) {
  			while ( nodeNames.length ) {
  				safeFrag.createElement(
  					nodeNames.pop()
  				);
  			}
  		}
  		return safeFrag;
  	})();
  
  wrapMap.optgroup = wrapMap.option;
  wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
  wrapMap.th = wrapMap.td;
  
  // IE can't serialize <link> and <script> tags normally
  if ( !jQuery.support.htmlSerialize ) {
  	wrapMap._default = [ 1, "div<div>", "</div>" ];
  }
  
   $.fn.html2 = function(value) {
  
  		if ( value === undefined ) {
  			return this[0] && this[0].nodeType === 1 ?
  				this[0].innerHTML.replace(rinlinejQuery, "") :
  				null;
  
  		// See if we can take a shortcut and just use innerHTML
  		} else if ( typeof value === "string" && !rnocache.test( value ) &&
  			(jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) &&
  			!wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) {
  
  			value = value.replace(rxhtmlTag, "<$1></$2>");
  
  			try {
  				for ( var i = 0, l = this.length; i < l; i++ ) {
  					// Remove element nodes and prevent memory leaks
  					if ( this[i].nodeType === 1 ) {
  						jQuery.cleanData( this[i].getElementsByTagName("*") );
  						this[i].innerHTML = value;
  					}
  				}
  
  			// If using innerHTML throws an exception, use the fallback method
  			} catch(e) {
  				this.empty().append( value );
  			}
  
  		} else if ( jQuery.isFunction( value ) ) {
  			this.each(function(i){
  				var self = jQuery( this );
  
  				self.html( value.call(this, i, self.html()) );
  			});
  
  		} else {
  			this.empty().append( value );
  		}
  
  		return this;
  
   };
  })(jQuery);
  
  var template = $("#source").html();
</script>
    

Preparation code output

<div>Original: <div id="source"><select id="test_select" name="test_select"> <option label="1">0</option> <option label="1">1</option> <option label="2">2</option> <option label="3" selected="selected">3</option> <option label="4">4</option> <option label="1">5</option> <option label="2">6</option> <option label="3">7</option> <option label="4">8</option> <option label="1">9</option> </select> </div></div> Following two selects should be identical: <div>Unoptimized copy: <div id="destination"></div></div> <div>Optimized copy:<div id="destination2"></div></div>

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
using innerHTML optimized regex
$("#destination").html(template);
pending…
using standard nocache (no optimization)
$("#destination2").html2(template);
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

Original:
Following two selects should be identical:
Unoptimized copy:
Optimized copy: