Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

I was thinking of how to improve DOM updates. One of ideas is to add Element.update() method:

   Element.update(function(updateCtx) {
      updateCtx.setInnerText(this, "new text");
      updateCtx.setAttribute(this, "title", "new title");
      ...      
   });
This has two benefits: 1) transactional update, 2) for contenteditable scenarios it can group DOM mutations in atomic undo-able action.

But I've discarded that in lieu of Element.patch(vDOM):

   Element.patch(<div title="new title">new text</div>);
as the later is more humanistic I would say.


My feeling is that the browser already does this in that it considers all DOM apis within a single 16ms (requestAnimationFrame?) as a single transaction.

The trouble for browsers, is if certain DOM apis have a dependency on the layout of another element. My naive and unvalidated understanding:

    // Good: These DOM calls in a single frame will trigger layout-paint-composite (1 loop)
    - e.style.backgroundColor = "red";
    - e.style.width = "20px";
    - e.style.transform = "translateX(10px);

    // Bad: These DOM calls in a single frame will trigger layout-?-layout-paint-composite (2 loops)
    - ...
    - e.style.height = otherElement.offsetWidth + 200 + "px"
    - ...
The reason being that without knowing the width of "otherElement", there's no way for the js runtime to execute the "e.style.height" line and execution needs to be paused while layout occurs.

If you're looking for a transactional syntax (similar to what you've proposed) that also addresses this though, fastdom looks like a good option:

    fastdom.mutate(() => { element.style.width = "20px" });
I'm not a browser expert though so if I"m misunderstanding something, would love to know.


I actually think the former example is more clear. It's a bit verbose but every part is simple. The second example is very "magic", it takes a lot of thought to understand




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: