My talk at MetaRefres–2015. Might not be complete, exported from Keynote.Original: http://goo.gl/0FFJdA

1. Look Up Javascript on
Mobile
var context = context || {} // wrong!
for(var i=index;i<val;i++)
array[i] = someVal // wrong!
<button class=“someCoolDiv” onclick=“someCoolFunc()”>
<!— doesn’t matter you are still wrong! —>
</button>

2. • Hi! I am Dron Rathore
• NodeJS & Front End Automation
Lead at housing.com
About
me

4. • 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

5. – D.R.
“If you don’t start respecting the Web, it will be doomed!”

6. • Less Memory
• Less CPU
• Less Interaction Area
• More Events
• Sensors & WebAPIs
Mobile Web — Javascript
Perspective

7. Browser Design
Channel
UI
JS
Channel
Browser Internals

8. Javascript Flow
• Compile
• Generate binary OpCodes
• Interpret
• Initialise context, stack and variables
• Execute

9. Optimise Javascript
• Compile
• Generate binary OpCodes
• Interpret
• Initialise context, stack and variables
• Execute
Here ⇒
Here ⇒
And Here
⇒

10. Why you use
Javascript?
• Templating
• Animations
• Events/XHR
• To show that you are a rockstar!

11. Templating
Less Memory, More throughput

12. Mobile Templating
Sept-2013
Less Respect, Less
Performance

13. Previously
• Send API Request
• JSON Parse the data
• Pass it to the template
• Get the DOM String
• Attach it to the DOM
Required?

14. Solution

15. Feb-2014
More Respect, Better
Performance

16. Events
Trust me, they are heavy!

17. Concept: Event Propagation

18. Canvas(skia) = Channel ⇒ DOM Vars init() ⇒ init Event Prop() ⇒ _resolveTargets()
_bailoutHandlers()
Handler Called

19. Problem? Yeah!
• Event has to do complete cycle
• Too many events slow down things
• Wait for event to reach target

20. Workaround Event Handling
Mechanism
• Do not let it bubble
• Capture it at the first place
• Top hierarchy event handling
• Stop Propagation

21. capture=true
⇒Tree Path
⇒Targets

22. But..Inline Events were fast?

23. 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

24. 0
75
150
225
300
375
jquery 1.7 jquery 2.1 eventMan
Sample of 1000 events

25. What is wrong?
• Write my own Bubbling concept
• Event Delegation is hard
• Maintaining a sequence of eventFlow

26. JS Performance
Cheat Sheet!

28. .call() vs apply()

29. ⇒Out of Scope Access
⇒Bailout with ref pointer
⇒New CTX to compile/eval

30. ⇒Accessing Key *
⇒Do in global context
⇒return as 1st statement*
* = Optimised By default

31. Ternary Operators
Ternary Operators are easy to parse at compile time

32. Don’t Block, Please ;(

33. Miscellaneous
• Less timers — setIntervals, setTimeouts
• Use of WebWorkers for heavy tasks
• documentFragment is a Lie!

34. Animation = CSS, Period.

35. You don’t want to get Roasted, do you?

36. 200%+
Performance Optimised

37. 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!

38. Thank You
Keep Looking Up for Better JS