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. 不留痕迹 says:

    第一次回帖,就为这个。。。。。。

  2. google_coder says:

    well,I think me found the diffrent idea from the article and the WP must to fix,Otherwise your blog will completely finished

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