前端动画优化及性能检测

前端动画优化及性能检测工具使用

前端使用动画可以分为两类：

css 动画
js 动画

我们提倡能够使用 css 完成的动画尽量使用 css （即使用 animation 和 keyframes ）。因为处理 css 是浏览器渲染线程，并不会占用 js 线程，也不会被 js 线程所影响。因而会更加流畅。

但是 css 动画在复杂的场景下并不能满足需求。一些复杂的动画需要通过 js 进行一些计算。如果使用 js 渲染动画可能会出现因为 js 线程忙于计算其他任务，而迟迟不到下一个事件循环导致动画得不到更新，表现出卡顿。

另外，不管是 css 还是 js 动画都要尽量去减少重排和重绘。因为频繁的重排和重绘会使页面的使用流畅度和体验下降。

使用 GPU 运算合成图层

浏览器渲染过程：

DOM树 + CSSOM树 --> render tree --> 分成很多图层 --> GPU 渲染 --> 合成图层

GPU 的工作并不会加速而是会将某个元素拿到一个新的图层中，然后单独进行渲染，然后在动画结束后将多个图层合并到一个图层中，最终展示在浏览器中。将动画分到单独的合成图层中，在每次重排和重绘时，只需要重排重绘自己的图层，而不影响其他图层。

GPU 带来的损耗是内存占用，每个合成层都会有内存损耗，过多的合成层可能会带来性能问题。但总体来说，一些频繁更新的动画使用 GPU 加速更好。

“ GPU 是廉价的”，我们可以去使用 GPU 进行一些动画的渲染和运算。触发 GPU 渲染的css 属性：

transform 中使用3d ，translate3d 、 scale3d、 rotate3d
opacity
will-change

使用window.requestAnimationFrame

告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
在每次浏览器重新渲染之前更新动画，我们可以避免无用的更新，替代 setInterval 的更新。

这里写了一个小 demo：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>test</title><style>html {height: 100%;width: 100%;}body {margin: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}.container {height: 800px;width: 800px;border: 3px solid black;position: relative;}.ball {position: relative;width: 100px;height: 100px;border-radius: 50%;background-color: pink;}</style><link rel="stylesheet" type="text/css" href="./test.css" /></head><body><div class="container"><div class="ball"></div></div></body><script>let speedX = 10;let speedY = 10;//容器const Container = document.querySelector(".container");let containerWidth = Container.clientHeight;let containerHeight = Container.clientWidth;//球const Ball = document.querySelector(".ball");let ballWidth = Ball.offsetWidth;let ballHeight = Ball.offsetHeight;let positionX = 0;let positionY = 0;const maxOffsetLeft = containerWidth - ballWidth; //最大的右边界const maxOffsetTop = containerHeight - ballHeight; //最大的下边界let ballOffsetLeft = 0;let ballOffsetTop = 0;function moveBall() {window.requestAnimationFrame(() => {ballOffsetLeft += speedX;ballOffsetTop += speedY;if (checkBoundry(ballOffsetLeft, ballOffsetTop)) {speedX = -speedX;speedY = -speedY;}// 使用left和top或者margin 进行的移动并不能创建合成图层和 GPU 运算// Ball.style.left = ballOffsetLeft + "px";// Ball.style.top = ballOffsetTop + "px";//使用transform中的translate3d可以将动画移动到合成图层中加速运算Ball.style.transform = `translate3d(${ballOffsetLeft}px ,${ballOffsetTop}px,0px)`;window.requestAnimationFrame(moveBall);});}moveBall();function checkBoundry(x, y) {if (x <= 0 || x >= maxOffsetLeft || y <= 0 || y >= maxOffsetTop) {return true;}return false;}</script>
</html>

动画性能分析工具 rendering

在chrome 的开发者工具中有很多工具

在开发者工具中可以使用 rendering 工具进行查看页面渲染的图层、重绘以及掉帧情况。

勾选 paint flashing 可以高亮显示出需要重绘的元素，图中使用了 translate3d 便进入了合成图层使用了 GPU 加速，因此只需要重绘自己的合成层就好，因此没有高亮。

而当我们使用 left 和 top 移动这个球时：

这个球会被绿色高亮出来，因为使用 left 和 top 并不能新建合成图层，仍然在文档流中。

另一个工具是 performance monitor

可以看到 layouts/sec 是 30 即每秒进行了 30 次重排

而使用 translate3d 时：

layouts / sec 是 0 即正常文档流中没有进行重排

使用performance 进行帧数分析

可以看到 30 fps ，不算高。
正常浏览器渲染页面是 60fps左右，即 16.7ms/帧