
一直有个传说就是页面里的Position多了会影响浏览器渲染速度,今天做个测试看看结果如何。
检验的方法:
动态创建一定数量的div > 开始计算时间 > 导入css文件渲染 > onload计算时间,看那种方法延迟最短。
为了统计的数据有意义没有设置上万个节点,以cnmo首页的节点数为例,chrome firefox统计为4315,ie统计为4372,所以设置4500进行测试。
每次结果测试3次,取最低值。
不添加css属性
数量 | IE8 | Chrome | Firefox |
100 | 71ms | 35ms | 20ms |
4500 | 330ms | 32ms | 52ms |
静态(Static)
数量 | IE8 | Chrome | Firefox |
100 | 58ms | 38ms | 20ms |
4500 | 332ms | 47ms | 48ms |
绝对定位(Absolute Positioning)
数量 | IE8 | Chrome | Firefox |
100 | 65ms | 28ms | 22ms |
4500 | 331ms | 41ms | 56ms |
相对定位(Relative Positioning)
数量 | IE8 | Chrome | Firefox |
100 | 54ms | 37ms | 21ms |
4500 | 335ms | 43ms | 62ms |
固定定位(Fixed Positioning)
数量 | IE8 | Chrome | Firefox |
100 | 63ms | 37ms | 21ms |
4500 | 334ms | 32ms | 51ms |
元素浮动(Float)
数量 | IE8 | Chrome | Firefox |
100 | 53ms | 38ms | 20ms |
4500 | 294ms | 37ms | 62ms |
总结
结果很明显Chrome是性能最好的
Firefix在元素少的时候是最快的
IE8 Css渲染速度最慢
对于元素的定位和浮动设置对页面渲染速度的影响,还是有的。
但是如果没有上万个节点同时设置绝对定位,基本可以忽略不计。