Атомарное обноление DOM?

Question

[Alex Pts]

Как можно атомарно выполнить несколько операция обновления DOM, чтобы промежуточные действия не отображались и не выводились на экране?


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

Answer 1

[egorinsk]

Делайте скролл страницы в самую последнюю очередь. DOM манипуляции в пределах одного JS-события обычно не вызывают перерисовки.

Comments

[Alex Pts]

Страница передвигается по оси X. В браузерах на ПК не видно, а вот на мобильных устройствах это заметно, на несколько мс видно (дергается или картинка мигает быстро)

[egorinsk]

А если сделать так: обновить DOM, потом сделать setTimeout(scroll..., 1); чтобы скролл был в отдельном событии?

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

[egorinsk]

А, еще, вспомнил! На айпаде есть баг:

Если вы делаете скроллинг через body.scrollTop/scrollLeft (или через jQuery или через плагины к jQuery), то картинка трясется и прыгает, если через Window.scrollTo() то все ок.

[Alex Pts]

Скроллинга не происходит, происходит перемещение контейнера с помощью css translate3D. Дело в том, что при если первый елемент убрать из DOM то все смещается как раз на его высоты и использование таймаута тут ничего не даст, если мы вместе 2 операции без перерисовки не можем выполнить, то таймаут поставит второе действие в конец очереди, и оно выполнится 1+ как только основной поток javascript освободится. Про фрагмент очень похоже на правду. Мы клонируем весь контейнер в нем все меняем и заменяем измененный клон, на оригинальный узел DOM, но обработчики событий при этом отваливаются при этом отваливаются (либо я что-то неверно делаю)