Measuring JavaScript performance on webpages

Most web pages nowadays contain big chunks of java scripts that help pages to be more appealing. However, java scripts affects web pages performance because browsers must execute code within all the script tags before rendering the page. That’s why the more script you have on your page, the more delay your page is gonna suffer before starting to render. That’s why one must make sure to use efficient scripts that does not affect the page performance. But how do you measure your script performance. Well, there are two ways to measure your java script function performance, whether manually or using a performance profiling tool. 

1- Manually testing your java script function performance involve one writing custom code to test how long his function takes to execute. This technique is really simple because all what you need to do is to add a line of code at the beginning of the function and another one at the end to calculate the time the function took to finish.


function myFunction()
{
var started = new Date().getMilliseconds();
//Your code Here
var ended = new Date().getMilliseconds();
Alret ("Function MyFunction executed in" + stop - start);
}

As you can see, what I have done is adding a statement to get the time at the beginning of the function and another one to get the time at the end of the function then subtract them to calculate how long did this function take.

2- The other way to measure the performance of your java script function is to use a performance profiler tool which would give you a complete picture of your page execution. The most famous tool is yslow which is an addons on firefox.

How to Add/Remove items from a dropdownlist using JQuery

< asp: DropDownList ID="ddlMyCombo" runat="server" ></asp: DropDownList > 

In order to clear a dropdownlist items using JQuery:
$('#ddlMyCombo >option').remove();

for more about the JQuery Seletor expressions take a look on my post JQuery Selector Expressions Demystified

What I am doing here is selecting all the option elements that are child of the element with ID “#ddlMyCombo” which is the dropdownlist id and then deleting them. Doing this is gonna clear all elements of the dropdownlist.

So now in order to add items again to the dropdownlist, we will simply append options HTML elements to our test combo
var myCombo= $('#ddlMyCombo');
myCombo.append($('< option > </option>').val(1).html(option1Text));

What I have done here is that I have selected the dropdownlist first just for convenience. It is similar to saying
document.getElementById('ddlMyCombo')
I then start appending HTML option items to my dropdownlist and set the item value and text.