У меня следующая проблема.

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

После того как она создана, обрабатываю нажание кнопки мыши и создаю еще одну ячейку ...

Вставляю ячейку с помошью insertBefore или appendChild. В момент вставки происходит задержка около секунды.

Возможно ли как то это победить?

Здравствуйте, sss4372, Вы писали:

S>У меня следующая проблема.

S>Создаю динамически большую таблицу с ячейками, в каждой ячейке снова таблица с грфическими элементами.
S>Еслественно получается довольно большое дерево.

S>После того как она создана, обрабатываю нажание кнопки мыши и создаю еще одну ячейку ...

S>Вставляю ячейку с помошью insertBefore или appendChild. В момент вставки происходит задержка около секунды.

S>Возможно ли как то это победить?
возможно, что это связано с перерисовкой/пересчетом браузером таблицы.
Если это так, то бороться можно в следующих направлдениях:
1. сделать таблицу в display:none, чтобы браузеру не надо было ее рисовать
2. сделать таблице layout: fixed, чтобы браузеру не надо было считать

Здравствуйте, Rumata, Вы писали:

R>возможно, что это связано с перерисовкой/пересчетом браузером таблицы.

Я не понимаю зачем пересчитывать таблицу если она предстовляется в DOM как дерево, и соответственно на добавление нового узла дерева не должно по идее тратится много времени.

Но факт остается фактом при добавлении нового элемента в таблицу тормоза, при добавлении в пустой контейнер, который не входит в эту таблицу все нормально.

R>1. сделать таблицу в display:none, чтобы браузеру не надо было ее рисовать

Пробывал не помогло

R>2. сделать таблице layout: fixed, чтобы браузеру не надо было считать

Спасибо, попробывал, но видимого результата не дало.

Здравствуйте, Rumata, Вы писали:

Сейчас проверил еще раз и убедился что тормоза возникуют не только при добавлении нового елемента но так же и при изменинии любых атрибутов существующего элемента.

Здравствуйте, sss4372, Вы писали:

S>Возможно ли как то это победить?

код в студию!...
там и победим.

ну и эта... пример того, что вставляем в ячейку.
а то вдруг картинки прелоадить надо было...

Здравствуйте, marx paul


Код инициализации
Подзагрузка картинок происходит при их инициализации, так что здесь точно тормозов нет.
Я даже убирал все картинки и скорость оставалась та же.

var basket = document.getElementById("basket")

for(var j=0;j<fileCount;j++){
    clonedNode = fileNode.cloneNode(true);
    initFileElement(clonedNode,files[j]);
    basket.appendChild(clonedNode);    
    
    hashFiles[files[j].id] = files[j];
    
    for(var k=0,p=files[j].fileFormats.length;k<p;k++){
        clonedFormatNode = fileFormatNode.cloneNode(true);
        initFileFormat(clonedFormatNode,files[j],hashFormats[files[j].fileFormats[k].id],files[j].fileFormats[k].amount);
                    
        cartTbody = document.getElementById("cartTbody" + files[j].id);
        cartTbody.insertBefore(clonedFormatNode,cartTbody.childNodes[cartTbody.childNodes.length-1],files[j].fileFormats[k].amount);
    }
}

fileFormatNode и fileNode это шаблоны

//fileNode: элемент файл
function createFileElement(){    
    var divFile = document.createElement("div");    
    divFile.className = "PhotoItem";

    var table = document.createElement("table");    
    table.cellPadding = 0;
    table.cellSpacing = 0;
    table.border = 0; 
    var tbody = document.createElement("tbody");    

    var tr = document.createElement("tr");
    var tdView = document.createElement("td");
    tdView.width = 100;
    createViewArea(tdView); - здесь картинка в еще одной таблице

    var tdSpace = document.createElement("td");
    tdSpace.width = 5;
    
    var tdFormats = document.createElement("td");
    tdFormats.vAlign = "top";
    createFormatFields(tdFormats); - здесь таблица в которую помещаются элементы форматы

    divFile.appendChild(table);
    table.appendChild(tbody);
    tbody.appendChild(tr);
    tr.appendChild(tdView);
    tr.appendChild(tdSpace);
    tr.appendChild(tdFormats);
    
    return divFile;
}

//fileFormatNode: элемент формат
function createFileFormat(){
    cartTr = document.createElement("tr");
    var cartTdInput = document.createElement("td");
    
    var input = document.createElement("input");
    input.type = "text"; 
    input.size = 3;
    input.maxlength = "2";
    input.style.width = "26px";
    
    var cartTdSelect = document.createElement("td");    
    var select = document.createElement("select");
    select.style.width = "64px";
    
    var clonedOption, option = document.createElement("option");
    for (var i=0,n=formats.length;i<n;i++){
        clonedOption = option.cloneNode(false);
        clonedOption.setAttribute("value",formats[i].id);
        clonedOption.appendChild(document.createTextNode(formats[i].name));
        select.appendChild(clonedOption);
    }
    
    var cartTdImage = document.createElement("td");

    cartTr.appendChild(cartTdInput);
    cartTdInput.appendChild(document.createElement("img"));
    cartTdInput.appendChild(input);
    cartTdInput.appendChild(document.createElement("img"));
    cartTr.appendChild(cartTdSelect);
    cartTdSelect.appendChild(select);
    cartTr.appendChild(cartTdImage);
    cartTdImage.appendChild(document.createElement("img"));
    
    return cartTr;
}

обработка нажатия

function imgAddFormat_Click(id){
    var cartTbody = document.getElementById("cartTbody" + id);

    if (cartTbody.childNodes.length-1>=formats.length){
        document.getElementById("imgAddFormat" + id).style.display = "none";
    }    
    
    clonedFormatNode = fileFormatNode.cloneNode(true);
    initFileFormat(clonedFormatNode,hashFiles[id],hashFormats[1],1);
    
    // cartTbody - контейнер для элементов форматов в элементе файл
    cartTbody.insertBefore(clonedFormatNode,cartTbody.childNodes[cartTbody.childNodes.length-1]); // - здесь тормоза
    blnBasketChanged = true;
}

Очень любопытная статья по поводу скорости работы DOM: http://www.quirksmode.org/dom/innerhtml.html

У меня был опыт работы с таблицами и должен сказать, что скорость работы по сравнению с набором DIV'ов оставляет желать лучшего. С другой стороны, возможно, следует максимально точно и повсеместно "давать броузеру подсказки" в виде размеров ячеек, чтобы пересчитывать таблицу ему было легче. Любое изменение DOM влечёт за собой пересчёт (представление в браузере должно измениться).
С уважением,
Roman Hawk

Здравствуйте, romanhawk, Вы писали:

R>Очень любопытная статья по поводу скорости работы DOM: http://www.quirksmode.org/dom/innerhtml.html

R>У меня был опыт работы с таблицами и должен сказать, что скорость работы по сравнению с набором DIV'ов оставляет желать лучшего. С другой стороны, возможно, следует максимально точно и повсеместно "давать броузеру подсказки" в виде размеров ячеек, чтобы пересчитывать таблицу ему было легче. Любое изменение DOM влечёт за собой пересчёт (представление в браузере должно измениться).
R>С уважением,
R>Roman Hawk


Спасибо за статью, прочитал. Видно действительно лучше переделать на Div'ы