Каков наиболее эффективный способ изменения элементов DOM и ограничения переполнения?

Question

При работе с очень динамичным пользовательским интерфейсом (думаю, приложение с одной страницей) с потенциально большими JS-библиотеками, просмотром шаблонов, валидацией, ajax, анимацией и т. Д. ... какие стратегии помогут минимизировать или сократить время, которое браузер тратит на оплавления?

Например, мы знаем, что существует множество способов изменения размера DIV, но есть ли методы, которых следует избегать (с точки зрения рефлекса) и как результаты отличаются друг от друга между браузерами?

Вот конкретный пример:

Учитывая простой пример 3-х различных способов контроля размера DIV при изменении размеров окна, какие из них должны быть использованы для минимизации перекомпоновки?

http://jsfiddle.net/xDaevax/v7ex7m6v/

//Method 1: Pure Javascript 
function resize(width, height) { 
    var target = document.getElementById("method1"); 
    target.setAttribute("style","width:" + width + "px"); 
    target.setAttribute("style", "height:" + height + "px"); 
    console.log("here"); 
} // end function 
window.onresize = function() { 
    var height = (window.innerHeight/4); 
    var width = (window.innerWidth/4); 
    console.log(height); 
    resize(height, width); 
} 
//Method #3 Jquery animate 
$(function() { 
    $(window).on("resize", function(e, data) { 
     $("#method3").animate({height: window.innerHeight/4, width: window.innerWidth/4}, 600) 
    }); 
}); 

Answer 1

Лучше всего, чтобы попытаться избежать изменения DOM элементов всякий раз, когда это возможно. Время от времени вы можете предотвратить оплату вообще, придерживаясь свойств CSS или, при необходимости, используя CSS 'transform s, чтобы сам элемент не был затронут, но вместо этого визуальное состояние просто изменилось. Пол Льюис и Пол Ирланд подробно расскажут, почему это происходит в this article.

Этот подход не будет работать во всех случаях, поскольку иногда требуется изменить фактический элемент DOM, но для многих анимаций и т. Д. transform s обеспечивает лучшую производительность.

---

Если ваши операции требуют переформатирования, вы можете свести к минимуму эффект он имеет по:

• Сохранение глубины DOM небольшой
• Сохранение вашего выбора CSS простой (и сохранения сложных из них переменной в JavaScript)
• избежать встроенных стилей
• Избежание таблицы для разметки
• Избежание JavaScri pt, когда это возможно

Николь Салливан разместил pretty good article по вопросу, относящемуся к более подробным сведениям о перепланировании и перекрашивании браузера.

Если вы действительно меняете свойства DOM, а не DOM, лучше всего делать это в больших кусках, а не в меньших размерах. like this Stack Overflow post предлагает.

---

В приведенном примере второй метод является лучшим, поскольку он использует свойства CSS без необходимости использования JavaScript. Браузеры очень хороши в рендеринге элементов, размеры и позиция которых определяется исключительно CSS. Однако, не всегда возможно получить элемент, где нам нужно быть с чистым CSS.

Худший метод на сегодняшний день является третьим, потому что анимация jQuery очень медленна, чтобы начать с нее, но при этом она срабатывает при изменении размера, что делает анимированные стопки друг на друга, поэтому он отстает от них, если вы измените размер его вообще ,Вы можете предотвратить это, установив тайм-аут с логическим значением, чтобы проверить, был ли он уже запущен или, более предпочтительно, не использовать анимацию jQuery для этого, но вместо этого используйте jQuery's .css(), поскольку функция изменения размера срабатывает так часто, что она будет смотреть анимированные в любом случае.