Run results for: jQuery needs cached selectors.

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:79.0) Gecko/20100101 Firefox/79.0

Browser: Firefox 79

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: 4 years ago

HTML Preparation code:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<div id="testElement"></div>

Tests:

Bad
for(var i = 0; i < 1000; i++) { $('#testElement').append(''); if (i % 3 && i % 5) { $('#testElement').append(i); } else { if( i % 3 == 0 ) { $('#testElement').append('Fizz'); } if( i % 5 == 0 ) { $('#testElement').append('Buzz'); } if (i % 3 && i % 5) { $('#testElement').append(i); } } $('#testElement').append(''); }
Better
var body = $("#testElement"); for(var i = 0; i < 1000; i++) { body.append(''); if (i % 3 && i % 5) { body.append(i); } else { if( i % 3 == 0 ) { body.append('Fizz'); } if( i % 5 == 0 ) { body.append('Buzz'); } if (i % 3 && i % 5) { body.append(i); } } body.append(''); }
Best
var res = ""; for(var i = 0; i < 1000; i++) { res += ''; if (i % 3 && i % 5) { res += i; } else { if( i % 3 == 0 ) { res += 'Fizz'; } if( i % 5 == 0 ) { res += 'Buzz'; } if (i % 3 && i % 5) { res += i; } } res += ''; } var body = $("#testElement"); body.append(res);