Javascript代碼來縮短長文本需要優化

注意：最初有這被列爲內存泄漏。深入研究之後，我發現這不是一個記憶問題。這只是一個非常緩慢的腳本。任何建議，以加快這一點將不勝感激。Javascript代碼來縮短長文本需要優化

另一個注意：進一步調查後，我看到FF不支持任何類型的CSS格式溢出文本。有一個hack和一個workaround那個黑客......但這不會是一個合適的解決方案。

我已投票支持並加入了mozilla的particular bug的電子郵件列表。它已經快六年了，所以我決定用戶現在只需要處理它。至少這不是我們產品的常見情況。

原帖：

腳本截斷元素的值，並追加「...」，而其scrollWidth大於它的offsetWidth。（例如，「名字，VeryLongFirstName」的值將改變爲類似「名字，版本...」，取決於列的寬度）

var eTable = document.getElementById(this._eDiv.id + "_tbl"); 

//...lots of code here... 

//function called that gets all cells in a table, loops through them and clips the text 
addEventListenerEx(window, "load", function() {  
     var aCells = eTable.getElementsByTagName("DIV"); 
     window.alert(aCells.length); 
      //When aCells is length of 100, we're ok...but when it's big (like 3,000) I have problems   
     for (var i = 0; i < aCells.length; i++){ 
      Grid.clipText(aCells[i]); 
     } 
}, false); 

//...lots of code here... 

//This is the function doing the actual clipping 
Grid.clipText = function (oDiv) { 

    //for tooltip  
    var oCurDiv; 
    var oTagA; 
    var sToolTip;  
    if (oDiv.firstChild) { 
      if (oDiv.firstChild.firstChild){    
       oCurDiv = oDiv.firstChild; 
       while (oCurDiv) { 
        if (is.ie) { 
         oTagA = oCurDiv;       
        } else { 
         // there are some different between IE & FireFox. 
         oTagA = oCurDiv.firstChild.parentNode;      
        } 
        if (oTagA.tagName == "A") { 
         sToolTip = oTagA.innerHTML;  
         if (sToolTip.indexOf('<b>') > 0) { 
          sToolTip = sToolTip.replace('<b>',""); 
          sToolTip = sToolTip.replace('</b>',""); 
         } 
         if (sToolTip.indexOf('<B>') > 0) { 
          sToolTip = sToolTip.replace('<B>',""); 
          sToolTip = sToolTip.replace('</B>',""); 
         }      
         oTagA.parentNode.title = convertHTMLToText(sToolTip); 
        } 
        oCurDiv = oCurDiv.nextSibling;          
       } 
      } else { 
       oDiv.title = convertHTMLToText(oDiv.innerHTML); 
      } 
     } 

     //NOTE: Additional steps to take for non-IE browsers 
     if (!is.ie) { 
        var oText = oDiv;   
        while (oText.nodeType != 3) { 
         oText = oText.firstChild; 
        } 

        var sDisplayText = oText.nodeValue; 
        if (sDisplayText.length < 3) return; 

        var lastThree; 
        sDisplayText = sDisplayText.slice(0, parseInt(oDiv.offsetWidth/5)); 
        oText.nodeValue = sDisplayText + "..."; 

        //NOTE: Bad things happen here because of this loop 
        while (oDiv.scrollWidth > oDiv.offsetWidth && sDisplayText != "") { 
         lastThree = sDisplayText.slice(-3); 
         sDisplayText = sDisplayText.slice(0, sDisplayText.length - 3); 
         oText.nodeValue = sDisplayText + "..."; 
        } 
        oText.nodeValue = sDisplayText + lastThree.slice(0, 1) + "..."; 
        while (oDiv.scrollWidth > oDiv.offsetWidth && sDisplayText != "") { 
         oText.nodeValue = sDisplayText + "..."; 
        } 
       }

代碼工作。但是，問題在於，在頁面上加載表格後，它會一遍又一遍地被調用。當桌子很大（> 1,500個單元格）時，問題就開始了。

所以，我真的想找一種方法來使這個示例（特別是WHILE循環）更有效。

來源

2011-03-24 ray