Effects of floating and absolute positioning on page rendering speed

(Humorous aside: in general , the actual rendering performance differences between these two layouts can be ignored.) After all, in real development, human-or "development efficiency"-is the real bottleneck, the page's "rendering efficiency" compared to it completely insignificant. So don't hesitate to worry too much about such issues. ）

Back to the question itself. Because absolute positioning (and relative positioning and fixed positioning) creates new layout space, and usually creates new stacking space, I used to think that positioning would be more resource-intensive than floating. But in fact, because the positioning of the layout rules is far simpler than floating (floating can be said to be the most difficult part of the CSS layout), the browser in the process of positioning Riga easy.

On the one hand, the floating complex layout rules are doomed to be a tentative local reflow-type layout algorithm. The browser takes a lot of effort to handle it.

On the other hand, the layout of floating elements involves more factors. In the same layout space, all floating elements exist on the "floating layer" above the "static layer", and not only are multiple floating elements in the floating layer interacting with each other, but also the floating elements interact with the static layer. And each absolute positioning element is exclusive of a "positioning layer", the positioning layer above the static layer and floating layer, and no interaction with other "layers", the browser can easily manage it.

As a result, the browser makes it easier to calculate the layout of absolutely positioned elements and is easier to optimize when rendering. (This may also explain why IE6 's CSS layout bugs are mostly floating-related.) ）

Note: I do not have a detailed view of the specification, part of the answer may not be rigorous, part of the concept is based on my own understanding and summary. So let's just say that you know what you mean.

Effects of floating and absolute positioning on page rendering speed