【web前端优化之图片模糊到清晰】看我QQ空间如何显示相片
此篇文章估计不会太长,有移除首页的风险,但是老夫(称老夫是因为我们真正的叶小钗其实都100多岁啦)是不会怕滴。所以,我来了哟!
题外话:今天我们一起还看了一道前端的面试题,而后我本来还想多找几道来做做,但是没找到什么合适的,各位有什么好的前端面试题请给我留言哦,我们一起来分析面试题进步哟!
前端时间,我与我们的产品有一次讨论,是针对图片压缩的,因为我对图片或者说PS这块是个小白,所以当时做了一个广告图片有100来k 也直接给传上去了,结果被我们的同事搞起来一压缩,便只有50多k了,此次交流对图片压缩这块有了一点点心得,并且为第二次交流埋下伏笔,第二次便是图片 由模糊变清晰的研究了。
此处我先对我们的图片格式做一下普及吧,参考:
GIF
透明类型,可以全透明或者全不透明,半透明这种事情就不要找他了,并且这个家伙可以做动画哦
gif是一种无损耗的图片格式
gif采用lzw算法进行压缩,当压缩gif过程中像素由上到下进行压缩,也就是说横向的gif图片比纵向的小(500*10比10*500小)
gif支持可选择性的间隔渐进显示
JPEG
不支持透明
不支持动画
该图片非常容易损耗
支持隔行渐进显示(ie不支持,ie会再整个图片信息完全到达后再显示)
jepg尤其适合web上面的摄影图片和数字相册
PNG
支持各种透明,但在IE6下有bug需要使用滤镜处理
不支持动画
任何操作都不会损耗其质量
支持间隔渐进增强,但会造成图片尺寸变大:
png8(布尔透明)
相当于静态gif,只有256色,支持索引透明,就是指定一个像素点不是透明
png8(alpha透明)
可指定像素点的透明度,例如50%透明度
优点在于比png24/32小,效果一样,缺点为ie6不支持
png24
不透明,颜色很多不止256色,PS导出的png24事实上为png32
png32
和PS里面的PSD一样,包含图层和通道信息
以上是关于图片的一些信息,我们大概了解下便是,其中我要说一说其中的PNG,特别是交错png
PNG交错在使用浏览器欣赏该图片时就会以由模糊逐渐转为清晰的效果方式渐渐显示出来。PNG先进的交错式方法,使图像得以水平及垂直方式显像在屏幕上,加快了下載的速度,作用:交错可使下载时间感觉更短,并使浏览者确信正在进行下载。PNG无交错、不交错就没这个作用。
我们知道img标签在dom加载时候是不会加载的,而是在dom结构全部出来后并形成了渲染树(布局结束),才开始加载。
而其加载顺序也是从上而下的加载,意思是图片我们是先看到上面再看到下面,但是很明显这不是一个好的显示方式,我们若是一开始可以看到模糊的图形然后再慢慢变清晰是不是好很多呢?
肯定好很多啦。。。
于是我们讨论到如何实现,但是就说到了交错PNG,我当时虽然信了,因为我对此不太了解,但是下来思考下却感觉有点不对劲!
现在我们来想象下QQ空间的做法(这块纯粹瞎扯),我现在作为一个用户,我上传图片来了
① 我想将QQ空间作为云存储的地方,上传了我2M的毕业照
② 空间根据需求生成了一张缩略图与一张大图
③ 我们首先看到缩略图,而后看到大图,点击原图时候便看到我最初2M的照片
以上是我以为的逻辑,QQ空间是不是这个逻辑我们不去关注他,因为站在用户角度,我一定是想保留我最初的东西。
好了事到如今,QQ空间究竟怎么做的呢???那个太复杂了,我们也不去关注,我这里说下我是怎么做的。
我们的相册显示一般是这个样子的:
上面是缩略图,下面是大图,在这里我们其实可以对其缩略图做文章!!!
我们在大图显示完之前可以用缩略图“代替”大图吗,来看看我们的逻辑:
① 缩略图在相册上方,其最先加载,就算在下方,因为缩略图尺寸很小加载十分迅速
② 最初将缩略图放到大图显示位置,将其大小设置为大图大小(此尺寸有多种方法可获取,比如上传时候便计算结束)
② 将大图布局置于缩略图前,因为缩略图已经展示,但是因为过大而显得有点模糊,但大图慢慢加载其由上至下变得清晰给人一种模糊到清晰的错觉
④ 流程结束
于是我们来看看我们的QQ空间吧,看之前我们用限速工具,给我们的火狐限速:
PS:限速后开空间巨慢。。。
怎么样,够慢了的吧!
注意看其由上到下的变化哦,然后我这里找出了证据
PS:我打开网上限制怎么还是很慢,看来是我网速慢的原因啦。。。
请看我这边用红框圈着的三块地方:
第一个为相册显示的容器,relative定位的
第二个为上面的小缩略图,很小的那种哦:
看吧,这里活生生的将人家扯那么大。。。。。
第三个框便是主角,大图啦:
结论
从其整个排布来看,与我们思考的一致,他这样做好处多多的有哦,比如我们这里上面的图片导航:
我们看到上面的缩略图早就显示出来了,点击下一张的时候缩略图会展示出来,不会出现空白的断层,然后大图慢慢的显示让用户愿意停在那里。
好啦,今天我们研究了一道面试题,后面又研究了图片由模糊到清晰的方案,若是您有更好的解决方案不要藏着哦!
转自:http://www.kankanews.com/ICkengine/archives/2912.shtml
【web前端优化之图片模糊到清晰】看我QQ空间如何显示相片相关推荐
- Web 性能优化: 图片优化让网站大小减少 62%
摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...
- 关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)...
Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...
- WEB前端优化之内容篇
WEB前端优化之内容篇 Web前端优化过程中难免对相关的前台内容进行重新安排.其中主要的一些点如下: 1尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能 ...
- web前端优化10点总结
web前端优化10点总结 tenfy 发表于2010年01月12日 11:41 阅读(5) 评论( 1) 分类: web前台开发 举报 实际上,我们通过前台web端的梳理和逻辑的优化(哪怕是一个 ...
- Web前端优化最佳实践
一.Web 前端优化最佳实践之内容篇 Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献.广为人知的优化规则也由 13 条到 14 条,再 ...
- Web前端优化工具集锦
1. Google PageSpeed Google提供了 PageSpeed工具,这是一个浏览器插件,可以很好地应用上文中Google所提到的Web优化实践--帮助你轻松对网站的性能瓶颈进行分析, ...
- web资源优化之图片加载的时机
前言 图片资源是WEB项目中很重要的组成部分,也是交互设计中一个很重要的体现,往往一张图能胜过千言万语,所谓"一图胜白言"就是这个道理.然后大量的图片也会给服务器带来很大的压力,据 ...
- [译]Web 性能优化: 图片优化让网站大小减少 62%
这是 Web 性能优化的第二篇,上一篇在下面看点击查看: Web 性能优化: 使用 Webpack 分离数据的正确方法 图像是web上提供的最基本的内容类型之一.他们说一张图片胜过千言万语.但是如果你 ...
- Web前端优化最佳实践及工具集锦
摘要:前端的性能对于Web应用的用户体验来说非常重要.不要以为你的Web应用的性能已经足够好了,其实还会有很多可以提升的地方.本文将介绍Google和雅虎关于前端优化的最佳实践以及工具,你可以逐一检验 ...
最新文章
- Java 责任链模式
- JavaScript学习笔记 - 入门篇(1)- 准备
- 分享Silverlight/WPF/Windows Phone一周学习导读(8月15日-8月19日)
- WX公众号授权登录的简单应用
- Python3打印当前系统时间
- 【项目】itdage-java获取天气和发短信
- c语言磁盘文件只有写没读,C语言的磁盘文件问题
- switch语句使用注意事项
- lamp 重启mysql_lamp常用命令 --Ubuntu下启动/重启/停止apache,mysql服务器
- 关于使用类成员函数作为回调的方法
- dataframe 绘图——按照每列出一个图(df.plot)
- IDA的新手入门指南
- 使用C++实现“生命游戏“
- 知识笔记 - 平头哥ratel安卓Hook框架的安装与简单使用
- 洛谷——P1560 [USACO5.2]蜗牛的旅行Snail Trails
- 数学乐 --- 对数函数(指数函数的反函数)
- 为什么手机里的小爱音响app里搜不到家里的小爱音箱_水哥岁末诚意奉献:基于米家App的家庭智能安全方案详解...
- pythontkinter图片_Python tkinter实现图片标注功能(完整代码)
- 每天花2小时学习5大学习网站!
- PC端微信登录实现流程
热门文章
- 分糖果(信息学奥赛一本通-T1380)
- 信息学奥赛一本通C++语言——1090:含k个3的数
- 信息学奥赛C++语言:等级化的成绩
- Spoken English-口语-练习频次
- 27 FI配置-财务会计-外币评估-定义评估方范围
- dbcp释放不了mysql链接_spring dbcp连接不释放-问答-阿里云开发者社区-阿里云
- python time时间戳_time和datetime时间戳---python
- CUDA peer to peer多GPU间内存copy技术
- html5元件的作用,寄存器的作用是什么
- PSPNet-tensorflow实现并训练数据