Slide 1

Slide 1 text

No me robes el Scroll Es lo único que me queda!

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Scroll Hijacking

Slide 4

Slide 4 text

Scroll Jank

Slide 5

Slide 5 text

window.onscroll=

Slide 6

Slide 6 text

window.onscroll=

Slide 7

Slide 7 text

● Headers Fixed ● Parallax Scrolling ● History API ● Custom Scrolls ● Position Fixed ● Hover on Scroll (Chrome NO!) ● Juan Vanni <3

Slide 8

Slide 8 text

Scrolling Performance

Slide 9

Slide 9 text

● Expensive Styles (box-shadow, position:fixed) ● Reflows and repaints (offsetTop)

Slide 10

Slide 10 text

“It’s a very, very, bad idea to attach handlers to the window scroll event.” by John Resig

Slide 11

Slide 11 text

“Avoid JS handlers for scroll generally, because there’s a ton of tax on them” by Paul Irish

Slide 12

Slide 12 text

Decouple Scroll Events

Slide 13

Slide 13 text

requestAnimationFrame() To the rescue!

Slide 14

Slide 14 text

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); }

Slide 15

Slide 15 text

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); }

Slide 16

Slide 16 text

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;

Slide 17

Slide 17 text

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);

Slide 18

Slide 18 text

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; }

Slide 19

Slide 19 text

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);

Slide 20

Slide 20 text

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); }

Slide 21

Slide 21 text

Decouple Scroll Events

Slide 22

Slide 22 text

DOM Decouple Scroll Events

Slide 23

Slide 23 text

DOM Events: ● Scroll ● Resize ● Mouse Move ● Touch Move

Slide 24

Slide 24 text

npm install decouple https://github.com/pazguille/decouple

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

jank-free properties! transforms & opacity

Slide 27

Slide 27 text

CSS will-change To the rescue!

Slide 28

Slide 28 text

Passive Event Listeners To the rescue!

Slide 29

Slide 29 text

Gracias!