Omi 自身对比

  1. //slow
  2. this.data.rotateZ += 2
  1. //fast
  2. this.animDiv.rotateZ += 2
  3. this.data.rotateZ = this.animDiv.rotateZ

主要对比上面两个代码块的执行效率,打开谷歌浏览器的 Performance 运行 10 秒左右,打开 Summary 对比:

Slow Fast
Omi Omi

可以看到 omi 的两种方式都拥有很高性能,10秒钟内拥有大量的空闲时间,但是 fast 确实更加 fast,scripting 的耗时更短。但是优势不明显是为什么?因为 DOM 结构简单,如果 DOM 结构越复杂, fast 直接操作 DOM 的方式会把 slow 的方式甩开一大截!下面进行验证一下:

先发 render 的 DOM 结构修改成复杂的:

Omi

打开谷歌浏览器的 Performance 运行 10 秒左右,打开 Summary 对比:

Slow Fast
Omi Omi

可以看到 Scripting Time 已经拉开了差距!

对比前后两次的数据:

DOM 结构 Slow Fast
简单 Omi Omi
复杂 Omi Omi

可以看到 Fast 的前后两次没有太大差别,Slow 前后两次差距巨大。那么 Fast 内核 css3transform 原理是什么?