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渲染速度最慢

 

对于元素的定位和浮动设置对页面渲染速度的影响，还是有的。

但是如果没有上万个节点同时设置绝对定位，基本可以忽略不计。