最近做一個專案發現在頁面沒有任何操作的情況下 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

另外這裡只是針對chrome，其他瀏覽器暫時不確定是否有效能問題。