pure · December 12, 2009 21:57
diff --git a/PURE_benchmark.html b/PURE_benchmark.html
 <!DOCTYPE HTML>
 <html lang="en">
 <head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>JS Template Benchmarks: Underscore</title>
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen" charset="utf-8" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="jquery.benchmark.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://github.com/pure/pure/raw/master/libs/pure.js"></script>
 </head>
 <body>

 <div id="report">

    <h1>JS Template Benchmarks: PURE</h1>
 	<input id="loops" type="text" value="1000">
 	<a href="javascript:void(0)" onclick="$.benchmark(parseInt(document.getElementById('loops').value,10), '#simple_test', $.benchmarks.test_simple)">simple</a>  
 	<a href="javascript:void(0)" onclick="$.benchmark(parseInt(document.getElementById('loops').value,10), '#loop_test', $.benchmarks.loop_test)">loop</a>  
 	<a href="javascript:void(0)" onclick="$.benchmark(parseInt(document.getElementById('loops').value,10), '#compiled_test', $.benchmarks.compiled_test)">compiled</a>  
 	<a href="javascript:void(0)" onclick="document.getElementById('output').innerHTML = ''">Reset</a>
    
    <div id="results">
      <ul>
        <li>Simple Test: <span class="stat" id="simple_test"></span></li>
        <li>Loop Test: <span class="stat" id="loop_test"></span></li>
        <li>Compiled Test: <span class="stat" id="compiled_test"></span></li>
      </ul>
    </div>
  </div>

    <div class="test">
      <h2>This is a test of </h2>
      <p>The homepage is <a href="#"></a>.</p>
      <p class="source">The sources is: </p>
    </div>

    <div class="loop">
      <h3 class="header"></h3>
      <ul class="comment">
        <li class="comment">
          <h5 class="name"></h5>
          <p class="body"></p>
        </li>
      </ul>
    </div>

  <div id="output"></div>
  
 	<script type="text/javascript">
   $(document).ready(function(){
     var output_div = $('#output'), test = $p('div.test'), loop = $p('div.loop');
     $.benchmarks = {};
     
 		$.benchmarks.test_simple = function(){
 			var info_tmpl = test.compile({
 				'h2+':'name',
 				'a':'url',
 				'a@href':'url',
 				'p.source':'source'
 			});
 			output_div.append(info_tmpl({
 				name: 'Underscore', 
 				url: 'http://documentcloud.github.com/underscore/',
 				source: 'http://documentcloud.github.com/underscore/underscore.js'
 			}));
 		};
     
     $.benchmarks.loop_test = function(){
       var comment_tmp = loop.compile(	{
 				'h3':'header',
 				'li':{
 					'comment<-comments':{
 						'h5':'comment.name',
 						'p':'comment.body'
 					}
 				}
 			});
       
       var comment_view = {
         header: "My Post Comments",
         comments: [
         {name: "Joe", body: "Thanks for this post!"},
         {name: "Sam", body: "Thanks for this post!"},
         {name: "Heather", body: "Thanks for this post!"},
         {name: "Kathy", body: "Thanks for this post!"},
         {name: "George", body: "Thanks for this post!"},
         {name: "Joe", body: "Thanks for this post!"},
         {name: "Sam", body: "Thanks for this post!"},
         {name: "Heather", body: "Thanks for this post!"},
         {name: "Kathy", body: "Thanks for this post!"},
         {name: "George", body: "Thanks for this post!"},
         {name: "Joe", body: "Thanks for this post!"},
         {name: "Sam", body: "Thanks for this post!"},
         {name: "Heather", body: "Thanks for this post!"},
         {name: "Kathy", body: "Thanks for this post!"},
         {name: "Joe", body: "Thanks for this post!"},
         {name: "Sam", body: "Thanks for this post!"},
         {name: "Heather", body: "Thanks for this post!"},
         {name: "Kathy", body: "Thanks for this post!"},
         {name: "George", body: "Thanks for this post!"},
         {name: "Joe", body: "Thanks for this post!"},
         {name: "Sam", body: "Thanks for this post!"},
         {name: "Heather", body: "Thanks for this post!"},
         {name: "Kathy", body: "Thanks for this post!"},
         {name: "George", body: "Thanks for this post!"},
         {name: "Joe", body: "Thanks for this post!"},
         {name: "Sam", body: "Thanks for this post!"},
         {name: "Heather", body: "Thanks for this post!"},
         {name: "Kathy", body: "Thanks for this post!"},
         {name: "George", body: "Thanks for this post!"}
         ]
       };
       output_div.append(comment_tmp(comment_view));
     };
     
 	var compiled_tmpl = test.compile({
 			'h2+':'name',
 			'a':'url',
 			'a@href':'url',
 			'p.source':'source'
 		});
     
     $.benchmarks.compiled_test = function(){
       output_div.append(compiled_tmpl({
 				name: 'Underscore', 
 				url: 'http://documentcloud.github.com/underscore/',
 				source: 'http://documentcloud.github.com/underscore/underscore.js'
       }));
     };
 	});
 	</script>
 </body>
 </html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>JS Template Benchmarks: Underscore</title>
	<link rel="stylesheet" href="styles.css" type="text/css" media="screen" charset="utf-8" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
	<script src="jquery.benchmark.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://github.com/pure/pure/raw/master/libs/pure.js"></script>
	</head>
	<body>

	<div id="report">

	<h1>JS Template Benchmarks: PURE</h1>
	<input id="loops" type="text" value="1000">
	<a href="javascript:void(0)" onclick="$.benchmark(parseInt(document.getElementById('loops').value,10), '#simple_test', $.benchmarks.test_simple)">simple</a>
	<a href="javascript:void(0)" onclick="$.benchmark(parseInt(document.getElementById('loops').value,10), '#loop_test', $.benchmarks.loop_test)">loop</a>
	<a href="javascript:void(0)" onclick="$.benchmark(parseInt(document.getElementById('loops').value,10), '#compiled_test', $.benchmarks.compiled_test)">compiled</a>
	<a href="javascript:void(0)" onclick="document.getElementById('output').innerHTML = ''">Reset</a>

	<div id="results">
	<ul>
	<li>Simple Test: <span class="stat" id="simple_test"></span></li>
	<li>Loop Test: <span class="stat" id="loop_test"></span></li>
	<li>Compiled Test: <span class="stat" id="compiled_test"></span></li>
	</ul>
	</div>
	</div>

	<div class="test">
	<h2>This is a test of </h2>
	<p>The homepage is <a href="#"></a>.</p>
	<p class="source">The sources is: </p>
	</div>

	<div class="loop">
	<h3 class="header"></h3>
	<ul class="comment">
	<li class="comment">
	<h5 class="name"></h5>
	<p class="body"></p>
	</li>
	</ul>
	</div>

	<div id="output"></div>

	<script type="text/javascript">
	$(document).ready(function(){
	var output_div = $('#output'), test = $p('div.test'), loop = $p('div.loop');
	$.benchmarks = {};

	$.benchmarks.test_simple = function(){
	var info_tmpl = test.compile({
	'h2+':'name',
	'a':'url',
	'a@href':'url',
	'p.source':'source'
	});
	output_div.append(info_tmpl({
	name: 'Underscore',
	url: 'http://documentcloud.github.com/underscore/',
	source: 'http://documentcloud.github.com/underscore/underscore.js'
	}));
	};

	$.benchmarks.loop_test = function(){
	var comment_tmp = loop.compile( {
	'h3':'header',
	'li':{
	'comment<-comments':{
	'h5':'comment.name',
	'p':'comment.body'
	}
	}
	});

	var comment_view = {
	header: "My Post Comments",
	comments: [
	{name: "Joe", body: "Thanks for this post!"},
	{name: "Sam", body: "Thanks for this post!"},
	{name: "Heather", body: "Thanks for this post!"},
	{name: "Kathy", body: "Thanks for this post!"},
	{name: "George", body: "Thanks for this post!"},
	{name: "Joe", body: "Thanks for this post!"},
	{name: "Sam", body: "Thanks for this post!"},
	{name: "Heather", body: "Thanks for this post!"},
	{name: "Kathy", body: "Thanks for this post!"},
	{name: "George", body: "Thanks for this post!"},
	{name: "Joe", body: "Thanks for this post!"},
	{name: "Sam", body: "Thanks for this post!"},
	{name: "Heather", body: "Thanks for this post!"},
	{name: "Kathy", body: "Thanks for this post!"},
	{name: "Joe", body: "Thanks for this post!"},
	{name: "Sam", body: "Thanks for this post!"},
	{name: "Heather", body: "Thanks for this post!"},
	{name: "Kathy", body: "Thanks for this post!"},
	{name: "George", body: "Thanks for this post!"},
	{name: "Joe", body: "Thanks for this post!"},
	{name: "Sam", body: "Thanks for this post!"},
	{name: "Heather", body: "Thanks for this post!"},
	{name: "Kathy", body: "Thanks for this post!"},
	{name: "George", body: "Thanks for this post!"},
	{name: "Joe", body: "Thanks for this post!"},
	{name: "Sam", body: "Thanks for this post!"},
	{name: "Heather", body: "Thanks for this post!"},
	{name: "Kathy", body: "Thanks for this post!"},
	{name: "George", body: "Thanks for this post!"}
	]
	};
	output_div.append(comment_tmp(comment_view));
	};

	var compiled_tmpl = test.compile({
	'h2+':'name',
	'a':'url',
	'a@href':'url',
	'p.source':'source'
	});

	$.benchmarks.compiled_test = function(){
	output_div.append(compiled_tmpl({
	name: 'Underscore',
	url: 'http://documentcloud.github.com/underscore/',
	source: 'http://documentcloud.github.com/underscore/underscore.js'
	}));
	};
	});
	</script>
	</body>
	</html>