Задержка рендеринга элемента dom при изменении свойств

В настоящее время я сталкиваюсь с проблемой производительности при одновременном обновлении свойств на множестве элементов dom. Кажется, что каждый раз, когда я изменяю свойство, элемент dom получает повторную визуализацию. В любом случае, я могу отложить рендеринг элементов до тех пор, пока все мои обновления не произойдут? Кажется, что в FF 3 & 3.5 намного медленнее, чем IE 7 & 8, который идет вразрез с тем, что я ожидал.Задержка рендеринга элемента dom при изменении свойств

Пример того, что я делаю, приведен ниже.

var t; 

for (var i = 0; i < tiles.length; i++) { 
    t = tiles[i]; 
    t.width = '100'; 
    t.height = '100'; 
}

Проблема в том, что количество элементов в «плитки» может быть до 100 элементов дома. Именно на этом и показывают проблемы с производительностью.

источник

2009-09-08 Alex

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

Таким образом будет происходить только два reflows, один, когда вы скрыть плитки контейнера, и другим, когда вы закончите манипуляции элементов, и вы показать его снова.

источник

2009-09-08 05:16:20 CMS

Удивительный, я дам это. – Alex

Если речь идет о перепланировании, почему бы не использовать видимость: скрытый. Это сохранит элементы, где они есть. –

видимость: скрытая, похоже, не имеет такой же производительности. – Alex

Объявить отображение: нет для каждой плитки перед внесением изменений и отображения: заблокировать, когда все изменения будут выполнены.

источник

2009-09-08 05:10:34

Чтобы избежать вспышки, вы можете заменить родительский клон на себя, а затем работать с исходным родителем вне документа. Затем, когда вы закончите, вы можете заменить клона с оригиналом:

var parent = /* define parent here */; 
var clone = parent.cloneNode(true); 

parent.parentNode.replaceChild(clone, parent); 

/* Do stuff with parent and its childNodes... */ 

clone.parentNode.replaceChild(parent, clone);

источник

2009-09-08 06:19:49 James

Это кажется отличным способом достижения того, чего я хочу в этом вопросе. Http://stackoverflow.com/questions/16796105/avoiding-flicker-in-transition-involving-hiding-showing-and-translate3d. – oligofren

Почему бы просто не работать на клоне?Тогда у вас есть только одна операция «replaceChild». – jdmichal

Это, кажется, намного медленнее, в FF 3 & 3,5, чем IE 7 & 8, который идет против того, что я ожидал.

В настоящее время FF пересчитывает макет сразу после смены недвижимости. IE ждет, пока не будет перерисована страница, или вы получите доступ к свойству типа offsetWidth, которому необходимо знать новый макет. Это не всегда срабатывало правильно.

Подход CMS хорош. Если все ваши плитки имеют тот же размер, что и в примере, есть еще более быстрый способ (который также работает, если у плиток нет общего родителя). Просто дайте им все класс и переключать их все сразу с помощью CSS:

body.tiles100 .tile { width: 100px; height: 100px; } 

document.body.className= 'tiles100';

Если вы не знаете, предопределенный выбор возможных размеров заранее, вы должны написать правила таблицы стилей динамически, через list.styleSheets. Это немного боль, хотя интерфейс сценариев в IE не совсем соответствует стандарту DOM, используемому другими браузерами. Еще раз.

источник

2009-09-08 10:47:27 bobince

Задержка рендеринга элемента dom при изменении свойств

ответ

Смежные вопросы