No me robes el Scroll!

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.

F8a70e01eddbadc5e4f9876ff34494fa?s=128

Guille Paz

July 14, 2016
Tweet

Transcript

  1. No me robes el Scroll Es lo único que me

    queda!
  2. None
  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

  25. None
  26. jank-free properties! transforms & opacity

  27. CSS will-change To the rescue!

  28. Passive Event Listeners To the rescue!

  29. Gracias!