[RESOLVED]Javascript external file performance

Hi,

I have moved all my javascript functions to an external js file. 

Instead of 

<%=Control.ClientID %>

 I am fetching all the control via class.

But the script execution became dead slow.

I have to call all control using ClientId since I have masterpages and containers.

I have tried ;

document.getElementById($('[id$=Control]').attr('id'))

But this also made my page slow.

It might be running slower as normally when it finds an id processing stops as ids should be unique.  When you get by class, it has to traverse the whole dom.

You can add js on your ascxaspx pages like

<script>
var controlId = '<%=YourControl.ClientID%>';
</script>

then in your js files, use $("#" + controlId) to get the element.  You have to be careful that the js code runs after the var has been defined.  If your js code runs in the dom ready event you should be ok.  Failing that you have to make sure the <script>
tag that references your js file is after the script that defines the var.

Probably you can store the clientID values in js variables in your .aspx page and then reuse them in js file.

In aspx page:

var control_1_id = <%=Control1.ClientID%>;

In js file:

use control_1_id variable.

This may be not much feasible but that should solve if you have few controls to refer.

But You can also take a look at using ClientIDMode as Static:

http://msdn.microsoft.com/en-us/library/system.web.ui.clientidmode(v=vs.110).aspx

Generally the best way to handle this would be to use some type of reference defined within a Javascript block in your actual ASPX pages themselves to allow your external file to resolve the appropriate element :

<script type='text/javascript'>
    // Store a reference to your DropDownListID
    var yourDropDownList = '<%= YourDropDownList.ClientID %>';
</script>

You could also use a hidden field to accomplish this, but it would really just be cluttering up the DOM and would require you to add an additional "document.getElementById()" to get the value for the reference. You’ll then just need to replace any calls
for the particular Control to one of the following within your external file :

// jQuery
$('#' + yourDropDownList).addClass('example');

// Javascript
document.getElementById(yourDropDownList).class = 'example';

Precedence is going to be very important as well. You’ll need to ensure that your variable is going to be set and available prior to loading your external file (so that your variable can actually be accessed within it).

Try the https://developer.mozilla.org/en-US/docs/Tools/Profiler to find out first why it is slow. Avoid to retrieve the same controls multiple time.

Having the code Inside your page or as an external file shouldn’t have changed anything. The snippet you show seems weird (you use jquery to find a control and then you use the control id to retrieve again the same control jquerry already returned ??? If
doing always this it seems you are doing the same thing at least twice). Also jquery could retrieve a list of controls rather than a single control…

Leave a Reply