CSS Position定位过多是否会影响浏览器渲染速度
一直有个传说就是页面里的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渲染速度最慢
对于元素的定位和浮动设置对页面渲染速度的影响，还是有的。
但是如果没有上万个节点同时设置绝对定位，基本可以忽略不计。
- 上一篇 »10条影响CSS渲染速度的写法与建议
- 下一篇 »最全的CSS浏览器兼容问题整理
