Frontend performance - podstawy


meet.js 11.04.2014




<a href="mailto:damian@wikia-inc.com">Damian kvas Jóźwiak</a>

Deck: http://kvas-damian.github.io/frontend-perf/

FizzBuzz

Live coding

Keep fingers crossed! :)

CodeShare.io

Scripts in the HEAD

Scripts at the bottom of body

Selectors caching

Number of DOM operations

Ok, so where are numbers?


jsPerf

Results

Modulo operations?

Not so fast...
jsPerf

Results

Questions?

Links

Thanks!

Wikia is hiring

www.wikia.com/Careers

Want more?

String concatenation

jsPerf

Results

jQuery selectors

var $test = $('#list .test');
vs
var $test = $('#list').find('.test');

jsPerf
jsPerf querySelectorAll

Results

Event delegation

<ul id="list">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

Event delegation

document.getElementById('list')
.addEventListener('click', function(e) {
if ( e.target && e.eventTarget == "..."){}
});

Memoization

Recursive vs iteration

Don't use recursion! My browser is dying when hits 500 level of nesting.