throttle and debounce patterns in web apps

Download Throttle and Debounce Patterns in Web Apps

Post on 27-Nov-2014

209 views

Category:

Software

1 download

Embed Size (px)

DESCRIPTION

A brief discussion on the Throttle and Debounce Patterns. Where, when and why to use them? They solve some problems that may harm the performance of an entire web app due to misuse of user events.

TRANSCRIPT

  • 1. THROTTLE & DEBOUNCEPATTERNSIN WEB APPS@ALMIRFILHO

2. @loopinfinitol8p.com.br@almirfilho 3. @loopinfinitol8p.com.br@almirfilho 4. @loopinfinitol8p.com.br@almirfilhoafterconf 5. THE PROBLEM 6. How to controluser eventsfrequency? 7. SOME CASESonclickonresizeonscrollonmousemove 8. onclickOrder some shitSome AJAX action. Whatever 9. onclickOrder some shitSome AJAX action. Whateverclickfreak 10. onresizeResponsive modafoca 11. onresize = 100px 100 *triggerings!!%?#$Responsive modafoca 12. onscrollParalax bullshit 13. onscroll = 100px samefuc*ingthingParalax bullshit 14. onmousemoveGaming junk 15. onmousemovex = 100pxy = 50px 150 *trigg OMGplz stopGaming junk 16. **BONUS** PROBLEM 17. Updating drawings? 18. Updating drawings?just redrawE-V-E-R-Y-T-H-I-N-G 19. stage.update = function(){redrawHeavyShit();};!while(game.isOn){game.step();stage.update();}stupidgame loop 20. WAY COOLERstage.update = function(){redrawHeavyShit();};!var gameLoop = function(){game.step();stage.update();requestAnimationFrame(gameLoop);};!gameLoop(); 21. WAY COOLERstage.update = function(){redrawHeavyShit();};!var gameLoop = function(){game.step();stage.update();requestAnimationFrame(gameLoop);};!gameLoop(); 22. Measuringdamage withdev tools 23. RENDERING & PAINTING COSTSall major and modern* browsers* even in IE (11) 24. So, how to controluser eventsfrequency? 25. THROTTLE 26. A throttle is amechanism tomanage fuel flowin an engine 27. ENGINE THROTTLE 28. So, throttle is just avalve?! yeeep 29. COMMON CASESresizingscrollingmouse moving 30. 0s 0.1stonscrollE E E E E E E E E E Eparalax() 31. onscroll throttled0s 0.1stE E E E E E E E E E ETHROTTLEparalax() 32. onscroll throttled0s 0.1stE E E E E E E E E E ETHROTTLEparalax() 33. var paralax = function(args){complexHeavyShit();};!window.addEventListener(scroll, function(e){paralax(e.args);}); 34. LETSTHROOOOTLE ITvar paralax = function(args){complexHeavyShit();};!window.addEventListener(scroll,throttleParalax()); 35. var throttleParalax = (function(){var timeWindow = 500;var now = (new Date()).getTime();var lastExecution = new Date(now - timeWindow);!var paralax = function(args){complexHeavyShit();};!return function(){var now = (new Date()).getTime();if(lastExecution.getTime() + timeWindow

Recommended

View more >