0

I have a list with quite a few elements (each of them is a nested div). Each element has a custom onclick handler.

JS updates the list several times per second, this may result in:

  • adding or removing some elements
  • changing text in some elements
  • changing styles in some elements
  • changing height of some elements
  • etc.

Most of the time the update makes small changes to the majority of the elements.

To minimize reflows I should remove the list from DOM, make the changes and append it back. The problem I have with this approach is that when user selects some text, the next update will reset the selection. (And the next update comes within a second) If user clicks a button his click may fail to register if there was an update between mose_down and mouse_up.

I understand when the selection resets on text that have been changed. It makes sense. But with such approach any selection in this list will reset.

Is there any better way to do this? How would you implement such list?

This list is fully generated by JS. If I'm removing it from DOM anyway, is there any benefit to modifying it instead of recreating it from scratch? Creating it anew each time would require less code.

Air
  • 145
  • 6
  • 3
    *"Just use jquery"*? @DPC - how will jQuery solve the issue the OP asked about? – nnnnnn Jan 05 '15 at 07:42
  • If this is just one page, you might consider using `knockout.js`. It is quite good for simple data-binding like this, and easy to learn. Docs are good too. Since it is fully JS, this will most likely remove all of your manual dom manipulation – Andrew Jan 05 '15 at 08:06
  • @AndrewBacker I haven't used knockout.js before, am I right to understand that in terms of performance the result will be equivalent to not removing the root element before making changes? – Air Jan 05 '15 at 08:15
  • If the elements total length is generally longer than the page you are displaying then I'd suggest a custom lazy load rendering only the visible portion of the items. – Ali Naci Erdem Jan 05 '15 at 08:26
  • I assume it would be about the same, yes, but there are other tricks. Check this out: https://github.com/tkirda/big-scroll. Also, this should solve your state tracking issue. – Andrew Jan 05 '15 at 09:03

1 Answers1

0

This sounds like 2 way data binding, there are a couple of good custom solutions to data-binding answers on here: Handy stack link. Alternatively backbone.js and knockout.js have good techniques amongst quite a few other frameworks (angular ect).

Additionally, if you want to have a pop at it yourself (which I highly recommend to get a better understanding) you could use the proposed 'Object Observe' function. There's some handy documentation with some examples on how this works over at Mozilla. as well as The trusty HTML5 Rocks, which is a nice simple tutorial on using the new Object.Observe functionality, well worth a read.

Hope this helps!

Community
  • 1
  • 1
Jay
  • 1,033
  • 1
  • 18
  • 31
  • Not a data binding problem. I can track changes to the Model, that's not a problem. The problem is updating DOM. Doing it in one chunk breaks usability. Doing it in many chunks breaks performance. – Air Jan 05 '15 at 09:38
  • Ahh I see, well if you have to update all dom elements every seconds, then you could set up a list of elements to "ignore" when a user has focus? But then you have the problem of, if this info is being updated every second, should the user be allowed to update it? Since what he will put in may become out of date the moment he begins typing – Jay Jan 05 '15 at 10:56