zoukankan      html  css  js  c++  java
  • 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渲染速度最慢

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

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

  • 相关阅读:
    cuda基础----流
    cuda基础---异步并行执行
    cuda基础---cuda通信机制
    cuda基础-----cuda编程模型/软件体系/存储器模型
    大顶堆 小顶堆应用----中位数查找
    Maven配置阿里云镜像
    C++中bool型变量按位取反总是为true
    区分C++的继承、覆盖、隐藏、重载
    C++Primer第5章 语句
    C++Primer第4章 表达式
  • 原文地址:https://www.cnblogs.com/dtdxrk/p/3625989.html
Copyright © 2011-2022 走看看