Comment optimiser ce code javascript?

Question

J'ai un fichier jsp qui utilise beaucoup de javascript et ce n'est pas assez rapide. Je voudrais optimiser donc d'abord, voici une partie du code:

Dans le jsp je l'initialisation:

window.onload = function() { 
     formCollection.pageSize.value = "<%= pagingSize%>"; 
     elemCollection = iDom3.Table.all["spis"].XML.DOM; 
     <% if (resultList != null) { %> 
     elementsNumber = <%= resultList.size() %>; 
     <%} else { %> 
     elementsNumber = 0; 
     <% } %> 
     contextPath = "<%= request.getContextPath() %>"; 
    } 

Dans mon fichier js J'ai deux types de fonctions js:

// gets the first element and sets it's value to all the other; 
//the selectSingleNode function is used because I use XSLT transformation 
//to generate the table 

_setTehJed = function(){  
     var resultId = formCollection.elements["idTehJedinice_spis_1"].value; 
     var resultText = formCollection.elements["tehnicka_spis_1"].value; 
     if (resultId != ""){ 
      var counter = 1; 
      while (counter<elementsNumber){ 
       counter++; 
       if(formCollection.elements["idTehJedinice_spis_"+counter] != null){ 
        formCollection.elements["idTehJedinice_spis_"+counter].value=resultId; 
        formCollection.elements["tehnicka_spis_"+counter].value=resultText; 
       } 
       var node=elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_"+counter+"']/data[@col = 'tehnicka']/title"); 
       node.text=resultText; 
       var node2=elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_"+counter+"']/data[@col = 'idTehJedinice']/title"); 
       node2.text=resultId; 
      } 
     } 

    } 

// sets the elements checkbox to checked or unchecked 
_SelectCheckRokCuvanja = { 
     all : [], 

     Item : function (oItem, sId) { 
       this.all["spis_"+sId] = oItem.value; 
       if (oItem.checked) { 
        elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_"+sId+"']/data[@col = 'rokCheck']").setAttribute("default", "true"); 
       }else{ 
        elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_"+sId+"']/data[@col = 'rokCheck']").setAttribute("default", "false"); 
       } 
     } 
    } 

Je l'ai utilisé ces conseils:

http://blogs.msdn.com/b/ie/archive/2006/08/28/728654.aspx http://code.google.com/speed/articles/optimizing-javascript.html

mais je pense que quelque chose pourrait être fait comme la définition des fonctions comme ceci:

Dans le jsp:

window.onload = function() { 
     iDom3.DigitalnaArhivaPrihvat.formCollection=document.forms["controller"]; 
     iDom3.DigitalnaArhivaPrihvat.formCollection.pageSize.value = "<%= pagingSize%>"; 
     iDom3.DigitalnaArhivaPrihvat.elemCollection = iDom3.Table.all["spis"].XML.DOM; 
     <% if (resultList != null) { %> 
     iDom3.DigitalnaArhivaPrihvat.elementsNumber = <%= resultList.size() %> 
     <%} else { %> 
     iDom3.DigitalnaArhivaPrihvat.elementsNumber = 0; 
     <% } %> 

}

dans les js:

iDom3.DigitalnaArhivaPrihvat = { 

    formCollection:null, 
    elemCollection:null, 
    elementsNumber:null, 


_setTehJed : function(){  
     var resultId = this.formCollection.elements.idTehJedinice_spis_1.value; 
     var resultText = this.formCollection.elements.tehnicka_spis_1.value; 
     if (resultId != ""){ 
      var counter = 1; 
      while (counter<this.elementsNumber){ 
       counter++; 
       if(this.formCollection.elements["idTehJedinice_spis_"+counter] !== null){ 
        this.formCollection.elements["idTehJedinice_spis_"+counter].value=resultId; 
        this.formCollection.elements["tehnicka_spis_"+counter].value=resultText; 
       } 
       var node=this.elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_"+counter+"']/data[@col = 'tehnicka']/title"); 
       node.text=resultText; 
       var node2=this.elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_"+counter+"']/data[@col = 'idTehJedinice']/title"); 
       node2.text=resultId; 
      } 
     } 

    }, 

_SelectCheckRokCuvanja = { 
     all : [], 

     Item : function (oItem, sId) { 
       this.all["spis_"+sId] = oItem.value; 
       if (oItem.checked) { 
        this.elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_"+sId+"']/data[@col = 'rokCheck']").setAttribute("default", "true"); 
       }else{ 
        this.elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_"+sId+"']/data[@col = 'rokCheck']").setAttribute("default", "false"); 
       } 
     } 
    } 

mais le le problème est la portée (si je le fais comme ça, la deuxième fonction ne s'exécute pas correctement). Aucune suggestion?

Edit: Structure des données de la table:

<row id="spis_3"> 
    <data col="rokCheck" type="check" default="false" onchange="_ChangeTypeRokCuvanje(this,'3')" > 
    <title>false</title> 
    <description>Tehnička jedinica</description> 
</data> 

Answer 1

selectSingleNode() est une opération assez cher. Vous devriez essayer de l'éviter. Il y a deux solutions:

1. itérer sur la structure de données vous (si vous n'avez pas à rechercher les DOM pour la table mais vous pouvez modifier directement ligne par ligne).

2. Puisque vous attribuez un ID à chaque ligne, vous devriez pouvoir utiliser document.getElementById() sans la recherche XPath coûteuse. Utilisez un framework comme jquery pour obtenir tous les nœuds pertinents en même temps (-> seulement 1 recherche coûteuse), puis passez en revue la liste.

[EDIT] Voir Traversing an HTML table with JavaScript and DOM Interfaces pour voir comment implémenter # 1.

Answer 2

Juste la référence remplacer à this avec _SelectCheckRokCuvanja

_SelectCheckRokCuvanja = { 
    all: [], 
    Item: function (oItem, sId) { 
     _SelectCheckRokCuvanja.all["spis_" + sId] = oItem.value; 
     if (oItem.checked) { 
      _SelectCheckRokCuvanja.elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_" + sId + "']/data[@col = 'rokCheck']").setAttribute("default", "true"); 
     } else { 
      _SelectCheckRokCuvanja.elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_" + sId + "']/data[@col = 'rokCheck']").setAttribute("default", "false"); 
     } 
    } 
}