Let's have an idea about JAVASCRIPT PERFORMANCE PATTERN, what is it? why do we need to use this? Etc. Check out this presentation for all you need to know about javascript performance patterns.

1. JAVASCRIPT PERFORMANCE
PATTERN
-VIVEK KUMAR
@habilelabs
HABILELABS PVT. LTD.

2. TOPICS
1. What is PATTERN in this context?
2. Performance Pattern?
3. DOM manipulations.
4. ‘for’ loop optimization
5. Single threaded JS, performing async task.

3. WHAT IS PATTERN IN
PROGRAMMING?
Pattern??
*
**
***

4. PROGRAMMING PATTERNS
WIKIPEDIA:
In software engineering, a software design pattern is a general
reusable solution to a commonly occurring problem within a given
context in software design.
SIMPLY:
It’s a template/snippet of code, that can be reused to solve problems.
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
function Person(config) {
this.name = config.name;
this.age = config.age;
}
1
2

5. WHY ‘PERFORMANCE’ IN JS.
?
really

6. PERFORMANCE PATTERNS IN JS.
Why?
 JS is single threaded, so, write fast synchronous codes,
because after all:
Blob fills Sea Blob
 Code snippets that has lower runtime than the usual one.
 Client side and server side (templating and REST APIs,
static stuffs)

7. DOM MANIPULATIONS
 DOM manipulations are expensive, use CACHING
 In JQuery, insert operations like prepend(), append(), after() are rather time-
consuming.
 Example
var list = '';
for (var i=0; i<1000; i++) {
list += '<li>'+i+'</li>';
}
('#list').html (list);
for (var i=0; i<1000; i++) {
$(“#list").append(“<li>” +i+ “</li>”);
}
4
5

8. DOM CACHING
for (var i=0; i<1000; i++) {
$(“#list").append(“<li>” +i+ “</li>”);
}
5
But what if you have not any
option?

9. CACHING THE FREQUENTLY USED
OBJECTS.
Var list =$(“#list”)
for (var i=0; i<1000; i++) {
list.append(“<li>” +i+ “</li>”);
}
6

10. USE JOIN(), INSTEAD OF CONCAT
OF STRINGS

11. FOR LOOP
for (var i=0; i<items.length; i++)
{
// Magic
}
7
• The most common way to write a
loop, and without a doubt the
first way people learn how to do
it, is like this:
But where is the problem
exactly?

12. FOR LOOP OPTIMIZATION
for (var i=0; i<items.length; i++)
{
// Magic
}
8
for (var i=0; items[i]; i++) )
{
// Magic
}
9
for (var i=0, il=divs.length; i<il; i++)
{
// Magic
}
10
just compare the current iteration index to
the length saved in a variable.
for each iteration you need to do a look-up
of the array to see if an object exists at the
current index.
for each iteration in the loop, it needs to test
the current item and check the length of
array/collection you’re looping through.

13. PERFORMANCE OF ‘FOR’
for (var i=0; i<items.length; i++)
{
// Magic
}
8
for (var i=0; items[i]; i++) )
{
// Magic
}
9
for (var i=0, il=divs.length; i<il; i++)
{
// Magic
}
10
The test creates 10 000 div elements when
the page is loaded

14. PERFORMING ASYNC TASKS
JS is single threaded. How
it can do multiple job at
once?

15. ASYNCHRONOUS
console.log(1)
setTimeout(function()
{ console.log(2)
}, 0);
console.log(3)
1
1
?

16. ONCE MORE, ONCE MORE
Var x = true;
setTimeout(function()
{ x=false;
}, 5000);
While(x);
Console.log(‘finally finished’)
1
2

17. CALL STACK

18. CALL STACK
Console.log()

19. CALL STACK
setTimeout???

20. EVENT LOOP
Concurrency is
browsers,
responsibility,
In web its WEB
APIs and
In Node JS its c++
APIs

21. EVENT LOOP
1

22. EVENT LOOP
2

23. EVENT LOOP
3

24. EVENT LOOP
4

25. EVENT LOOP
5

26. EVENT LOOP
6

27. EVENT LOOP

28. NO BODY KNOWS EVERYTHING,
BUT STILL!

29. CONTACT US
Do you have anything to build, let’s build together:
Contact Us: +91-9828247415
Visit our Website: www.habilelabs.io
mail us at: info@habilelabs.io

30. REFERENCES
1. https://www.monitis.com/blog/30-tips-to-improve-javascript-
performance/
2. https://code.tutsplus.com/tutorials/understanding-design-patterns-in-
javascript--net-25930
3. https://robertnyman.com/2008/04/11/javascript-loop-performance/
4. http://jonraasch.com/blog/10-javascript-performance-boosting-tips-
from-nicholas-zakas
5. https://www.youtube.com/watch?v=8aGhZQkoFbQ

31. THANK YOU FOR READING.