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

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

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

原文地址:https://www.cnblogs.com/dtdxrk/p/3625989.html