problemas de desempenho IE6 com adição de className em vários elementos (jQuery tableHover plugin)

Question

Em uma gravação aplicação I que usa uma tabela HTML grande de números o projeto exige que o linha e coluna da célula pairou será destacado.

Eu desenvolvo todo o JS para este projeto usando jQuery 1.3.x, e eu achei o tableHover plugin que faz exatamente o que eu preciso.

Mas:

no IE6 o desempenho deste plugin cai como o número de elementos celulares subir a um ponto onde a página é quase indiferente.

Eu pensei que os problemas reside no plugin e eu realmente reescreveu é toda a funcionalidade a partir do zero, apenas para descobrir que eu tenho os mesmos problemas de desempenho.

Depois de depuração do código agora eu sei que a seleção de uma grande quantidade de elementos mais aplicando className ( jQuery.addClass () ) é extremamente lento no IE6.

Eu tentei usar jQuery.css () em vez apenas com background-color , o desempenho é melhor, mas novamente, quando o número de células da tabela subir o desempenho cai para um estado inutilizável, e em todos os outros navegadores o desempenho de jQuery.css () é o caminho mais lento do que jQuery.addClass () .

O principal problema aqui é que não há nenhum pai comum a uma coluna de tabela, por isso, a fim de estilo de uma coluna de um precisa para atravessar a tabela inteira, selecione cada linha e, em seguida, encontrar o direito de nth-child td . meu código jQuery para este parece assim:

//col_num is the current td element
//table is the parent table    
var col_num = cur_cell.prevAll().length + 1;
var this_col = $('tr td:nth-child(' + col_num + ')', table);

Eu não vou colar meu código inteiro aqui, porque isso é irrelevante para a questão. A única resposta que eu estou procurando é: Existe um método conhecido para fazer o que precisa em uma margem melhor desempenho? Eu não estou à procura de "Chrome" velocidade de desempenho, apenas algo mais rápido do que "não responsivo".

Thnaks

Tom.

Answer 1

Eu tenho lidado com desempenho jquery complexo em tabelas muito grandes em IE6 . Aqui está o que eu posso lhe oferecer em termos de ajuda:

• codificação tanto dados no html possível. por exemplo, codificar o número e col números de linha na classe TDs ou atributo name
• adicionar um ouvinte do mouse para o toda mesa, e, em seguida, usar event.target para obter o TDs
• analisar a localização da célula que estão pairando ponto forma # 1
• novamente, você provavelmente terá que adicionar uma tonelada de classes, mas tem uma classe para cada coluna e cada linha, de que maneira você pode selecionar todo tanto linha e coluna inteira com 2 seletores de classe, e adicionar css para eles
• cache de, tanto quanto possível . Se o usuário se move de uma célula para outra, verifique se o seu em uma linha você já destacado. Acho que isso é praticamente garantido para acontecer, então você terá 1/2 das operações selector
• colunas de cache inteiras que você selecionou, para que você não tem que selecionar duas vezes, mesmo para as linhas
• confira esta resposta plug-in eu escrevi, você pode querer usá-lo.
• Além disso, há outra post que escrevi sobre o tema de escrever plugins rápido jQuery.

Answer 2

Reduzir o número de alterações CLASSNAME e reembolsos posteriores, deixando motor CSS correspondente do navegador fazer o trabalho para você. Por exemplo, para uma tabela 3x3:

<style type="text/css">
    .sel-row-0 .row-0 td, .sel-row-1 .row-1 td, .sel-row-2 .row-2 td,
    .sel-col-0 .col-0, .sel-col-1 .col-1, .sel-col-1 .col-1 {
        background: red;
    }
</style>

<table id="foo">
    <tr class="row-0">
        <td class="col-0">a</td>
        <td class="col-1">b</td>
        <td class="col-2">c</td>
    </tr>
    <tr class="row-1">
        <td class="col-0">d</td>
        <td class="col-1">e</td>
        <td class="col-2">f</td>
    </tr>
    <tr class="row-2">
        <td class="col-0">g</td>
        <td class="col-1">h</td>
        <td class="col-2">i</td>
    </tr>
</table>

Agora tudo que você precisa fazer é set className na mesa exterior para "sel-row- (num) sel-COL (num)" e todas as células irá atualizar ao mesmo tempo, que será muito mais rápido do que looping e definindo classes.

Para um número muito grande de cols / linhas a quantidade de dados na folha de estilo pode se tornar inviável. Você pode contornar isso um pouco por alterar dinamicamente as regras na folha de estilo através da lista document.styleSheets, mas isso leva algum trabalho cross-browser que jQuery não vai ajudá-lo. Ou para uma tabela com, digamos, muitas linhas, mas algumas colunas, você pode colocar a classe-linha selecionada diretamente sobre a linha, e só fazer a coluna destacando desta forma, que ainda é apenas 2-3 mudanças de classe.

(Seria bom se pudéssemos usar o seletor CSS3 nth-child como você fez no seletor jQuery, mas o suporte navegador não está lá ainda.)

Answer 3

Gostaria de saber se na busca de uma melhor capacidade de resposta do jQuery, você não está vendo a floresta para as árvores?

Por que você não incluir um elemento <colgroup> no topo da sua mesa (explícita ou, se necessário, adicionando-o dinamicamente com jQuery) e, em seguida, atribuir um valor cor de fundo para a coluna correspondente índice da célula selecionada?

IE6 suporta o elemento <colgroup>, mas apenas em propriedades limitadas. No entanto, background-color é um daqueles suportados pelo que esta deve ver uma melhoria significativa em seu desempenho.

Answer 4

Eu deveria ter notado isso - eu sou um melhor desenvolvedor CSS / HTML muito do que um Javascript um, eu tentei cada método não-script Sei antes de cavar em JS

.

Na verdade, comecei a partir de colgroup , eu até usá-lo para larguras de coluna na mesma tabela, mas o colgroup e col elementos são set visualmente por trás dos elementos de tabela, por isso, se tbody , tr , td ou qualquer outro elemento na tabela tem um fundo (que no meu caso, muitos deles tem), colgroup não vai mostrar ao longo destes elementos, e não respondeu ao posicionamento ou qualquer outra manipulação CSS avançado tentei aplicar nele.