performance - 对于一般的移动 safari 和移动 webkit，使用复杂的 CSS 还是图像更好？

Question

我最近问了这个问题:How can I create a CSS border on a diagonal element

问题:使用图像或复杂的 css 作为导航菜单会占用更多内存还是占用更多 CPU？

问题:撇开跨浏览器/屏幕尺寸不谈，除了上述原因之外，是否还有其他优势？

谢谢!

Answer 1

最终，设备需要显示一个像素数组。如果您发送这些像素的图像文件，它们就可以显示了。如果您发送复杂的 css 来创建这些像素，它可能会在网络上占用更少的字节，但处理器需要在显示之前渲染像素数组。

您应该使用 css 还是图像取决于多种考虑因素。这里有一些:

• 您需要展示的东西的尺寸是否始终完全相同？然后图像文件具有已经被渲染的优势。如果没有，css 将提供有效调整大小的能力。

• 用户是否始终拥有良好的网络连接？如果是这样，发送预渲染图像和可能的一堆媒体查询 CSS 来决定加载哪个图像不会有太大的性能损失。

• 您要渲染的东西在屏幕上是否很大？如果是这样，CSS 可能比加载大型图像文件更有优势。

• css是不是特别复杂，要用很多代码来描述？然后图像文件具有预处理的cpu优势。

• 是否有与显示元素关联的动画状态或其他动画？那么 css 的优点是不必加载多个可能很大的图像文件。但是，如果状态有非常复杂的动画需要大量代码和 CPU，那么之前的指南将适用。

第二个问题:如果您的 css 存在跨浏览器问题，预渲染图像将消除这些问题。但是，如果您要构建具有多种不同显示尺寸的响应式显示对象，则 css 将具有可扩展性的优势。也就是说，响应式设计的一个基本概念是提供图像的几个不同尺寸版本。

一般来说，图像文件会消耗带宽，而 css/vectors 会消耗 CPU。