Javascript код для сокращения длинного текста нуждается в оптимизации

ПРИМЕЧАНИЕ. Первоначально это указывалось как утечка памяти. Изучив это глубже, я обнаружил, что это не проблема памяти. Это просто очень медленный сценарий. Любые предложения, чтобы ускорить это будет принята с благодарностью.

ДРУГОЕ ПРИМЕЧАНИЕ: После более подробного изучения я вижу, что FF не поддерживает какой-либо тип CSS, который форматирует текст в переполнении. Есть взлом и обходной путь для этого взлома... но это не будет подходящим решением.

Я проголосовал за и присоединился к списку адресов электронной почты об этой конкретной ошибке в Mozilla. Ей почти шесть лет, поэтому я решаю, что пользователям сейчас придется с этим справиться. По крайней мере, это не обычный сценарий для нашего продукта.

Исходное сообщение:

Сценарий усекает значение элемента и добавляет "...", тогда как его scrollWidth больше, чем его offsetWidth. (например, значение "LastName, VeryLongFirstName" изменится на что-то вроде "LastName, Ver...", в зависимости от ширины столбца)

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 + "...";
                    }
                }

Код работает. Однако проблема в том, что он вызывается снова и снова после загрузки таблицы на странице. Когда таблица огромна (>1500 ячеек), именно тогда начинается проблема.

Итак, я действительно ищу способ сделать этот пример (особенно цикл WHILE) более эффективным.

Источник

2 ответа

Решение

Обходной путь, и лучший ответ на мою проблему пришел из базовой арифметики: перекрестное умножение

Я разместил свой ответ в более популярной ветке stackru, обсуждая эту тему более подробно.

Источник

Ничто в этом не будет просачиваться само по себе. Вы, вероятно, пропускаете oText в закрытии, можете ли вы показать окружающий код?

Кстати, вот гораздо более эффективный способ сделать это:

http://jsfiddle.net/cwolves/hZqyj/

Если вы действительно хотите продолжать делать то, что вы есть, вы можете оценить точку отсечения, взяв длину строки и умножив ее на пропорциональную ширину, которая должна быть...

Например, если длина строки составляет 100 символов и она в 2 раза длиннее, обрежьте ее до 50 символов и повторите проверку. Или вы можете реализовать двоичный алгоритм поиска, чтобы получить правильную длину.

Источник
Другие вопросы по тегам