Сведение к минимуму переформатирования/повторного рендеринга в браузере

В настоящее время я работаю над кодом для своей магистерской диссертации. У меня есть несколько вопросов относительно эффективных манипуляций с DOM.

1) Учтите, что вам пришлось выполнить кучу манипуляций с DOM на нескольких узлах, которые находятся близко друг к другу. Имеет ли смысл сделать глубокую копию самого верхнего parentNode всех этих узлов (и сохранить его вне DOM), выполнить манипуляции с этим поддеревом, а затем поменять его местами с его аналогом в DOM. Сведет ли это к минимуму перекомпоновку/повторный рендеринг браузера?

2) Является ли изменение innerHTML узла более/менее эффективным, чем управление его поддеревом?

3) Есть ли еще какой-нибудь хороший совет, который вы можете дать мне по эффективному манипулированию DOM в ванильном javaScript (без каких-либо фреймворков/библиотек)?

Заранее спасибо!


javascript optimization dom reflow
person Skaryon    schedule 05.12.2014    source источник
comment
Какие тесты вы разработали и внедрили?   -  person RobG    schedule 05.12.2014
comment
Не так далеко. Я открыт для предложений :) Редактировать: Ну, я реализовал несколько простых тестов для вышеуказанных случаев (добавляя тонны подузлов и оценивая их с помощью инструментов chrome dev), но я еще не мог решить.   -  person Skaryon    schedule 05.12.2014

Ответы (2)


arrow_upward
1
arrow_downward

Самое важное, что нужно сделать, чтобы предотвратить чрезмерную визуализацию в браузере, — убедиться, что вы группируете операции чтения и записи.

Если вам нужно что-то сделать с несколькими узлами, и нужно что-то с них прочитать, то следует сначала прочитать со всех узлов, а потом писать на все.

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

Поэтому сначала выберите все элементы, кэшируйте информацию, которую нужно получить, а затем установите на всех них.

person Etai    schedule 05.12.2014

arrow_upward
0
arrow_downward

1) Учтите, что вам пришлось выполнить кучу манипуляций с DOM на нескольких узлах, которые находятся близко друг к другу. Имеет ли смысл сделать глубокую копию самого верхнего parentNode всех этих узлов (и сохранить его вне DOM), выполнить манипуляции с этим поддеревом, а затем поменять его местами с его аналогом в DOM. Сведет ли это к минимуму перекомпоновку/повторный рендеринг браузера?

Да - сделать изменения на контрагенте

2) Является ли изменение innerHTML узла более/менее эффективным, чем управление его поддеревом?

Более производительный - потому что вы выполняете манипуляции со строками вне дома.

3) Есть ли еще какой-нибудь хороший совет, который вы можете дать мне по эффективному манипулированию DOM в ванильном javaScript (без каких-либо фреймворков/библиотек)?

document.createDocumentFragment() это лучший полностью управляемый виртуальный дом

person Community    schedule 28.04.2019