Como filtrar uma tabela de inicialização muito grande usando Javascript puro

Criei uma tabela grande no bootstrap, com cerca de 5.000 linhas x 10 colunas, e preciso filtrar a tabela para atributos específicos, rapidamente, usando apenas JavaScript. A tabela possui uma coluna de identificação e uma coluna de atributo, ou seja,

id | attr | ...
---------------
2  |  X   | ...
3  |  Y   | ...
4  |  X   | ...

Para acelerar o processo de filtragem, criei uma tabela de hashtable que mapeia os atributos de volta aos IDs da coluna. Então, por exemplo, eu tenho um mapeamento:

getRowIds["X"] = [2,4]

O usuário pode inserir o atributo "X" em uma caixa de pesquisa, a hashtable pesquisa as linhas correspondentes que contêm "X" (2 e 4 neste caso) e, em seguida, chama as seguintes funções por meio de uma operação de mapa:

this.hideRow = function(id) {
    document.getElementById(id).style.display="none"
}

this.showRow = function(id) {
    document.getElementById(id).style.display=""
}

Esse processo ainda é bastante lento, pois o usuário pode selecionar vários atributos (por exemplo, X, Y).

Existe uma maneira mais rápida de ocultar as linhas?

Seria mais rápido se, de alguma forma, eu pudesse desanexar a tabela do DOM, fazer as alterações e reconectá-la? Como faço isso em javascript?

Existem outras maneiras mais eficientes / inteligentes de fazer a filtragem?

Obrigado :)

questionAnswers(6)

yourAnswerToTheQuestion