What is the most efficient way to modify DOM elements and limit overflow?

Question

When working with a very dynamic interface (I think, a one-page application) with potentially large JS libraries, look at templates, validation, ajax, animation, etc ... what strategies will help minimize or reduce the time spent by the browser on paying?

For example, we know that there are many ways to resize a DIV, but are there any methods that should be avoided (in terms of reflection) and how do the results differ from one another between browsers?

Here is a concrete example:

Given a simple example of three different ways to control the size of a DIV when resizing a window, which one should be used to minimize transitions?

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

Your best bet is to avoid modifying DOM elements whenever possible. From time to time, you can prevent overflows altogether by sticking to CSS properties or, if necessary, using CSS ' transform so that the element itself is not affected, but instead the visual state just changed. Paul Lewis and Paul Ireland discuss in detail why this happens in this article .

This approach will not work in all cases, because sometimes you need to change the actual DOM element, but for many animations, etc. transform provides better performance.

---

If your operations require recharging, you can minimize the impact that it has on:

• Keeping the DOM Depth Small
• Saving a simple CSS selector (and storing complex variables in JavaScript)
• Avoid inline styles
• Avoiding tables for layout
• JavaScript Prevention Possible

Nicole Sullivan posted a good article on this subject, which is devoted to more detailed information about rescheduling and reviewing the browser.

If you are actually changing the DOM, not the DOM properties, it is best to do this in large chunks and not in smaller ones as suggested by the Stack Overflow post .

---

In the above example, the second method is the best as it uses CSS properties without the need for JavaScript. Browsers are very good at rendering elements whose dimensions and position are determined solely by CSS. However, it is not always possible to get an element in which we need to have pure CSS.

The worst method to date is the third, because jQuery animation is very slow to start with, but it works when you resize it, forces the animated stack on top of one another so that it lags behind it if you change its size at all. You can prevent this by setting a timeout with a boolean value to check if it has already been started or, more preferably, not use jQuery animations for this, but use jQuery .css() instead, as the resize function so often fires that it will look animated anyway.