ASP.NET AJAX Best Practices: Avoid String concatenation, use Array instead
Don’t you think the following block of code has written keeping every possible good practice in mind? Any option for performance improvement?
function pageLoad() { var stringArray = new Array(); // Suppose there’re a lot of strings in the array like: stringArray.push(‘<div>’); stringArray.push(’some content’); stringArray.push(‘</div>’); // … code edited to save space var veryLongHtml = $get(‘divContent’).innerHTML; var count = stringArray.length; for(var i=0; i<count; ++i) veryLongHtml += stringArray[i]; }
Well, as you see the innerHTML of the div has been cached so that browser will not have to access the DOM every time while iterating through stringArray, thus costlier DOM methods are being avoided. But, inside the body of the loop the JavaScript interpreter has to perform the following operation:
veryLongHtml = veryLongHtml + stringArray[i];
And the veryLongHtml contains quite a large string which means in this operation the interpreter will have to retrieve the large string and then concatenate with the stringArray elements in every iteration. One very short yet efficient solution to this problem is using join method of the array like the following, instead of looping through the array:
veryLongHtml = stringArray.join(”);
However, this is very efficient than the one we were doing, since it joins the array with smaller strings which requires less memory.
How to solve: Server Controls can’t be accessed in View’s code-behind in ASP.NET MVC
It’s still long way to go for a final release of ASP.NET MVC, the one I’ve been using right now is just a December CTP. But, like me you might be experiencing this confusing problem. The server controls that you put in a View (ViewContentPage) can not be found in code-behind page. The reason behind it is - the Views don’t have a back-end designer code file. I believe it’s just a bug or they could not find time to fix/look into it. I’m sure it will be fixed in any of the upcoming versions.
To enable this, switch to Solution Explorer, right click on the View you are interested in, and choose Convert to Web Application. Now, you will find the server controls in code-behind file.
ASP.NET AJAX Best Practices: Introduce function delegates
Take a look at the following loop. This loop calls a function in each iteration and the function does some stuffs. Can you think of any performance improvement idea?
for(var i=0; i<count; ++i) processElement(elements[i]);
Well, for sufficiently large array, function delegates may result in significant performance improvement to the loop.
var delegate = processElement; for(var i=0; i<count; ++i) delegate(elements[i]);
The reason behind performance improvement is, JavaScript interpreter will use the function as local variable and will not lookup in its scope chain for the function body in each iteration.
ASP.NET AJAX Best Practices: Introduce DOM elements and function caching
We have seen DOM caching before and function delegation is also a kind of function caching. Take a look at the following snippet:
for(var i=0; i<count; ++i) $get(‘divContent’).appendChild(elements[i]);
As you can figure out the code is going to be something like:
var divContent = $get(‘divContent’); for(var i=0; i<count; ++i) divContent.appendChild(elements[i]);
That is fine, but you can also cache browser function like appendChild. So, the ultimate optimization will be like the following:
var divContentAppendChild = $get(‘divContent’).appendChild; for(var i=0; i<count; ++i) divContentAppendChild(elements[i]);
ASP.NET AJAX Best Practices: Problem with switch
Unlike .NET languages or any other compiler languages, JavaScript interpreter can not optimize switch block. Especially when switch statement is used with different types of data, it’s a heavy operation for the browser due to conversion operations occur in consequences, it’s an elegant way of decision branching though.
