javascript performance pattern - a presentation
TRANSCRIPT
JAVASCRIPT PERFORMANCE PATTERN
-VIVEK KUMAR
@habilelabs
HABILELABS PVT. LTD.
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.
WHAT IS PATTERN IN PROGRAMMING?
Pattern??
*
**
***
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
WHY ‘PERFORMANCE’ IN JS.
?really
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)
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
DOM CACHING
for (var i=0; i<1000; i++) {
$(“#list").append(“<li>” +i+ “</li>”);}
5
But what if you have not any option?
CACHING THE FREQUENTLY USED OBJECTS.
Var list =$(“#list”)for (var i=0; i<1000; i++) {
list.append(“<li>” +i+ “</li>”);}
6
USE JOIN(), INSTEAD OF CONCAT OF STRINGS
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?
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.
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
PERFORMING ASYNC TASKS
JS is single threaded. How it can do multiple job at once?
ASYNCHRONOUS
console.log(1)
setTimeout(function()
{ console.log(2)
}, 0);
console.log(3)
11
?
ONCE MORE, ONCE MORE
Var x = true;
setTimeout(function()
{ x=false;
}, 5000);
While(x);
Console.log(‘finally finished’)
12
CALL STACK
CALL STACK
Console.log()
CALL STACK
setTimeout???
EVENT LOOP
Concurrency is browsers, responsibility,
In web its WEB APIs and
In Node JS its c++ APIs
EVENT LOOP
1
EVENT LOOP
2
EVENT LOOP
3
EVENT LOOP
4
EVENT LOOP
5
EVENT LOOP
6
EVENT LOOP
NO BODY KNOWS EVERYTHING, BUT STILL!
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]
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
THANK YOU FOR READING.