look up mobile javascript
TRANSCRIPT
- 1. Look Up Javascript on Mobile var context = context || {} // wrong! for(var i=index;i
- 2. Hi! I am Dron Rathore NodeJS & Front End Automation Lead at housing.com About me
- 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. D.R. If you dont start respecting the Web, it will be doomed!
- 5. Less Memory Less CPU Less Interaction Area More Events Sensors & WebAPIs Mobile Web Javascript Perspective
- 6. Browser Design Channel UI JS Channel Browser Internals
- 7. Javascript Flow Compile Generate binary OpCodes Interpret Initialise context, stack and variables Execute
- 8. Optimise Javascript Compile Generate binary OpCodes Interpret Initialise context, stack and variables Execute Here Here And Here
- 9. Why you use Javascript? Templating Animations Events/XHR To show that you are a rockstar!
- 10. Templating Less Memory, More throughput
- 11. Mobile Templating Sept-2013 Less Respect, Less Performance
- 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. Solution
- 14. Feb-2014 More Respect, Better Performance
- 15. Events Trust me, they are heavy!
- 16. Concept: Event Propagation
- 17. Canvas(skia) = Channel DOM Vars init() init Event Prop() _resolveTargets() _bailoutHandlers() Handler Called
- 18. Problem? Yeah! Event has to do complete cycle Too many events slow down things Wait for event to reach target
- 19. Workaround Event Handling Mechanism Do not let it bubble Capture it at the first place Top hierarchy event handling Stop Propagation
- 20. capture=true Tree Path Targets
- 21. But..Inline Events were fast?
- 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. 0 75 150 225 300 375 jquery 1.7 jquery 2.1 eventMan Sample of 1000 events
- 24. What is wrong? Write my own Bubbling concept Event Delegation is hard Maintaining a sequence of eventFlow
- 25. JS Performance Cheat Sheet!
- 26. .call() vs apply()
- 27. Out of Scope Access Bailout with ref pointer New CTX to compile/eval
- 28. Accessing Key * Do in global context return as 1st statement* * = Optimised By default
- 29. Ternary Operators Ternary Operators are easy to parse at compile time
- 30. Dont Block, Please ;(
- 31. Miscellaneous Less timers setIntervals, setTimeouts Use of WebWorkers for heavy tasks documentFragment is a Lie!
- 32. Animation = CSS, Period.
- 33. You dont want to get Roasted, do you?
- 34. 200%+ Performance Optimised
- 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. Thank You Keep Looking Up for Better JS