记一次box-shadow动画导致的性能问题

最近做一个项目发现在页面没有任何操作的情况下 CPU占用率会达到 100%。当然这是一个核心的占用率，所以页面操作上并不卡。不过这个现象非常不正常，因为页面只做了一些简单的CSS动画。

在定位问题的过程中发现是由一个容器的box-shadow 动画引起的。启用动画和禁用动画performance profile对比如下：

可以看到禁用 box-shadow 动画后有大幅的性能提升。

下面看下代码：

HTML代码如下：

<div class=“container”>
   // 省略好多孩子
div>

CSS 代码如下：

@keyframes shadowFlicker {
  from {
    box-shadow: 0 5px 20px 0 transparentize(#197AD6, .6);
  }
  50% {
    box-shadow: 0 5px 20px 0 #197AD6;
  }
  to {
    box-shadow: 0 5px 20px 0 transparentize(#197AD6, .6);
  }
}
.shadowFlicker {
  animation-name: shadowFlicker;
  animation-duration: 3000ms;
  animation-iteration-count: infinite;
}

.container {
  @extend .shadowFlicker;
}

其中 container 容器是包含了页面全部内容，因为动画是无限循环的，所以会发现其实页面不进行任何操作依然会占用很大的CPU资源。

在取消动画之后CPU使用量立刻从 100% 降到 30%左右（页面还有其他一些动画存在）

然而，如果这个是空的容器，那么他的CPU占用量也比较小。

具体原因可能会涉及到chrome浏览器渲染引擎的工作原理，这里暂时不得而知，不过可以大胆猜测一下原因：
1. box-shadow animation 本身比较消耗CPU资源，尽量避免使用。这个是比较确定的
2. 当 .container 进行box-shadow 动画的时候，会触发所有孩子的 repaint(redraw) 因此会导致页面性能大幅下降。这个原因暂时不清楚是否正确

关于box-shadow 影响性能的问题可以参考 http://tobiasahlin.com/blog/how-to-animate-box-shadow/
这里面对我猜测的两点都有说明。

另外这里只是针对chrome，其他浏览器暂时不确定是否有性能问题。