IE, Javascript и Reflow

Question

У меня есть функция javascript, которая изменяет отображение css ('block', 'none') большого количества узлов dom (> 5000). Я пытаюсь сделать это как можно быстрее.

Будет ли IE прерывать JavaScript для перекомпоновки и рисования экрана, или он будет ждать, пока механизм JavaScript вернет управление браузеру? Я хочу избежать дополнительной работы браузера, пока все узлы не будут настроены на отображение.

Я заметил, что в методе JQuery show () операции DOM заключены в тесный цикл с комментарием

// Установить отображение элементов во втором цикле
// чтобы избежать постоянного перекомпоновки

(http://code.google.com/p/jqueryjs/source/browse/trunk/jquery/src/fx.js строка 51)

Спасибо

Джеймс

Answer 1

Используйте CSS, чтобы вместо этого показывать и скрывать элементы, изменяя имя класса родительского элемента. Некоторые тесты, которые я провел некоторое время назад, показали, что это примерно в десять раз быстрее, чем установка свойства display для каждого элемента. Поскольку вы изменяете только один атрибут, он перекомпоновывается только один раз.

Пример:

<style>
.State1 .InitiallyHidden { display: none; }
.State2 .InitiallyShown { display: none; }
</style>

<script>
function flip() {
   var o = document.getElementById('Parent');
   o.className = o.className = 'State1' ? 'State2' : 'State1';
}
</script>

<input type="button" value="flip" onclick="flip();" />

<div id="Parent" class="State1">
   <div class="InitiallyHidden">One</div>
   <div class="InitiallyShown">Two</div>
   <div class="InitiallyHidden">Three</div>
   <div class="InitiallyShown">Four</div>
</div>

Answer 2

Браузеры будут переформатировать страницу, когда JS изменяет каждый элемент. Как вы предлагаете, лучше сохранить изменение дисплея до конца. Это также будет казаться пользователю более плавным и быстрым (даже если это не так).

Я бы:

1. Клонируйте узел, который упаковывает узлы, которые вы хотите обработать.
2. Выполнить обработку на клонированных дочерних узлах.
3. Заменить оригинальный узел клоном.

Если обработка занимает много времени (более 0,5 секунды), рассмотрите возможность установки чего-либо на дисплее, чтобы пользователь знал, что что-то происходит. Медленное постепенное затухание исходного содержимого до непрозрачности около 50% - это простой способ.

Answer 3

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