AzamSharp

Repetitive Calls to Find the Same Element Using document.getElementById and Performance
published on 11/16/2008 11:20:17 AM

You will find no difference in performance when using document.getElementById to find an element once. But if you are performing this operation hundreds of times on a single element then you might be hurting the performance.

I performed a small test in which I created 200 TextBoxes and added it to the ASP.NET Panel control. Here is the code for that:

private void BindData()
        {
            for (int i = 1; i <= 200; i++)
            {
                TextBox t = new TextBox();
                t.Text = "something " + i;
                panelContainer.Controls.Add(t); 
            }
        }

Now, I need to add a custom TextBox which will be searched among these 200 TextBoxes.

<asp:Panel ID="panelContainer" runat="server" />
    
    <input type="button" value="Execute" onclick="execute()" />
    
    <input type="text" id="txtName" />

Now here is the JavaScript code that will try to search for the “txtName” TextBox:

<script language="javascript" type="text/javascript">

function execute() 
{
    console.profile("profiling start"); 
    callingGetElementByIdMultipleTimes(); 
    pullingTheObjectIntoTheVariable(); 
    console.profileEnd(); 
    
    
}

function pullingTheObjectIntoTheVariable() 
{
    var txtObject = document.getElementById("txtName"); 
    
    for(i=0; i<=200;i++) 
    {
        txtObject.value = 'hello world';
    }
    
}

function callingGetElementByIdMultipleTimes() 
{
    var txtObject;

    for(i=0;i<=200;i++) 
    {
       txtObject = document.getElementById("txtName");
       txtObject.value = 'Hello World';
    }
}

</script>

As you can see that I am trying to find the element “txtName” 200 times and then setting the custom text into the TextBox.

Now, let’s see the results using the FireFox profiler.

As, you can see that moving the value of the TextBox into a variable and then referring the variable is little faster then searching for the element in the complete DOM tree.

For most of the time you won’t see any difference but if you are finding the same element again and again then it is much better to move the element object into a variable and refer the variable.

Did you like this article?

Submit

Name:
Name:
Email:
Comment/Feedback:
2+2=