jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
What is faster, generating elements on the fly using jQuery appends and generator or using javascript templates.
<script src="http://rawgithub.com/insin/DOMBuilder/master/dist/DOMBuilder.template.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- The Javascript template - using underscore.js -->
<script type="text/template" id="combo_template">
<select>
<% _.each(values, function(value) { %>
<option><%= value %></option>
<% }); %>
</select >
</script>
<div id="testcontainer" style="display: none;"></div>
<script>
$testContainer = $('#testContainer');
var values = ["SOMETHING", "THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS"];
var underscoreTemplate = $("#combo_template").html()
, domBuilderTemplate;
with (DOMBuilder.template) {
domBuilderTemplate = $template('selectTemplate'
, SELECT(
$for('value in values'
, OPTION('{{ value }}')
)
)
);
}
var dom = DOMBuilder.dom
, html = DOMBuilder.html;
</script>
$testContainer.empty();
Ready to run.
Test | Ops/sec | |
---|---|---|
Javascript Templates |
| ready |
jQuery Append |
| ready |
Stringed DOM |
| ready |
Array DOM |
| ready |
DOMBuilder Template (DOM) |
| ready |
DOMBuilder Template (HTML) |
| ready |
DOMBuilder DOM |
| ready |
DOMBuilder HTML |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.