Developing javascript code for efficiency meetup - javascripter - 2016-08-27

JS

Java

Scri

pter

swww.javascripters.org

JS

Java

Scri

pter


JavaScriptersCommunity to Connect, Share & Explore

http://www.javascripters.org

Email: [email protected]

http://www.javascripters.org/

mailto:[email protected]?subject=

JS

Java

Scri

pter


JS

Java

Scri

pter


2

Developing Javascript code for efficiency

Kunal Parekh - Engineering Head @SokratiJavascripters - 27/08/2016

JS

Java

Scri

pter


JS

Java

Scri

pter


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

https://www.facebook.com/groups/fbdevelopers/?fref=nf

JS

Java

Scri

pter


JS

Java

Scri

pter


• Reason for growing memory• Demo: growing memory• Garbage collection• Demo: GC

Memory

JS

Java

Scri

pter


JS

Java

Scri

pter


GC

JS

Java

Scri

pter


JS

Java

Scri

pter


• 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


JS

Java

Scri

pter


• Helps to identify which function is spending more time on the js stack

• Flame charts demo

Javascript CPU profiling

JS

Java

Scri

pter


JS

Java

Scri

pter


• 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


JS

Java

Scri

pter


Event Loop

JS

Java

Scri

pter


JS

Java

Scri

pter


• 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


JS

Java

Scri

pter


Javascript Engine

JS

Java

Scri

pter


JS

Java

Scri

pter


• 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


JS

Java

Scri

pter


function concat(a, b) {

return a + b;

}

function printMessages(m) {

concat("Welcome to ", m);

}

printMessages("Javatar");

Demo 1

Link

http://latentflip.com/loupe/?code=ZnVuY3Rpb24gY29uY2F0KGEsIGIpIHsKICAgIHJldHVybiBhICsgYjsKfQoKZnVuY3Rpb24gcHJpbnRNZXNzYWdlcyhtKSB7CiAgICBjb25jYXQoIldlbGNvbWUgdG8gIiwgbSk7Cn0KCnByaW50TWVzc2FnZXMoIkphdmFzY3JpcHRlcnMgbWVldHVwIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D

JS

Java

Scri

pter


JS

Java

Scri

pter


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

http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gU29rcmF0aSBTcGVha2VyIFNlcmllcy4iKTs%3D!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D

JS

Java

Scri

pter


JS

Java

Scri

pter


• 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


JS

Java

Scri

pter


• 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


JS

Java

Scri

pter


Twitter: @_kpthreeGithub: @kpthree

Thank you!

JS

Java

Scri

pter


JS

Java

Scri

pter


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

Software

Developing javascript code for efficiency meetup - javascripter - 2016-08-27