This allows the browser to delay all style, layout, and paint work on attached DOM, and then also spread that work across multiple frames during a commit, reducing jank for the unlocked portions of the page.
If you synchronously swap a large portion of DOM, style, layout, and paint will likely blow your frame budget.
Either I don't understand double buffering very well (not unlikely) or I don't know what you mean by "frame budget". Wouldn't swapping one buffer for the other be faster than most or all of the computations going into calculating that background buffer and easily doable in a single frame?
Normal double-buffering involves doing something trivial at the moment of buffer-swap, like changing pointer or at most doing large-ish memory copy. Double buffering DOM would either not solve the problem (in the case of doing the layout computations in background and then swapping already layed out DOM) or would involve doing all the layout computations at once when the swap happens (with the implication of this being mostly equivalent to loading new page and thus slow and in many cases too slow to happen at 30, 60 or whatever Hz)
That's essentially what is already done, without the browser's assistance, with "virtual DOM"-style libraries. The point of this work is to obviate the need for a virtual DOM.
Interesting. My, perhaps wrong, visualization of the janking effect, without the display update, concerns resizing, or showing, a column or pane in a web app. During the resize, the content in both frames are not updated until the resize is complete under certain (most?) conditions.
"If an undue delay is likely to be caused, the work already completed is processed and the update phase yields to other update phases for unlocked content."
My interpretation for a pane/column resize or hidden to visible operation: display-locking reduces jank if I could operate on these elements with the display lock tools. This jank reduction produces more fluid updates in elements not affected by the lock.
Question: If sub elements have complicated draw/render cycles, how will the interplay of locks at different layers affect the result? Composing objects with libraries that use these locks makes me wonder about this issue (or if I make sub-components myself).
This reminds me of the time many years ago when we worked on a VB app that had to resort to the sledgehammer of Win32's LockWindowUpdate API call to do some hefty calculations and not "freeze" the UI even though we were, in fact, freezing the UI.
>> No, this is about increasing performance by taking elements out of the slow DOM update cycle
The question was not about the intent of the feature, but a possible use case that may not have been intended. A more specific reason for the "No" could be more informative.
The doc answers the question, so this kind of reaction boils down to "I don't want to read the doc, I'm not willing to take answers at face value, can you please write a concise summary of the doc that I will take at face value?"
Interesting idea - though I think any kind of script API can be circumvented by ad blockers pretty easily: They can always inject their own script before anything from the page is executed and manipulate the API functions or replace them with "do nothing" implementations.
Has there been substantial discussion about this feature? Neither of the two links provided lead to deep discussions about this. It doesn't seem like this is related to any agreed upon standards process.
As far as I can tell, this is being presented as a change to the programming model which will be undertaken unilaterally. Are we back to the days where one browser gets to decide how the web works, and everyone else can catch up if they like?
Wow! When I first learned web development way back when, I was surprised that something like HyperCard's lock screen didn't exist/wasn't possible. Being able to do this on an element level is a huge improvement over that. This is great.
For someone who doesn’t follow lower level browser dev that closely, this seems like an optimization pretty specifically for a react style ‘nested redraws’ use case. Is this at all correct?
Basically "<ul id='foo'><li>...</li></ul>" && #foo.append( ...li... ) may cause a redraw, recalc, reflow, of layout + styles for each LI you add to the UL, as well as the rest of the dom containing the UL.
However if you can do: "BEGIN TRANSACTION; ...#foo.append(...)...; END TRANSACTION;" it gives you a mechanism to "freeze" all or some of the display (think of it as a subset double-buffer), and "blit" the changed dom to the UI when you're done (with the possibility of: " && CONTINUE TRANSACTION".
Imagine a simple list of search results with alternating row colors (white / grey backgrounds) specified by css (nth-child %2 == 0).
If you prepend elements, instead of appending elements it might cause all elements to change color and re-render, on each insertion.
If you append elements instead then it's likely a more efficient on an individual element basis than prepending, but if you had the ability to "lock" the affected display area until you're done with your for-loop, then the browser can avoid updating the area at all until the "COMMIT" call (multiple actions, with a single commit resolution at the end).
Think of it as "batch these dom updates..." Git/SVN multi-file commits vs CVS commits (single-file).
I would actually say that non-React-style code would benefit even more. Suppose the user clicked a different sort tab on a table, and the code is busily removing and re-inserting elements in the dom, which the browser attempts to layout and display at the same time, leading to a lot of wasted calculations and visible "jank".
Unike formal languages, human language doesn't evolve via RFCs or ItIs.
(OK, formal languages don't, really, either. But they do tend to stick stakes in the ground via those mechanisms, for which most human languages don't have any analogous concept.)
I think what they're describing is actually a glitch in the technical sense -- an untended output state caused by not being able to change all inputs exactly at the same time
I've heard "jank" used almost always when referring to visual stutter caused by mass-style changes, both in my current role at Atlassian as well as Microsoft. I think it's pretty standard.
45 comments
[ 3.0 ms ] story [ 99.0 ms ] threadIf you synchronously swap a large portion of DOM, style, layout, and paint will likely blow your frame budget.
What am I missing?
It breaks already attached event handlers, undo buffers for input elements, and any existing references you have to DOM nodes.
TD;DR: https://github.com/chrishtr/display-locking/blob/master/READ...
"If an undue delay is likely to be caused, the work already completed is processed and the update phase yields to other update phases for unlocked content."
My interpretation for a pane/column resize or hidden to visible operation: display-locking reduces jank if I could operate on these elements with the display lock tools. This jank reduction produces more fluid updates in elements not affected by the lock.
Question: If sub elements have complicated draw/render cycles, how will the interplay of locks at different layers affect the result? Composing objects with libraries that use these locks makes me wonder about this issue (or if I make sub-components myself).
https://docs.microsoft.com/en-us/windows/desktop/api/winuser...
The question was not about the intent of the feature, but a possible use case that may not have been intended. A more specific reason for the "No" could be more informative.
As far as I can tell, this is being presented as a change to the programming model which will be undertaken unilaterally. Are we back to the days where one browser gets to decide how the web works, and everyone else can catch up if they like?
https://www.chromium.org/blink/launching-features
However if you can do: "BEGIN TRANSACTION; ...#foo.append(...)...; END TRANSACTION;" it gives you a mechanism to "freeze" all or some of the display (think of it as a subset double-buffer), and "blit" the changed dom to the UI when you're done (with the possibility of: " && CONTINUE TRANSACTION".
Imagine a simple list of search results with alternating row colors (white / grey backgrounds) specified by css (nth-child %2 == 0).
If you prepend elements, instead of appending elements it might cause all elements to change color and re-render, on each insertion.
If you append elements instead then it's likely a more efficient on an individual element basis than prepending, but if you had the ability to "lock" the affected display area until you're done with your for-loop, then the browser can avoid updating the area at all until the "COMMIT" call (multiple actions, with a single commit resolution at the end).
Think of it as "batch these dom updates..." Git/SVN multi-file commits vs CVS commits (single-file).
[0] https://developer.mozilla.org/en-US/docs/Web/CSS/contain
(Or set inner html? :-)
(OK, formal languages don't, really, either. But they do tend to stick stakes in the ground via those mechanisms, for which most human languages don't have any analogous concept.)
https://github.com/chrishtr/display-locking/blob/master/expl...
Is this a technical term?
https://en.wiktionary.org/wiki/jank