我最近问了这个问题：如何在对角元素上创建 CSS 边框
问题：使用图像或复杂的 css 作为导航菜单是更占用内存还是更占用 CPU？
问题：除了跨浏览器/屏幕尺寸之外，除了上面提到的原因之外，一个优势是否比另一个优势？
谢谢！
问问题
107 次
1 回答
1
最终，设备需要显示像素阵列。如果您发送这些像素的图像文件，它们就可以显示了。如果您发送复杂的 css 来创建这些像素，它可能会在网络上占用更少的字节，但处理器将需要渲染像素阵列才能显示。
是否应该使用 css 或图像取决于各种考虑。这里有几个：
您需要显示的东西总是完全相同的大小吗？然后图像文件具有已经被渲染的优势。如果没有，css 将提供有效调整大小的能力。
用户是否始终拥有良好的网络连接？如果是这样，发送预渲染图像和可能的一堆媒体查询 css 来决定加载哪个图像不会有太多的性能损失。
您要在屏幕上渲染的东西是否很大？如果是这样，css 可能比加载大图像文件更有优势。
css 是不是非常复杂，需要大量代码来描述？然后图像文件具有经过预处理的 cpu 优势。
是否有与显示项目相关的动画状态或其他动画？然后 css 的优点是不必加载多个可能很大的图像文件。但是，如果状态具有非常复杂的动画，需要大量的代码和 cpu，那么前面的指南将适用。
第二个问题：如果您的 css 存在跨浏览器问题，预渲染图像将消除这些问题。但是，如果您正在构建一个具有多种不同显示尺寸的响应式显示对象，那么 css 将具有可扩展性的优势。也就是说，响应式设计的一个基本概念是提供几个不同大小的图像版本。
一般来说，图像文件会消耗带宽，而 css/vectors 会消耗 cpu。
于 2012-12-09T01:23:03.693 回答