浮动和绝对定位的性能问题
最近看到一个应聘的同学给出的样式文件,看到老多的position:absolute;我老皱眉头,不太爽,对于float和绝对定位的使用问题是应该注意一点的。否则会带来一些性能上的影响。
晚上闲着无聊,做了以下这个无聊的实验,虽说不是很严谨,例如没有考虑硬件和操作系统的因素,但也多少能说明一些问题。
实验环境和条件:
1.firefox 3.0+firebug [经过测试其他浏览器的测试结果大同小异]
2.为了排除网络带来的影响,在本机搭建了服务器
3.每个例子运行19次,取得出的结果的平均值
场景:
default页面:第一个页面中显示 13829 个div,不进行任何的浮动和定位等操作,默认。
float页面:第二个页面中显示一样的 13829 个div,对他们进行float:left;。
position:absolute页面 :第三个页面中同样显示 13829 个div,对他们进行绝对定位操作。
例如float的页面:

每个页面运行19次,用firebug查看运行完成所用时间,记录后分别求平均值进行对比。
最终得出以下的数据:

最后,默认状态下的平均渲染时间大约是:0.69秒。
浮动后的平均渲染时间是:29秒。
而绝对定位的平均渲染时间是:4.2秒。

浮动和绝对定位都会将此元素拖出文档流,这个就给浏览器渲染时带来负担,如果过量的使用,将会产生极大的性能问题。
而float又比绝对定位的效率更低一些。
ps:不知道有用没用,睡觉了
@ytzong 哈哈,多交流多交流,我也是想看看到底两者的差别在哪里。。。
不太喜欢用绝对定位。很少很少用。
但是经常用float,因为控制起来更加方便,在不同浏览器的兼容性更强,而且做出来比较精确。
现在的计算机和网络带宽 ,性能已经不是要第一个考虑的因素了(我是说css方面)。 29s/13829=0.00209s,一个页面100个浮动,才0.2s。
我不是推荐用float,只是不是从性能方面考虑,浮动太多的话,可能是html的结构有问题。
适当才是最好。
博主写得这篇文章真不错!可以与我的的博客——时尚女性做个链接吗?
哈哈,不错不错!
It’s very good!