Cnscorpio

{夫君子之所取者远,则必有所待;所就者大,则必有所忍!}

浮动和绝对定位的性能问题

最近看到一个应聘的同学给出的样式文件,看到老多的position:absolute;我老皱眉头,不太爽,对于float和绝对定位的使用问题是应该注意一点的。否则会带来一些性能上的影响。

晚上闲着无聊,做了以下这个无聊的实验,虽说不是很严谨,例如没有考虑硬件和操作系统的因素,但也多少能说明一些问题。

实验环境和条件:

1.firefox 3.0+firebug [经过测试其他浏览器的测试结果大同小异]

2.为了排除网络带来的影响,在本机搭建了服务器

3.每个例子运行19次,取得出的结果的平均值

场景:

default页面:第一个页面中显示 13829 个div,不进行任何的浮动和定位等操作,默认。

float页面:第二个页面中显示一样的 13829 个div,对他们进行float:left;。

position:absolute页面 :第三个页面中同样显示 13829 个div,对他们进行绝对定位操作。

例如float的页面:

float

每个页面运行19次,用firebug查看运行完成所用时间,记录后分别求平均值进行对比。

最终得出以下的数据:

exl

最后,默认状态下的平均渲染时间大约是:0.69秒。

浮动后的平均渲染时间是:29秒。

而绝对定位的平均渲染时间是:4.2秒。

anal

浮动和绝对定位都会将此元素拖出文档流,这个就给浏览器渲染时带来负担,如果过量的使用,将会产生极大的性能问题。

而float又比绝对定位的效率更低一些。

ps:不知道有用没用,睡觉了

  1. cnscorpio says:

    @ytzong 哈哈,多交流多交流,我也是想看看到底两者的差别在哪里。。。

  2. shewa says:

    不太喜欢用绝对定位。很少很少用。
    但是经常用float,因为控制起来更加方便,在不同浏览器的兼容性更强,而且做出来比较精确。

    现在的计算机和网络带宽 ,性能已经不是要第一个考虑的因素了(我是说css方面)。 29s/13829=0.00209s,一个页面100个浮动,才0.2s。

    我不是推荐用float,只是不是从性能方面考虑,浮动太多的话,可能是html的结构有问题。

    适当才是最好。

  3. 时尚女性 says:

    博主写得这篇文章真不错!可以与我的的博客——时尚女性做个链接吗?

  4. 9ist says:

    哈哈,不错不错!

  5. 九ai时尚 says:

    It’s very good!

说两句吧:
(*)
(*绝对不给酒吧女)