Avoid Double Evaluation for Faster JavaScript

Dramatically speed up Javascript execution by simply avoiding excessive use of eval() and similar functions. This excerpt from Nicholas C. Zakas' High Performance Javascript will give you an idea just how much of an increase you can expect.

Javascript, like many scripting languages, allows you to take a string containing code and execute it from within running code. There are four standard ways to accomplish this: eval(), the Function() constructor, setTimeout(), and setInterval(). Each of these functions allows you to pass in a string of Javascript code and have it executed. Some examples:

var num1 = 5,

	num2 = 6,



	//eval() evaluating a string of code

	result = eval("num1 + num2"),



	//Function() evaluating strings of code

	sum = new Function("arg1", "arg2", "return arg1 + arg2");



//setTimeout() evaluating a string of code

setTimeout("sum = num1 + num2", 100);



//setInterval() evaluating a string of code

setInterval("sum = num1 + num2", 100);

Whenever you’re evaluating Javascript code from within Javascript code, you incur a double evaluation penalty. This code is first evaluated as normal, and then, while executing, another evaluation happens to execute the code contained in a string. Double evaluation is a costly operation and takes much longer than if the same code were included natively.

As a point of comparison, the time it takes to access an array item varies from browser to browser but varies far more dramatically when the array item is accessed using eval(). For example:

//faster

var item = array[0];



//slower

var item = eval("array[0]");

The difference across browsers becomes dramatic if 10,000 array items are read using eval() instead of native code. Table 8.1 shows the different times for this operation.

This dramatic difference in array item access time is due to the creation of a new interpreter/compiler instance each time eval() is called. The same process occurs for Function(), setTimeout(), and setInterval(), automatically making code execution slower.

Most of the time, there is no need to use eval() or Function(), and it’s best to avoid them whenever possible. For the other two functions, setTimeout() and setInterval(), it’s recommended to pass in a function as the first argument instead of a string. For example:

setTimeout(function(){

	sum = num1 + num2;

}, 100);



setInterval(function(){

	sum = num1 + num2;

}, 100);

Avoiding double evaluation is key to achieving the most optimal Javascript runtime performance possible.