专栏首页杰的记事本absolute/display隐藏与回流等性能实验测试(转)

absolute/display隐藏与回流等性能实验测试(转)

1. 关于demo Opera是个性能相当不错的浏览器,要想制作一个可以显示出时间的demo可不是件容易的事情,简单的几个div层的reflow时间必然是0ms, 到底是有回流呢还是没有呢?回流的时间与dom的深度有关,因此,本文的所有demo都是内部为御用图片的498层②嵌套div。因此,友情提醒:千万不要使用firebug等工具去查看HTML代码,浏览器崩掉none of my business!

//zxx: ② 貌似Opera中有500层标签最大嵌套的显示,498个div层+1个p标签层+1个button标签=500层;层级再高就会显示异常。FireFox浏览器最大层级显示似乎小得多,Chrome浏览器貌似没有问题,我尝试了800层嵌套也是瞬间显示无压力。

2. 测试follow me 在较新版本的Opera浏览器上打开上面demo页面(没有的直接看截图以及数据哈~),右键页面→检查元素,打开工具面板,切换到下图所示这一项(会禁用其他所有项,为了更准确结果):

然后点击左上方那个红色圆点按钮,开始记录JS线程、CSS样式、回流、布局、渲染等。

点击demo页面中间区域的按钮(或者tab键focus按钮回车触发),触发图片的position状态变化,大约10次连续触发后③,再次点击左上方那个红色圆点按钮,停止记录。

//zxx:③ 回流等数据的产生是有波动的,一次状态的改变并不能准确反映是否真的产生了变化。

下图为一次点击按钮触发的普通记录④:

//zxx:④ 上截图第一个回流时间要长一点,是因为为了防止二次点击,按钮disabled造成了冗余回流,回流16m时长偏大。现在已去除了这个干扰项。但不影响终结论。

从中我们可以基本可以得到一些结论:

  1. 元素positionabsolutestatic之间切换的时候,都会产生回流;
  2. 鼠标经过按钮的内发光等效果产生的渲染远比图片乾坤大挪移来的大;
  3. 布局的时间点在渲染稍前一点,也就是说,先布局再渲染。

以上结论只能算作假设,因为缺少对照实验组。根据reflow确定的结论,元素visibility:hidden时候不会产生回流,因此,我又制作了一个对比demo,其中图片切换状态是visibilityhidden/visibile.

三、visibility对比试验

结果如下(回车测试):

对比同等操作下的position结果:

可以发现,元素position属性下文档流脱离与否的变化是会产生回流的;visibility不会!而且,visibility隐藏无需重新布局,渲染时间也短。不过有点不解的是CSS样式时间长了很多(红色下划线标示)?求解!

四、元素隐藏方法与回流、布局、渲染时间

元素隐藏不可见有很多方法,如下3个方法是我比较常用的:

  1. position:absolute; top:-999em; 屏幕阅读器可识别。
  2. position:absolute; visibility:hidden; 屏幕阅读器不可识别。
  3. display:none; 屏幕阅读器不可识别。

每个方法测试10次,并算出平均时间值。具体数据参见下表(欢迎质疑):

top:-999em方法

visibility:hidden方法

display:none方法

回流(ms)

布局(ms)

渲染(ms)

回流(ms)

布局(ms)

渲染(ms)

回流(ms)

布局(ms)

渲染(ms)

第1次

0

34

69

0

28

78

1

28

73

第2次

2

30

81

1

26

72

1

31

81

第3次

1

37

82

0

30

80

0

33

77

第4次

2

23

72

1

28

72

1

36

82

第5次

1

37

71

0

30

73

0

31

80

第6次

1

26

76

0

31

78

1

25

67

第7次

0

29

72

0

30

74

0

27

74

第8次

1

28

72

1

29

74

0

36

90

第9次

2

31

78

0

31

72

0

33

79

第10次

0

32

65

1

27

75

1

26

78

平均

1.0

30.7

73.8

0.4

29.0

74.8

0.5

30.6

78.1

布局和渲染应该是一致的(都是元素区域不保留的隐藏方式)。至于渲染,貌似负值屏幕外absolute的方法要高一倍。

然后,0~2这种范围的数据是没有参考意义的,因为数值太小,这种小范围的波动是很正常的,除非测试数据有100+而不是只有10次。

然而,有个不解的疑问,元素纯粹absolute的时候会产生更强的回流⑤,平均每次回流都有6ms,这个很狗血的结果让我茫然了!

//zxx: ⑤ position:absolute;与position:absolute; left:0; 虽然布局位置一模一样,但是尼玛前者回流6ms,后者平均1ms, 着实诡异。

对比上面各种元素隐藏方法的数据,可以得出,在Opera浏览器下,随便哪种隐藏,都没有性能上的显著差异的。更多的可能要考虑到可访问性等因素了!

对于回流性能低下明显的IE浏览器,不知反应如何,估计reflow时间不是个位数,其实,更好测试的,不知有没有什么相关测试工具,望指明!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • word-wrap: break-word和word-break: break-all区别

    相信大家对断句换行都有一点了解,也许也有部分人连这个属性是什么都不知道。当然了,如果是IT这个专业相关的大佬们可以不用看了,这篇文章主要针对于自学前端和转行的朋...

    javascript.shop
  • npm scripts的使用

    npm 允许在package.json文件里面,使用scripts字段定义脚本命令。

    javascript.shop
  • SVG 图标在React项目中的优化

    官方文档:https://webpack.docschina.org/loaders/url-loader/

    javascript.shop
  • Windows下安装python出现25

    这是因为没有权限打开安装包所致。 我的安装包在C盘, 安装python2.几,安装包名是python-2.7.13.amd64.msi C:\Win...

    py3study
  • 【重要】Spring在web.xml中的配置原理说明

    黑泽君
  • 『互联网架构』软件架构-Nosql之redis(47)

    1.内存容量有限(redis本身是存储在内存里面,硬件机器本身的内容容量是有限,往redis存储的量可能很大,就会出现内存容量的问题) 2.处理能力有限(一个人...

    IT故事会
  • iOS 下 input=text 等输入框,触发时,灰色背景

    这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个...

    汐楓
  • Redis缓存技术及应用场景案例

        Remote Dictionary Server(Redis) 是一个开源的由Salvatore Sanfilippo使用ANSI C语言开发的key-...

    动力节点Java学院
  • 畅快上网的隐形利器:音视频技术标准

    90年代,便携且容量很大的软盘在中国流行起来。在软盘刚出现的时候,容量仅为81KB,一款游戏动辄几M,一个DOS操作系统要十几M,就连一首歌都要几百K,都要用到...

    腾讯音视频实验室
  • 第四届 Mobile Dev Day手记

           时间:2009年12月19日 13:30        地点:北京市海淀区知春路49号希格玛大厦2层50人会议室        和去年第三届Mob...

    ShiJiong

扫码关注云+社区

领取腾讯云代金券