我最近发布了 learn wc，如果您看过它，您可能已经注意到背景中的动画，其中彩色圆圈在屏幕上对角移动。看起来像这样：
它在 chrome 和 safari 上运行良好，但我注意到 firefox 上的性能严重下降。
性能太差了，我直接在 firefox 中禁用了这个动画。
动画是如何运作的？
动画是使用两个嵌套的 div 构建的。外部 div 是网站 body 标签的第一个子级。
登录后复制
.background-gradient 元素负责创建跨越其父容器的整个宽度和高度的渐变。像这样：
立即学习“前端免费学习笔记（深入）”；
外部 .background-mask 负责两件事：
它将位置设置为固定，并使容器填充视口的整个尺寸。在渐变上创建点状蒙版
这确保了点的颜色是其正下方渐变的颜色：
这是我上面描述的所有内容的 css：
.background-mask { --mask-size: 24px; /* position styles */ position: fixed; width: 100%; height: 100%; z-index: -1; /* mask styles */ mask-image: radial-gradient(black 2px, transparent 2px); mask-size: var(--mask-size) var(--mask-size); mask-position: 0px 0px; animation: mask-move 3s infinite linear;}.background-gradient { background: var(--red); background-image: var(--gradient); width: 100%; height: 100%;}@keyframes mask-move { 0% { mask-position: 0px 0px; } 100% { mask-position: var(--mask-size) var(--mask-size); }}@media (prefers-reduced-motion: reduce) { .hero-background-mask { animation: none; }}
登录后复制
如果您有兴趣了解有关 css 中蒙版的更多信息，那么我可以推荐 ahmad shadeed 撰写的这篇综合文章
是什么导致了性能下降？
并非所有 css 属性的动画效果都是一样的。无需过多讨论浏览器如何将 html 呈现到页面（尽管我已在此处概述），它会经历几个阶段。我们感兴趣的三个阶段是：
布局 – 当浏览器计算页面上元素的大小和位置绘制 – 绘制页面的所有视觉方面，如图像、颜色、阴影等复合 – 以正确的顺序将元素分层
管道的顺序如下所示：
布局→绘制→合成
布局和绘制过程可能会占用大量 cpu 资源，因此尝试减少 css 触发管道中各阶段的次数非常重要*。* 浏览器通过优化某些属性的性能在某种程度上提供了帮助，例如跳过渲染管道的整个阶段，其他人可以利用硬件加速将计算从cpu转移到gpu。
对某些属性进行动画处理，例如平移和不透明度，都可以避免触发布局并使用硬件加速。
遗憾的是，动画蒙版位置时并非如此。我查看了 chrome，发现背景 div 的绘制计数在每一帧上都在增加。几秒钟后，它已经触发了超过 1,000 次油漆。
即使绘制数量如此之多，chrome 上的动画也感觉很流畅。然而，在 firefox 上感觉超级卡顿。令人烦恼的是，我找不到测量 firefox 上的绘制计数的方法，因此我对 firefox 糟糕性能所做的任何假设都纯粹是猜测。
我确实注意到动画对于小型设备来说很好，但随着屏幕尺寸的增加而变得更糟。我的工作原理是，firefox 不会对每个 24×24 蒙版进行批处理布局触发器，这会导致当存在更多 24×24 蒙版时 fps 下降。再说一次，我在这里可能完全错了。
我是如何解决这个问题的？
我需要依靠性能更高的属性，例如translate，而不是对优化不佳的 css 属性（如 mask-position ）进行动画处理。
解决方案不是将蒙版移动 24px，而是使用平移属性移动整个背景元素。
从抽象的角度来看，动画是这样的：
这是 css 中的两行更改：
/* --mask-size = 24px */@keyframes mask-move { 0% { transform: translate(calc(var(--mask-size) * -1), calc(var(--mask-size) * -1)); } 100% { transform: translate(0px, 0px); }}
登录后复制
浏览器不再对蒙版位置进行动画处理，这会在每个帧上触发布局。即使背景在每一帧上移动，通过翻译它也不会触发布局或绘制。你可以看到 only 绘制了两次，从每分钟 1,000+ 下降了。
眼尖的观众一定会发现一个问题。如果您还记得的话，背景的高度和宽度会填充视口。将背景向左和向上移动 24 像素，在视口中留下这个空白区域。
解决这个问题很简单，只需将遮罩尺寸添加到容器的宽度和高度即可：
.background-mask { --mask-size: 24px; width: calc(100% + var(--mask-size)); height: calc(100% + var(--mask-size));}
登录后复制
让我们在 firefox 中再看一下：
这可能不是一个完美的解决方案，但完成一个有趣的雾里看花css技巧总是让人有点满足。
以上就是降低性能的两行 CSS（fps 到 ps）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2854045.html
