我最近问了这个问题:How can I create a CSS border on a diagonal element
问题:将图像或复杂的CSS用于导航菜单是否会占用更多内存或CPU?
问题:除了浏览器/屏幕大小之外,由于上述原因之外的其他原因,一个相对另一个优势是什么?
谢谢!
最佳答案
最终,设备需要显示像素阵列。如果发送这些像素的图像文件,则可以显示它们。如果您发送复杂的CSS来创建这些像素,则可能会占用较少的网络字节,但是处理器需要先渲染像素阵列,然后才能显示它。
是否应使用CSS或图像取决于多种考虑因素。这里有一些:
您需要显示的东西总是完全一样的大小吗?然后,图像文件具有已经被渲染的优点。如果没有,css将提供有效调整大小的功能。
用户将始终保持良好的网络连接吗?如果是这样,则发送预渲染的图像并不会受到大量的媒体查询CSS决定要加载哪个图像的性能损失。
您要在屏幕上渲染的东西很大吗?如果是这样,css可能比加载大图像文件有优势。
CSS非常复杂,需要大量代码来描述吗?然后,图像文件具有被预处理的cpu优势。
显示项目是否有动画状态或其他动画?然后,css的优点是不必加载多个可能较大的图像文件。但是,如果各州的动画非常复杂,需要花费大量代码,因此需要使用cpu,则以前的准则将适用。
第二个问题:如果CSS跨浏览器存在问题,则预渲染的图像将消除这些问题。但是,如果要构建具有很多不同显示尺寸的自适应显示对象,css将具有可伸缩性的优势。也就是说,响应式设计的基本概念是提供图像的几个不同尺寸的版本。
通常,图像文件占用带宽,而CSS /矢量占用CPU。