我在
简析 HTML5 canvas在retina屏(视网膜屏幕,如iphone4)设备上的优化 一文中提到了一点关于 safari和retina屏的问题.
不过那篇文章说的比较乱 ,而且举的例子有点复杂.
今天梳理了一下思路, 重新来聊聊这个话题.
还是先引用前文的一段话:
引用
ip4的safari浏览器在展现图像(如img, canvas, backgroundImage)时, 为了得到和传统屏幕一样的视觉大小, 会将原始像素放大1倍.(retina屏幕的像素更小,可以理解为4个retina像素表示1个传统像素).
ip4在进行这种放大时,并不是简单的 将1*1像素 变成2*2像素, 而是会进行"复杂的放大算法", 目的是得到更加平滑自然(类似抗锯齿)的图像.
虽然这种放大操作是native的,但还是会导致渲染图像时性能变得低下.
(这里所说的性能低下 不是想当然的, 是经过多人多次多种测试用例测试后得出的结果)
下面举个简单的例子.
我现在有一张图片, 大小是 120px*120px, 在网页中这样显示:
<img width="120" height="120" src="normal.jpg" />
现在我们拿出 iphone3 和 iphone4 (这两个我都没有 :'( ), 访问这个页面
会看到 视觉上一样大小的 两张图.
而不会因为 ip4 高分辨率, 就看到很小的图.
之所以这样, 就是因为ip4显示图像时,对图像做了放大处理.
============================================
ip4比ip3有更强大的硬件性能, 但是就是因为这一放大,导致性能变低了,而且ip4的放大算法会让图片看起来有一点点模糊(要仔细看,做了抗锯齿/平滑处理).
那么我要怎样在ip4下看到 和 ip3 下一样大小的图片,保证性能和效果呢?
答案就是:
1 先准备一张 大小*2的清晰大图 (big.jpg, 240*240 ),
2 img标签这样写:
<img width="120" height="120" src="big.jpg" />
是的 你没有看错, img的宽高依然不变.
此时这个img标签实际上显示的是一个"缩小的big.jpg".
但对于ip4而言, 此时效果更好,性能更高.
因为ip4 发现自己要显示的图像是一个被强制缩小50%的图像时, 它不会去缩小,也不会去放大,而会以1:1像素比例直接绘制原图(big.jpg)
我这么说可能效果不明显, 有ip3和ip4的朋友, 可以访问下面的链接 来看看效果
http://data.wiyun.com/finscn/retina/r-test.html
当然 这么做也有缺点, 就是需要更大的图片,耗用更多的带宽和内存.
不过带来的好处是 效果更好 速度更佳.
本文为了更便于理解,使用img做了例子, 其实对于img而言,这种优化处理意义未必大, 但是对于canva html5动画一类的应用则很有意义.
我的html5 游戏引擎优化后 在ip4下性能提升明显.
最终如何取舍 看需求而定了.
分享到:
相关推荐
主要介绍了iphone的safari浏览器中实现全屏浏览的方法,同时介绍了Add to Home Screen功能的实现方法,需要的朋友可以参考下
delphi xe8开发,调用Safari浏览器安装ipa程序,检查ios网络状态
ios应用源码之左右上下划动屏幕切换图片显示pushimagewithuitouch
项目中指定界面横屏显示 其他都是竖屏显示。
IOS_safari关于IOS的webkit的源代码。
状态栏全屏模式下可设置状态栏样式:Web Clips 图标下方标题配置:链接应用使用链接调用系统应用:iOS Safari 会自动识别电话号码和邮件地址字符并添
IOS应用源码之左右上下划动屏幕切换图片显示PushImageWithUItouch .zip
ios--防照Safari浏览器视图切换效果
iOS 滑动图片实现验证。实现原理:自定义实现、开源项目原理、三方平台集成。
IOS父ViewController为竖屏,presentViewController强制旋转为横屏
2 视频编码的一些参数在像iphon4及低版本ios上可能需要调整。 测试时软硬件情况: 1 编译器:xcode:4.6,5.0 2 设备:iphone4(ios 6.1.3),iphone5(ios 7),ipad2 (ios6.1) 2 播放器:vlc 播放器 希望对初学者...
ios7.x以上,xcode5下实现ios safari访问页面地址直接安装ipa的方法
之前都是加载网页或者用MPMoviePlayerViewController直接弹出播放,横竖屏的切换都是通过手机自带的竖屏开关设置实现的,所以用户体验并不是太好,这里的demo在不通过横竖屏开关的情况下实现横主流播放器所具有的竖...
这是一个iOS中播放器横竖屏切换的demo
ios 模拟通知实现原理
iOS播放器特效,锁屏状态下显示专辑图片和信息
iOS下载图片,并且显示下载的实时进度,下载完成之后显示图片。
图片浏览器, 点击放大全屏显示, 再点击回到原来位置
IOS应用源码——左右上下划动屏幕切换图片显示PushImageWithUItouch.zip
大小屏切换