一直有个传说就是页面里的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渲染速度最慢

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

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

CSS Position定位过多是否会影响浏览器渲染速度的更多相关文章

  1. 教你玩转CSS Position(定位)

    CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...

  2. CSS position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  3. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  4. [CSS]position定位

    CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元 ...

  5. CSS| position定位和float浮动

    对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...

  6. css - Position定位属性与层级关系

    今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...

  7. Css Position定位(简易版本)

    准备前的知识: 定位只对块级起作用.如div,p等元素是块级元素,如果是内联元素则可以先变成块级元素,display:block即可. 开始讲解: 定位共四种:static,fixed,relativ ...

  8. <转载>DIV+CSS position定位方法总结

    如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任 ...

  9. CSS Position 定位属性介绍

    1.介绍 1.1 说明 Position 属性:规定元素的定位类型.即元素脱离文档流的布局,在页面的任意位置显示. 1.2 主要的值 ①absolute :绝对定位:脱离文档流的布局,遗留下来的空间由 ...

随机推荐

  1. Oracle substr() 字符截取函数

    1.substr函数格式   (俗称:字符截取函数) 格式1: substr(string string, int a, int b); 格式2:substr(string string, int a ...

  2. Apache Kylin在4399大数据平台的应用

    来自:AI前线(微信号:ai-front),作者:林兴财,编辑:Natalie作者介绍:林兴财,毕业于厦门大学计算机科学与技术专业.有多年的嵌入式开发.系统运维经验,现就职于四三九九网络股份有限公司, ...

  3. GreenPlum 常用命令

    gpstate 命令 参数 作用 gpstate -b => 显示简要状态 gpstate -c => 显示主镜像映射 gpstart -d => 指定数据目录(默认值:$MASTE ...

  4. Tomcat 部署多个web项目

    1.若Tomcat的端口设置为10000,则http://localhost:10000访问的目录是 webapps 2.Service.xml中host内配置Context标签,path+docba ...

  5. 溢出的文字隐藏（text-overflow）

    <body> <div>一定要首先强制一行内显示,再次和overflow搭配使用,三个步骤缺一不可</div> </body> <style> ...

  6. Jenkins - Update information obtained: 不可用 ago；

    Jenkins 添加插件 jenkins plugin提示: Update information obtained: 不可用 ago: 编辑 hudson.model.UpdateCenter.xm ...

  7. Ural1297 最长回文子串(后缀数组+RMQ)

    /* 源程序丢失QWQ. 就不粘代码了. 大体做法是把串反转然后连接. 做一遍后缀数组. 对height做一遍rmq. 然后对于每个位置的奇偶分别判断, 记下pos. 注意求的是[l+1,r]的hei ...

  8. Adobe Acrobat DC

    DC: document cloud [云服务] 但是Adobe document cloud包括: Acrobat DC, Adobe sign, 以及Web和移动应用程序. 参考: https:/ ...

  9. linux 使用yum安装mysql详细步骤

    环境:Centos 6.5 Linux 使用yum命令安装mysql 1. 先检查系统是否装有mysql [root@localhost ~]#yum list installed mysql* [r ...

  10. UOJ#470. 【ZJOI2019】语言 虚树,线段树合并

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ470.html 前言 做完情报中心来看这个题突然发现两题有相似之处然后就会做了. 题解 首先,我们考虑将所有答案点对分为两 ...