No me robes el Scroll!

Viste cuando scrolleas y anda todo re lento? Bueno, muchas veces por ser cool y hacer un montón de cosas en el scroll penalizamos al usuario y su experiencia sin darnos cuenta. Por eso, les quiero compartir una técnica para evitar esto y tener UIs mucho más performantes.

Transcript

1. No me robes el Scroll Es lo único que me queda!
3. Scroll Hijacking
4. Scroll Jank
5. window.onscroll=
6. window.onscroll=
7. • Headers Fixed • Parallax Scrolling • History API • Custom Scrolls • Position Fixed • Hover on Scroll (Chrome NO!) • Juan Vanni <3
8. Scrolling Performance
9. • Expensive Styles (box-shadow, position:fixed) • Reflows and repaints (offsetTop)
10. “It’s a very, very, bad idea to attach handlers to the window scroll event.” by John Resig
11. “Avoid JS handlers for scroll generally, because there’s a ton of tax on them” by Paul Irish
12. Decouple Scroll Events
13. requestAnimationFrame() To the rescue!
14. function decouple(node, fn) { var eve, tracking = false; function captureScroll(e) { eve = e; track(); } function track() { if (!tracking) { requestAnimationFrame(update); tracking = true; } } function update() { fn.call(node, eve); tracking = false; } node.addEventListener('scroll', captureScroll, false); }
15. function decouple(node, fn) { var eve, tracking = false; function captureScroll(e) { eve = e; track(); } function track() { if (!tracking) { requestAnimationFrame(update); tracking = true; } } function update() { fn.call(node, eve); tracking = false; } node.addEventListener('scroll', captureScroll, false); }
16. function decouple(node, fn) { var eve, tracking = false; function captureScroll(e) { eve = e; track(); } function track() { if (!tracking) { requestAnimationFrame(update); tracking = true; } } function update() { fn.call(node, eve); tracking = false;
17. function decouple(node, fn) { var eve, tracking = false; function captureScroll(e) { eve = e; track(); } function track() { if (!tracking) { requestAnimationFrame(update); tracking = true; } } function update() { fn.call(node, eve);
18. function decouple(node, fn) { var eve, tracking = false; function captureScroll(e) { eve = e; track(); } function track() { if (!tracking) { requestAnimationFrame(update); tracking = true; } } function update() { fn.call(node, eve); tracking = false; }
19. function decouple(node, fn) { var eve, tracking = false; function captureScroll(e) { eve = e; track(); } function track() { if (!tracking) { requestAnimationFrame(update); tracking = true; } } function update() { fn.call(node, eve); tracking = false; } node.addEventListener('scroll', captureScroll, false); } function foo(eve) { console.log(eve); console.log(this.scrollTop); } var nodeBox = $$.querySelector('#box'); decouple(nodeBox, foo);
20. function decouple(node, fn) { var eve, tracking = false; function captureScroll(e) { eve = e; track(); } function track() { if (!tracking) { requestAnimationFrame(update); tracking = true; } } function update() { fn.call(node, eve); tracking = false; } node.addEventListener('scroll', captureScroll, false); }
21. Decouple Scroll Events
22. DOM Decouple Scroll Events
23. DOM Events: • Scroll • Resize • Mouse Move • Touch Move
24. npm install decouple https://github.com/pazguille/decouple
26. jank-free properties! transforms & opacity
27. CSS will-change To the rescue!
28. Passive Event Listeners To the rescue!
29. Gracias!