如何優化此JavaScript代碼？

Question

我有一個jsp，它使用了大量的javascript，但速度不夠快。我想這樣先優化它，這裏的代碼的一部分：

在JSP我有初始化：

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() %>"; 
    } 

在我的js文件我有兩種類型的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"); 
       } 
     } 
    } 

我使用這些提示：

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

但我仍然認爲事情就可以像定義這樣的函數來完成：

在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; 
     <% } %> 

}

在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"); 
       } 
     } 
    } 

但問題是範圍界定（如果我這樣做，第二個功能不能正確執行）。有什麼建議麼？

編輯：表中的數據結構：

<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()更換參考this是一個非常昂貴的操作。你應該儘量避免它。解決辦法有兩個：

1. 遍歷數據結構自己（這樣你就不必搜索表的DOM，但你可以通過直接修改一行行）。

2. 由於您爲每行分配了一個ID，因此您應該可以在沒有昂貴的XPath查找的情況下使用document.getElementById()。

3. 使用像jquery這樣的框架一次獲取所有相關節點（ - >只有1個昂貴的查找），然後遍歷列表。

[編輯]請參閱Traversing an HTML table with JavaScript and DOM Interfaces瞭解如何實現＃1的示例。

Answer 2

只是_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"); 
     } 
    } 
}