[sgmb id=3]
Hey everyone,
We are back with the new series of this Javascript: Increasing Performance series.
In this post we will talk about scopes and how they affect the performance your web application.
There are four basic places from which data can be accessed in JavaScript:
Literal Values – Any value that represents only itself.
Variables – Any defined value for for storing data with var.
Array Items – Defined indexed location with Javascript Array Objects.
Object Member – String indexed location with Javascript objects.
Accessing values from literal is fastest, then comes the variables. Accessing value from array and object are generally very expensive and more the depth of value more is its cost.
Therefore general advice is to use literal and local variables where ever possible.
Scope chain and Identifier Resolution.
Every function in JS is treated as an object and has properties like Object. There are object properties which are accessible only by Javascript engine like [[Scope]] and is not accessible by the code.
Every object has global scope through which it can access the global variables and local scope. Lets see a function
function add (num1 , num2){
var sum=num1+num2;
return sum;
}
When this function is created its scope chain is populated with a single object which contains all the defined global objects. Global object representing all of the variables that are globally defined.
The scope chain defined here is then used further when the function is executed.
When the function is executed by calling.
var total= add(1,3);
It populates the scope chain with one more object named. The scope chain is like a stack, when ever a scope is created it is pushed into the stack. Thus in this case now local objects will be pushed in stack and thus it will be at the top of stack.
When the Javascript engine starts resolution of ay identifier, it starts with the top of stack and then moves in deeper. This is what makes the resolution of local variable very faster than the global variables.
Nested members of Objects are expensive. Thats why
windows.location.href
is more expensive than
location.href
Thus try using as less depth variables as possible.
With Statement.
Check this code.
with(document){
i=0;
links = getElementsByTagName("a");
console.log(links);
console.log(i);
}
By passing the document object into the with statement, a new variable object containing all of the document object’s properties is pushed to the front of the scope chain. This makes it fast to access document properties but slower to access the local variables such as i.
Therefore be careful before using with statement.
Try catch in Javascript
Catch of try has same effect as with and makes the local variable resolution more expensive. Thus try catch should never be used as the solution to a JavaScript error.
Catch and with statements make all the local variables pushed into second level of scope variable thus making them most costly while resolution.
Tips while using the variables in JS.
Literal values and local variables are faster to accessible than Array and objects.
Local variables are faster to access as they are in first level of scope chain and Global are slowest as they exist in last level.
Avoid with and try catch exception as they are put local variables in second level of scope chain.
Nested object members incur significant performance impact and should be minimized.
The deeper into the prototype chain that a property or method exists, the slower it is to access.
In short, save all the variables in local variables and this will make your app work faster.
Here we are with the end of this post. Want to read more about Javascript performance read the below articles.
https://www.learnsteps.com/javascript-increasing-performance-using-dynamic-loading/
https://www.learnsteps.com/javascript-difference-between-strict-and-lenient-equality/
https://www.learnsteps.com/javascript-confusing-concepts-and-uncertainities/
https://www.learnsteps.com/javascript-increase-performance-by-handling-dom-with-care/
Subscribe for more such articles related to Javascript.
