JAVASCRIPT PERFORMANCE PATTERN - A Presentation
Download as pptx, pdf0 likes173 views
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.
![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](https://image.slidesharecdn.com/presentationtemplate-170925095829/85/JAVASCRIPT-PERFORMANCE-PATTERN-A-Presentation-4-320.jpg)
![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.](https://image.slidesharecdn.com/presentationtemplate-170925095829/85/JAVASCRIPT-PERFORMANCE-PATTERN-A-Presentation-12-320.jpg)
![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](https://image.slidesharecdn.com/presentationtemplate-170925095829/85/JAVASCRIPT-PERFORMANCE-PATTERN-A-Presentation-13-320.jpg)
More Related Content
Similar to JAVASCRIPT PERFORMANCE PATTERN - A Presentation (20)
More from HabileLabs (9)
Recently uploaded (20)
JAVASCRIPT PERFORMANCE PATTERN - A Presentation
- 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?
- 16. ONCE MORE, ONCE MORE Var x = true; setTimeout(function() { x=false; }, 5000); While(x); Console.log(‘finally finished’) 1 2
- 17. CALL STACK
- 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: [email protected]
- 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.