developing javascript code for efficiency meetup - javascripter - 2016-08-27
TRANSCRIPT
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
JavaScriptersCommunity to Connect, Share & Explore
http://www.javascripters.org
Email: [email protected]
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
2
Developing Javascript code for efficiency
Kunal Parekh - Engineering Head @SokratiJavascripters - 27/08/2016
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
3
• Facebook news feed page• Lets look at the requirements:
• New content should be loaded as the page is scrolled• Any new post from friends should update the news feed• A user should be able to like/comment/share a post• Bandwidth utilization should be minimum
• Facebook news feed page
Let us start with a use-case
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
• Reason for growing memory• Demo: growing memory• Garbage collection• Demo: GC
Memory
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
GC
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
• Helpful in finding a leak in the app• Takes the heap snapshot every ~50ms• Blue bars: indicate objects that are still live at the end of the
timeline• Gray bars: indicate objects that were allocated during the
timeline, but have since been garbage collected• Demo: Detach node
Object allocation Tracker (Record heap allocation)
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
• Helps to identify which function is spending more time on the js stack
• Flame charts demo
Javascript CPU profiling
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
• Is the app using too much memory?• Is the app free of memory leaks?• What is the frequency of garbage collection?
Application Checklist
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
Event Loop
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
• Let's relook at "What is Javascript?"• A single threaded Concurrent language• Composed of Call Stack, Event Loop, Callback Q
Event Loop
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
Javascript Engine
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
• Its only job is to:• look at the stack• look at callback Q• if the stack is empty, pop the callback from callback queue
and push on to the stack
So, what is an Event Loop?
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
function concat(a, b) {
return a + b;
}
function printMessages(m) {
concat("Welcome to ", m);
}
printMessages("Javatar");
Demo 1
Link
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
$.on('button', 'click', function onClick() {
setTimeout(function timer() {
console.log('You clicked the button!');
}, 2000);
});
console.log("Hi!");
setTimeout(function timeout() {
console.log("Click the button!");
}, 5000);
console.log("Welcome javascripters.");
Demo 2
Link
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
• Look for growing memory• Look for GC events• Find leaks using object allocation tracker• Compare snapshot between 2 interaction• Find the functions which are consuming maximum time on
flame chart stack• Be careful about using event loop• Think about offloading the heavy lifting to web apis (c++ in case
of node)• Analyze code fragments which are blocking the stack
Summary
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
• Fastest page on the web?• What is the ideal time for workload of frame to be completed?• workload: js > styling > layout > paint > composite• alert(typeof null) ?• alert(null instanceof Object); // null is an absence of value`
Quiz
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
Twitter: @_kpthreeGithub: @kpthree
Thank you!
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
List of upcoming events
1. JavaScript Design Patterns 2. BootStrap , CSS and Responsive Design3. Introduction of Design thinking for front-end Engineers4. UI Visual Automation Testing5. React JS with Material design6. Introduction to Angular 2.x7. Practice with TypeSpcript8. Introduction to ES6 & Practice session9. Automated javascript workflow with Gulp10. NodeJs practice session11. Total (3) online webinar under planning