浮动和绝对定位对页面渲染速度的影响

(先说点题外话:在一般情况下,这两种布局方式的实际渲染性能差异是可以忽略的。毕竟在实际开发中,人力——或者说“开发效率”——才是真正的瓶颈,页面的“渲染效率”与之相比完全不值一提。所以不需要因为过多考虑此类问题而犹豫不决。)

回到问题本身。由于绝对定位(以及相对定位和固定定位)会创建新的布局空间,并且通常会创建新的堆叠空间,我曾以为定位会比浮动更加耗资源。但实事上,由于定位的布局规则要远远比浮动简单(浮动可以说是 CSS 布局中最难的部分),浏览器在处理定位时理加轻松。

一方面,浮动的种种复杂的布局规则注定了它是一种试探性局部 reflow 式的布局算法。浏览器需要花费很多精力来处理它。

另一方面,浮动元素的布局牵涉到的因素更多。在同一布局空间中,所有浮动元素均存在于“静态层”之上的“浮动层”,不仅浮动层中的多个浮动元素会相互影响,浮动元素与静态层也有互动。而每个绝对定位元素均独占一个“定位层”,定位层凌驾于静态层和浮动层之上,并且与其它“层”没有互动,浏览器很容易管理它。

因此,浏览器更容易计算绝对定位元素的布局,在渲染时也更容易优化。(这或许也可以解释为什么 IE6 的 CSS 布局 bug 大多与浮动相关。)

注:我没有详细查阅规范,这个答案的部分内容可能不够严谨,部分概念也是基于我自己的理解和总结。所以大家包涵,大体上明白意思就行。

原文地址:https://www.cnblogs.com/hbyzs/p/4463505.html