KoffeeKoder


Latest Posts
  • Presenting at North Houston DotNet User Group on November 20th 2008
    published on 11/16/2008 6:46:31 PM (Ajax)
    Comments => 0
  • I will be presenting at North Houston .NET User Group on November 20th 2008. If you are in town then do come by the session. If you are not in town then get in town for this session.

    I will be talking about different Ajax frameworks. These frameworks include Ajax.Net library, Microsoft AJAX and JQuery Ajax API. The presentation will contain lot of live coding and minimum slides (3-5 slides).

    For directions and stuff check out the link below:

    Find Meeting
  • Repetitive Calls to Find the Same Element Using document.getElementById and Performance
    published on 11/16/2008 11:20:17 AM (JavaScript)
    Comments => 0
  • 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.