CSSPosition定位过多是否会影响浏览器渲染速度
⼀直有个传说就是页⾯⾥的Position多了会影响浏览器渲染速度，今天做个测试看看结果如何。
检验的⽅法：
动态创建⼀定数量的div > 开始计算时间 > 导⼊css⽂件渲染 > onload计算时间，看那种⽅法延迟最短。
为了统计的数据有意义没有设置上万个节点，以cnmo⾸页的节点数为例，chrome firefox统计为4315，ie统计为4372，所以设置4500进⾏测试。
每次结果测试3次，取最低值。
不添加css属性
数量IE8Chrome Firefox
10071ms35ms20ms
4500330ms32ms52ms
静态(Static)
数量IE8Chrome Firefox
10058ms38ms20ms
4500332ms47ms48ms
绝对定位（Absolute Positioning）
数量IE8Chrome Firefox
10065ms28ms22ms
4500331ms41ms56ms
相对定位（Relative Positioning）
数量IE8Chrome Firefox
10054ms37ms21ms
4500335ms43ms62ms
固定定位（Fixed Positioning）
css中的position属性数量IE8Chrome Firefox
10063ms37ms21ms
4500334ms32ms51ms
元素浮动(Float)
数量IE8Chrome Firefox
10053ms38ms20ms
4500294ms37ms62ms
总结
结果很明显Chrome是性能最好的
Firefix在元素少的时候是最快的
IE8 Css渲染速度最慢
对于元素的定位和浮动设置对页⾯渲染速度的影响，还是有的。但是如果没有上万个节点同时设置绝对定位，基本可以忽略不计。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。