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

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

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

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

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

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

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

时间: 2024-10-14 09:28:14

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

js解决EasyUI页面渲染速度慢问题(Mask遮罩)

1 /** 2 * 页面加载等待页面 3 * 4 * @author gxjiang 5 * @date 2010/7/24 6 * 7 */ 8 var height = window.screen.height-250; 9 var width = window.screen.width; 10 var leftW = 300; 11 if(width>1200){ 12 leftW = 500; 13 }else if(width>1000){ 14 leftW = 350; 15 }e

10条影响CSS渲染速度的写法与建议(摘抄HTML5中国)

1.尽量避免 *{} 由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一开始就把所有的默认属性全部去除,以达到所有标签属性值都统一的效果.所以就有了*通配符.* 会遍历所有的标签: *{ margin:0;padding:0} 建议的解决方法: (1)不要去使用生僻的标签,因为这些标签在不同浏览器中解释出来的效果不一样:所以要尽可能的去使用那些常用的标签: (2)不要使用*:而是把常用到的这些标签进行处理:例

10条影响CSS渲染速度的写法与建议

1.*{} #zishu *{} 尽量避开 由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把所有标签的默认属性全部去除,以达到所有签标属性值都统一的效果.所以就有了*通配符.*会遍历所有的标签: *{margin:0; padding:0} 建议的的解决办法: 1)不要去使用生僻的标签,因为这些标签往往在不同浏览器中解释出来的效果不一样:所以你要尽可能的去使用那些常用的标签: 2)不要使用*:而是把

页面渲染深入解析

基本渲染过程 用户请求的资源通过浏览器的网络层到达渲染引擎后,渲染工作开始.每次渲染文档通常不会超过8K的数据块,其中基础的渲染过程如下图所示: 第一步:渲染引擎首先解析HTML文档,转换为一棵DOM树: 第二步:接下来不管是内联式,外联式还是嵌入式引入的CSS样式也会被解析,渲染出另 外一棵用于渲染DOM树的树-渲染树(render tree) ,渲染树包含带有颜色,尺寸等显示属性的矩形,这些矩形的顺序与显示顺序一致: 第三步:然后就是对渲染树的每个节点进行布局处理,确定其在屏幕上的显示位置:

高性能滚动 scroll 及页面渲染优化

本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读.    滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看: 1 2 3 4 var i = 0; window.addEventListener('scroll',function(){   

css 浮动和绝对定位的区别

当一个元素使用绝对定位后,它的位置将依据浏览器左上角开始计算或相对于父容器(在父容器使用相对定位时). 绝对定位使元素脱离文档流,因此不占据空间.普通文档流中元素的布局就当绝对定位的元素不存在时一样.因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素. w3c对绝对定位的解释: 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样.元素定位后生成一个块级框,而不

【前端性能】高性能滚动 scroll 及页面渲染优化

最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,是我自己学习记录的一个过程,如果上面列出的知识点都了然于胸了,就可以不必往下看了.    滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看

css浮动与绝对定位的关系

人还是要学会思考.我初学css时候,老觉得浮动与绝对定位的功能很类似,原因很简单,因为他俩都能使正常html元素脱离元素流. 相对于绝对定位强悍的功能,浮动其实并没有完全脱离元素流,这个后面会说. 那么什么是脱离元素流呢?要搞清楚这个问题,首先得了解什么是元素流.我的理解,元素流是html标签本应该出现在页面的位置,比如下面这段代码. 1 <div> 2 <p class="p1">p1</p> 3 <p class="p2"

【前端性能】高性能滚动 scroll 及页面渲染优化--转发

本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读.    滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看: 1 2 3 4 var i = 0; window.addEventListener('scroll',function(){