前端性能分析与优化--图片资源

常见图片格式

详见:聊一聊几种常用web图片格式:gif、jpg、png、webp

图片应用场景

普通展示图片、图标等

示例

代码:https://github.com/js-fu/js-fu.github.io/tree/master/fe-img

1.html 普通静态页面

https://js-fu.github.io/fe-img/1.html

首先看到这是一个的普通静态页面,一个图文列表。在Disable cache和Slow 3G的环境下打开该页面,得到如下performance。

1.jpg

分析上图,可看出DOMContentLoaded事件在2.37秒执行。load事件要等到全部图片资源都加载完,到了29.81秒才执行。如果通过监听load事件的话,要等很久才执行,体验比较差。而且静态页面内容是固定的,不灵活。

DOMContentLoadedload 事件
DOMContentLoaded: 当纯 HTML 被完全加载以及解析时,DOMContentLoaded 事件会被触发,而不必等待样式表,图片或者子框架完成加载。 $(function() {})
load: 当整个页面及所有依赖资源如样式表和图片都已完成加载时,将触发load事件。它与 DOMContentLoaded 不同,后者只要页面 DOM 加载完成就触发,无需等待依赖资源的加载。

优化

2.html 使用ajax获取图文列表数据

https://js-fu.github.io/fe-img/2.html

这个页面的标题“图文列表”,是固定的。图文资源模拟用ajax获取。同样在Disable cache和Slow 3G的环境下打开该页面,得到如下performance。

2.jpg

分析上图,可看出DOMContentLoaded事件在2.38秒执行,跟1.html差不多。load事件提前到了2.39秒,因为加载图片资源是异步去加载的。但是仍有一个问题,不在可视范围内的图片也加载了,不必要,可以等到页面滚动,等图片到了可视范围内再去懒加载。

3.html 懒加载

https://js-fu.github.io/fe-img/3.html

这个页面,在 2.html 的基础上增加了懒加载的功能。初始渲染页面的时候,只下载在了出现在首屏的两张图片。

原理:监听滚动事件、getBoundingClientRect

object.getBoundingClientRect()

4.html 预加载

https://js-fu.github.io/fe-img/4.html

这个页面,在 2.html 的基础上增加了预加载的功能。首屏显示loading蒙层和加载资源的进度条,等到加载完,展示实际页面,看图文列表里的图片都是预加载过的资源,浏览流畅很多。

5.html 雪碧图

https://js-fu.github.io/fe-img/5/5.html

对于一些小图片,比如图标等,可以采用雪碧图的方案,讲多个小图片合成一个图片,减少网络请求。

雪碧图

6.html iconfont

https://js-fu.github.io/fe-img/6.html

对于图标等,也可以采用字体图标iconfont代替图片,图标可以像字体一样修改大小、颜色等样式。

7.html base64

https://js-fu.github.io/fe-img/7/7.html

对于一些尺寸非常小的图片,可以使用base64的方案,将图片的base64编码写入html、css中。可以减少网络请求。

webpack配置中可以用url-loader,设置一个界限值,小于界限值的时候,会自动把小图片转成base64

8 骨架屏

9 检测设备网络状况,使用OSS服务,采用不同质量的图片,是图片大小和图片质量达到一个平衡

网络状况 MDN NetworkInformation

阿里云OSS ,可以实现图片质量变换、模糊、旋转、裁剪等操作。

其它

cdn、gzip等

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,468评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,620评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,427评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,160评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,197评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,334评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,775评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,444评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,628评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,210评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,767评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2 341