Most performant way to transform/move large number of DOM elements

Question

I built up a tree table structure for AngularJS (with Angular Material) some time ago.

My target was to make it work on large screens only (1280 and higher) but right now I want to update it and make it work on smaller devices (mostly tablets) without limiting data. Because of performance, I want to keep HTML as simple as possible (tree table can have 1000+ rows so creating more complicated HTML for the single row will elongate the time needed to append and render table row (rows are dynamic so it's not only about initial rendering)).

I came up with idea that I will keep the "fixed" part with the first cell which contains a name and scroll the second part which contains all metrics and will be scrolled synchronically.

Current HTML of single row:

My idea was to use touchmove event on parent container (wrapping the whole tree and bind as a directive) and check when touchmove starts over the metrics section then calculate the value which I should move metrics. And that part works fine. The problem starts when I want to apply the offset on the .tb-metrics > .

My first try was to use jQuery:

function moveMetrics( offset ) {
  var ofx = offset < 0 ? (offset < -getMetricsScrollWidth() ? -getMetricsScrollWidth() : offset) : 0;
  $('.tb-metrics').children().css('transform', 'translateX(' + ofx + 'px)');

  /*...*/

}

Unfortunately, this solution is quite slow when the table contains more rows (I cannot cache rows because they are dynamic).

In my second attempt, a tried to avoid as much DOM manipulation as I can. To achieve that I decided to add

user_2261073 · Answer

I have had similar problems in the past with really big tables. So, leaving the UX side of things outside of the equation - in order to achieve what you are aiming for could be the following. Instead of keeping the first tables fixed and moving all the rest, maybe you could try the other way around. Aka, keep the table inside an overflown container to allow horizontal scrolling and move using translateY the first column table cells when scrolling vertically.

In the way I am describing, you can retrieve the max width of the first table cell (or even better, set a fixed width), absolutely position each cell on the left - careful though, the relative container should be OUTSIDE the overflown table, set a padding-left on the second table cell of each row, equal to the first table-cell and then, when scrolling vertically, add a negative translateY value. The selector then should be easy to access '.layout-row .table-cell:first-child'.

Also for minor optimizing, instead of using .css() try using .attr('style', value) instead. Also, I read that you have dynamic content and can't cache it, BUT, maybe you should consider caching once every time you manipulate the DOM. Cached selected elements are still better than calculating the selector in every scroll/touchmove event.

Last but not least, you could also add somekind of debouncing technique so that the scrolling does not occur on every scroll frame, but maybe once every 10 frames - it would still be invisible to the eye, or in any case better than bottle-necking the browser with all these repaint events.

user_7059709 · Answer

I would suggest you use lazy loading. please note that you have 4 options in lazy loading: There are four common ways of implementing the lazy load design pattern: lazy initialization; a virtual proxy; a ghost, and a value holder. Each has its own advantages and disadvantages (link).

Good luck

user_8816816 · Answer

So I'm no expert myself but I do have some ideas that I think are worth mentioning. If I'm understanding correctly, the problem is that this project needs an increasing number of HTML elements, which would continually decrease performance

Here are 3 js concepts that I think would help you

*Dynamically creating the html element:

let div = document.createElement('div');

*Dynamically creating the attributes you're going to use for the elements, and dynamically being able to assign such attributes

function attributeSetter(atr){
   div.setAttribute('class', atr)
}

That way you can call the function wherever you need it, and give it whatever class name you want to give it dynamically. Furthermore, you can use the div element as many times as you want

final concept. You can also dynamically add pre-made classes, assuming that they're already pre-defined in css, like this.

div.classList.add("my-class-name")

One more concept that might come in handy, is de-structuring

let myClasses = ['flex-10', 'flex-7', 'flex-4', 'flex-9'] //etc
let [flex10, flex7, flex4, flex9] = myClasses;

This will turn all those strings into variables that you can easily iterate through and dynamically add them to your attributeSetter function, like this:

attributeSetter(flex10)

Wherever you need it. I don't know if that helps, or if that answered your question, but at least some ideas. Good luck :)

Most performant way to transform/move large number of DOM elements

3 Answers