RequestAnimationFrame + Css3 Animation 会导致重新计算样式

Question

我发现当同时运行Css3 Animation和RequestAnimationFrame（不改变DOM）时，重新计算样式，这意味着GPU加速不起作用？这是一个错误吗？

\n

当仅运行 css3 动画时，GPU 加速工作正常，一切都很完美。

\n

性能 - 仅 CSS3rotateZ

\n

启动requestAnimationFrame，Recalculate Style每次都会看到被触发。

\n

性能 - Css3rotateZ + requestAnimationFrame

\n

停止Css3动画（仅requestAnimationFrame）\xef\xbc\x8cRecalculate就没了~

\n

在此输入图像描述

\n

主要代码如下：

\n

@keyframes rotate {\n  0% {\n    transform: rotateZ(0deg);\n  }\n  to {\n    transform: rotateZ(359deg);\n  }\n}\n\n.ring {\n  display: none;\n  width: 80px;\n  height: 80px;\n  margin: 24px auto;\n  border: 2px solid transparent;\n  border-top-color: red;\n  border-radius: 50%;\n  display: block;\n}\n

\n

const toggleCss = document.querySelector("#toggleCss");\ntoggleCss.addEventListener("click", function () {\n  document.body.classList.toggle("loading");\n  if (document.body.classList.contains("loading")) {\n    toggleCss.innerText = "Stop Css3 Animation";\n  } else {\n    toggleCss.innerText = "Start Css3 Animation";\n  }\n});\n\nlet running = false;\n\nfunction tick() {\n  if (running) {\n    requestAnimationFrame(tick);\n  }\n}\n\ntick();\n\nconst toggleRaf = document.querySelector("#toggleRaf");\ntoggleRaf.addEventListener("click", function () {\n  if (running) {\n    running = false;\n    toggleRaf.innerText = "Start requestAnimationFrame";\n  } else {\n    toggleRaf.innerText = "Stop requestAnimationFrame";\n    running = true;\n    tick();\n  }\n});\n

\n

在此处查看在线示例： https: //yfkyv.csb.app/

\n

Codesandbox：https://codesandbox.io/s/relaxed-andras-yfkyv?file=/src/index.js

\n