Yup. Anything layout-related could be costly to read, and could force a layout to occur if modified since the last read (even within the same synchronous javascript code). Most things are not deferred until the next layout pass, which is one of the reasons virtual DOM got popular: it batches changes for you.
Properties are to allow dynamic actions for what appear to be simple variable accesses. They don't magically make those as fast as accessing a variable; they are a syntactic convenience to allow assignment and using the value implicitly rather than having to invoke a function/method. They could have cached the value and kept a dirty flag, but then everything that affected the value would have to be sure to mark it as dirty or result in subtle bugs.
The biggest performance bomb you can have in your code is a loop that does something like
for (...) {
el.style.height = `${something}px`;
whatever.value = el.style.offsetHeight;
}
This forces the browser to recalculate layout multiple times in a single frame. Separating layout changing code from measurement code will help a lot here (most frameworks out there have solved this so we don't have to be too concerned about it though).
Sometimes I think about this: using readonly is generally recommended at the architectural level. But it's technically difficult to choose the right trade-off when you need to remove that abstraction. The reason readonly is recommended is because it's a form of encapsulation, and using it means you're promising immutability for that state.
Sometimes you break down abstractions to reduce actual costs, but that can end up being bad for the overall structure. So you say you're breaking it down because the cost ruined the perceived performance, but it's always difficult to decide whether it's better to keep the overall beauty or to break the abstraction locally.
Speed and user UX are important, but if it's a screen the user is constantly watching, you might remove the abstraction. However, if it's something like a waiting screen after payment, you'd probably keep it. In the end, what matters is the user flow
Yup. Anything layout-related could be costly to read, and could force a layout to occur if modified since the last read (even within the same synchronous javascript code). Most things are not deferred until the next layout pass, which is one of the reasons virtual DOM got popular: it batches changes for you.
Properties are to allow dynamic actions for what appear to be simple variable accesses. They don't magically make those as fast as accessing a variable; they are a syntactic convenience to allow assignment and using the value implicitly rather than having to invoke a function/method. They could have cached the value and kept a dirty flag, but then everything that affected the value would have to be sure to mark it as dirty or result in subtle bugs.
The biggest performance bomb you can have in your code is a loop that does something like
This forces the browser to recalculate layout multiple times in a single frame. Separating layout changing code from measurement code will help a lot here (most frameworks out there have solved this so we don't have to be too concerned about it though).This is true, but a much more common reason is that you have a self growing textarea and Firefox didn't support field-sizing: content until recently.
Sometimes I think about this: using readonly is generally recommended at the architectural level. But it's technically difficult to choose the right trade-off when you need to remove that abstraction. The reason readonly is recommended is because it's a form of encapsulation, and using it means you're promising immutability for that state. Sometimes you break down abstractions to reduce actual costs, but that can end up being bad for the overall structure. So you say you're breaking it down because the cost ruined the perceived performance, but it's always difficult to decide whether it's better to keep the overall beauty or to break the abstraction locally.
Speed and user UX are important, but if it's a screen the user is constantly watching, you might remove the abstraction. However, if it's something like a waiting screen after payment, you'd probably keep it. In the end, what matters is the user flow
Afaik let in JavaScript also has a sizable penalty too, if not quite as bad as const. Var on and on.
Let and const have a "temporal dead zone" before initialisation that distinguishes them from var, which is just undefined:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
Runtime TDZ checks can be performance issues:
https://vincentrolfs.dev/blog/ts-var