1. 1. Look Up Javascript on Mobile var context = context || {} // wrong! for(var i=index;i
2. 2. Hi! I am Dron Rathore NodeJS & Front End Automation Lead at housing.com About me
3. 3. var name = Dron Rathore var designation = "NodeJS Automation".replace(/(s+|$)/g, function(match){ return parseInt(match.charCodeAt(0))?" Lead, ":" Lead }) var myTask = Pursue everyone to move to JS var interest = Benchmark! Optimise! Repeat! var knowsAbout = Anything that JS does and wherever it does! @heavenhackers About me dron.rathore
4. 4. D.R. If you dont start respecting the Web, it will be doomed!
5. 5. Less Memory Less CPU Less Interaction Area More Events Sensors & WebAPIs Mobile Web Javascript Perspective
6. 6. Browser Design Channel UI JS Channel Browser Internals
7. 7. Javascript Flow Compile Generate binary OpCodes Interpret Initialise context, stack and variables Execute
8. 8. Optimise Javascript Compile Generate binary OpCodes Interpret Initialise context, stack and variables Execute Here Here And Here
9. 9. Why you use Javascript? Templating Animations Events/XHR To show that you are a rockstar!
10. 10. Templating Less Memory, More throughput
11. 11. Mobile Templating Sept-2013 Less Respect, Less Performance
12. 12. Previously Send API Request JSON Parse the data Pass it to the template Get the DOM String Attach it to the DOM Required?
13. 13. Solution
14. 14. Feb-2014 More Respect, Better Performance
15. 15. Events Trust me, they are heavy!
16. 16. Concept: Event Propagation
17. 17. Canvas(skia) = Channel DOM Vars init() init Event Prop() _resolveTargets() _bailoutHandlers() Handler Called
18. 18. Problem? Yeah! Event has to do complete cycle Too many events slow down things Wait for event to reach target
19. 19. Workaround Event Handling Mechanism Do not let it bubble Capture it at the first place Top hierarchy event handling Stop Propagation
20. 20. capture=true Tree Path Targets
21. 21. But..Inline Events were fast?
22. 22. ttps://github.com/DronRathore/eventMan Listen on body tag Assign Unique ID to each Node Access the ID, and look into the map listeners Execute the callback and stop event propagation
23. 23. 0 75 150 225 300 375 jquery 1.7 jquery 2.1 eventMan Sample of 1000 events
24. 24. What is wrong? Write my own Bubbling concept Event Delegation is hard Maintaining a sequence of eventFlow
25. 25. JS Performance Cheat Sheet!
26. 26. .call() vs apply()
27. 27. Out of Scope Access Bailout with ref pointer New CTX to compile/eval
28. 28. Accessing Key * Do in global context return as 1st statement* * = Optimised By default
29. 29. Ternary Operators Ternary Operators are easy to parse at compile time
30. 30. Dont Block, Please ;(
31. 31. Miscellaneous Less timers setIntervals, setTimeouts Use of WebWorkers for heavy tasks documentFragment is a Lie!
32. 32. Animation = CSS, Period.
33. 33. You dont want to get Roasted, do you?
34. 34. 200%+ Performance Optimised
35. 35. Tips of the Day Never bind scroll Events, use touchstart and touchend Listen on top most hierarchy1 Do not Bind too many handlers! Its Heavy! Javascript is Single Threaded, have some respect!
36. 36. Thank You Keep Looking Up for Better JS