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