Guide on reflow and performance optimizations
- Dominant language
- Markdown
- Stars
- 11k
- Forks
- 23.2k
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 331
Description
### MDN URL
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
### What specific section or headline is this issue about?
getBoundingClientRect() triggers a reflow and performance issues
### What information was incorrect, unhelpful, or incomplete?
It was missing something that might be vital for people when debugging issues.
### What did you expect to see?
At least a remark or footnote about reflow.
Update from https://github.com/mdn/content/pull/27189#issuecomment-1830987218:
> Not sure that it's such a good idea to add this note. Reflow is quite complex and while it's true that it can be a perf bottleneck, such a note may make devs "fear" the APIs where they see that note and prefer less suitable APIs just because they didn't see the note there. For instance, all these getters and methods will only trigger a reflow when the box-model has been dirtied. Calling twice `getBoundingClientRect()` in a row, or even inside a `ResizeObserver` callback will not trigger a reflow. Also, some getters will only trigger a partial recalc, like `getComputedStyle(element).fontStyle` which only needs to walk up the tree from `element` to get the computed value, where `getComputedStyle(element).width` would need to recalculate the whole tree because it could be affected by siblings. So maybe if it did link to a complete tutorial on what is layout/reflow and what triggers it, that could be valuable, but even then, some are so unrelated that adding such a note to stuff like `CanvasRenderingContext2d#fillText()` sounds very weird.
### Do you have any supporting links, references, or citations?
https://toruskit.com/blog/how-to-get-element-bounds-without-reflow/
https://gist.github.com/paulirish/5d52fb081b3570c81e3a
### Do you have anything more you want to share?
_No response_
### MDN metadata
Page report details
* Folder: `en-us/web/api/element/getboundingclientrect`
* MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
* GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/element/getboundingclientrect/index.md
* Last commit: https://github.com/mdn/content/commit/bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
* Document last modified: 2023-04-07T05:55:26.000Z
Contributor guide
Assessment
This issue has not been assessed yet.