一直以来,web开发者都不需要关心用于浏览网页的设备其可用内存的容量大小,直到现在移动设备的快速发展。台式机一般都配置了2GB的主板内存,但是移动设备,只配备了大约512MB的内存。而且,并非所有的内存都是为访问web而准备的,还有一些内存分配给操作系统和其他后台应用及进程。所以512MB的内存只有不到一半可以提供给真正的前台应用来运行。
对于图片,一旦图片从服务器下载到移动设备,就会以非压缩的形式存储在移动设备的内存中。一个有大量图片的网页将消耗移动设备更多的可用内存。图片体积越大,消耗内存越多。
除了有标准处理器(CPU),一些移动设备还配有GPU图形处理器,每个图形处理器都有它们自己的分配内存。通过把如下的CSS transform 应用到含有图片的DOM元素上,可以不把图片加载到主内存,而是加载到显存,显存里的图片处理是硬件加速的。
1 .element{ 2 transform:translateZ(0); /*Firefox16+,IE10+,Opera12.10+*/ 3 -o-transform:translateZ(0); /*Opera 10.50-12.00*/ 4 -ms-transform:translateZ(0); /*IE 9*/ 5 -moz-transform:translateZ(0); /*Firefox3.5-15*/ 6 -webkit-transform:translateZ(0); /*Safari 3.1+ Chrome*/ 7 }
使用这项技术,要分外小心,并且要有节制。因为同一个图像用硬件合成所占用的显存数量是常规内存的4倍(因为它要相应的分开红,蓝,绿和alpha通道在GPU中进行处理)
时间: 2024-10-15 10:57:32