Таблица со стеком. Нужен совет
 

Всем привет, вобщем делаю html таблицу с функцией стека, т.е например кол-во строк в таблице 10, по мере заполнения таблицы Ajax`ом лишнии строки добавляются в буфер, а когда при удалении строк из таблицы их становится < 10, они подгружаются из буфера. Алгоритм прост как 3 копейки. Меня интересует следующее, у меня есть два варианта реализации буфера для стека. Посоветуйте выбрать более оптимальный в плане производительности.

1. Буфер из массива js, удаляем из таблицы строку > 10 и вставляем в массив методам unshift(), или вытаскиваем из буфера методом shift() если строк < 10 и вставляем в таблицу. Минус такого стека постоянная вставка и удаление элементов из дерева DOM плюс еще пробежка в цикле для создания ячеек и заполнения их. Можно конечно с documentFragment по играть...но мне кажется лучше не будет.

2. Буфер состоит из строк в той же таблице со свойством display : none. Плюс такого стека, просто меняем свойство чтобы показать или спрятать строку в буфер. Минусы, таблица может разрастись до больших размеров, хотя видимая часть только 10 строк, остальные display : none но всетаки это DOM, собственно хотелось бы узнать строки со свойством display : none влияют как нибудь на производительность если их много?
Посоветуйте пожалуйста какой вариант выбрать. Спасибо.

simple,
Почему чисто <tr style="display:none" не сделать ?

Cлабо, добавка - уборка скриптом - сильнее

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

Я делаю примерно так:

<style>
  TR[hide] { display : none; }
</style>
row.setAttribute('hide',''); // Спрятать.
row.removeAttribute('hide'); //Показать.

simple,
Быстрее парсицо Dom в css по классу, классов может быть много(через пробел)
<div class="a1 a2 a3"