Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

More Decks by Guille Paz

Other Decks in Technology

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!