新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

将图片资源转至base64格式后可直接放入页面作为

图形财富 Base64 化在 H5 页面里有发挥专长吗

2016/12/15 · HTML5 · Base64

初藳出处: 坑坑洼洼实验室   

图片 1

将图片财富转至base64格式后可一直纳入页面作为首屏直出,也能够放入css文件中,收缩须要,以加速首屏的表现速度。
可是图片base64化,将推动二个重叠的html或css文件,是或不是会影响页面包车型客车渲染质量,浏览器又帮衬什么呢?

什么样总计?

透过Navigation 提姆ing记录的主要性时刻点来总计页面达成所用的年月,并通过Chrome开辟工具来跟踪细节

JavaScript

var timing = window.performance.timing timing.domLoading //浏览器早先深入剖判 HTML 文书档案次轮接收的字节 timing.domInteractive // 浏览器完结深入解析而且有着 HTML 和 DOM 创设完结timing.domContentLoaded伊芙ntStart //DOM 深入解析实现后,网页国内资本源加载最初的年华 timing.domContentLoadedEventEnd //DOM 剖析完毕后,网页内能源加载成功的年月(如 JS 脚本加载试行实现卡塔尔timing.domComplete //网页上存有能源(图片等卡塔 尔(英语:State of Qatar) 下载完毕,且准备稳妥的小时

1
2
3
4
5
var timing = window.performance.timing
timing.domLoading //浏览器开始解析 HTML 文档第一批收到的字节
timing.domInteractive // 浏览器完成解析并且所有 HTML 和 DOM 构建完毕timing.domContentLoadedEventStart //DOM 解析完成后,网页内资源加载开始的时间
timing.domContentLoadedEventEnd //DOM 解析完成后,网页内资源加载完成的时间(如 JS 脚本加载执行完毕)
timing.domComplete //网页上所有资源(图片等) 下载完成,且准备就绪的时间

如上定义来自chrome官方文书档案,在别的意况下可能会有出入,从测验结果看,上面的build时间在android Wechat蒙受中央市直机关接是0,对此大概是因为渲染机制差异,此处不做深远测量试验。除osx chrome之外碰着的多少仅作参谋。

JavaScript

build = timing.domComplete - timing.domContentLoadedEventStart //间距记录网页国内资本源加载和表现时间。 complete = timing.domComplete - timing.domLoading //页面选拔到多少起先到展现完结的总时间。

1
2
build = timing.domComplete - timing.domContentLoadedEventStart //间隔记录网页内资源加载和呈现时间。
complete = timing.domComplete - timing.domLoading //页面接收到数据开始到呈现完毕的总时间。

场景1,内嵌至css文件中

1、原生引进图片链接做背景图

一张大小为50kbjpg格式图表,应用到9×15=139个dom做背景图,模拟Coca Cola图的方式,两个节点引用同一张图纸做背景,(示例卡塔 尔(英语:State of Qatar)如图。
图片 2
测试环境:Mac OS X EI Capitan 10.xx Chrome 48.xx
其它辅助测试机器: iPhone 6 plus iOS 9.xx; 魅族Note Android 4.xx

实际行使进度中,此外版本和机型的Android手提式有线电话机还会有待测验

关闭缓存状态下,build:150ms | complete: 200ms(总时间受互连网状态等因素影响,数据做比较用卡塔尔
图片 3

开启缓存状态下,build: 7ms | complete: 59ms(包含以下牢固意况下每每测量试验的平均值,截图为最附近平均值的气象,暗中同意数据来源于Mac Chrome[48.XX版本])

图片 4

测试环境 build(单位:ms) complete(单位:ms)
OS X Chrome 7 59
iOS 微信 45 90
OS X Safari 50 100
Android 微信 0 120

2、引进base64格式图片做背景图

将下边50kb大小的jpg图片转换为base64格式,加在css文件中。

闭馆缓存状态下,build:80ms | complete: 280ms

图片 5
打开缓存状态下,build: 160ms | complete: 210ms

图片 6

测试环境 build(单位:ms) complete(单位:ms)
OS X chrome 160 210
iOS 微信 35 100
OS X Safari 9 90
Android 微信 12 150

3、调度图片体量

调动方面图片的(压缩品质卡塔 尔(英语:State of Qatar)容量,base64化后,对应的css文件大小也随着变动

图片大小 10kb 20kb 45kb 100kb 180kb
对应css文件大小 27kb 42kb 76kb 150kb 260kb
Rendering时间 30ms 46ms 81ms 156ms 258ms

图片 7

4、调解援引次数

50kb大小的图纸,base64化后,调解援引图片做背景图的dom的个数

引用次数 10 20 50 100 135
Rendering时间 15ms 19ms 44ms 74ms 83ms

图片 8

浅析和计算:

在OSX Chrome蒙受下,将50kb的图片base64后归入样式中,build进程增长了约20倍,使用Timeline工具得以看来,总计样式堵塞了全方位经过。

图片 9

  1. 比起一贯引进图片地址,css文件中引进base64格式的图片对体制渲染的属性消耗分明,假使大气施用,会带给耗能和发热的难题,需谨慎使用。
  2. Rendering消耗的大运同css文件大小、引用次数大约成正比(未测量检验此外极限状态卡塔尔国,在网络条件卓绝的4G境况,50~70ms的RTT(往返时延卡塔尔情状下,平日活动网络的场景会更差,对于首屏优化,合适的应用依然很值得的。
  3. 图形转成base64编码后,文书档案大小较原来的小说件大了有的,而透过 gzip 后两个差相当的少从未分别。

场景2,内嵌至js文件中

1、原生方式一贯加载多张图片

大小10~70kb共9张图纸。总大小约300kb

闭馆缓存:build: 300ms | complete: 310ms

图片 10
展开缓存:build: 110ms | complete: 120ms

图片 11

测试环境 build(单位:ms) complete(单位:ms)
OS X Chrome 110 120
iOS 微信 50 100
OS X Safari 148 150
Android 微信 50 100

2、转换来base64格式,归并诉求

将地点的图样转成base64后,放在js文件中,加载进来。

关闭缓存:build: 0ms | complete: 400ms

图片 12

翻开缓存:build: 0ms | complete: 80ms

图片 13

测试环境 build(单位:ms) complete(单位:ms)
OSX Chrome 110 120
iOS 微信 0 35
OS X Safari 7 70
Android 微信 0 250

3、相比较分化网速下大器晚成道央浼和统生机勃勃诉求的加载效用

动用上述1、2的测量试验demo分别在3G、4G网速条件下测量检验结果如下:

  • 在互连网情状差的气象下,合併央求显明缩水了全部加载时间;
  • 在互联网景况较好的WIFI和4G下则出入超小。
测试环境 图片直接加载 complete(单位:ms) base64合并请求 complete(单位:ms)
3G 6000 4500
4G 450 400
WIFI 320 340

图片 14

浅析和总计:

base64后的的js财富达381kb,在二个线程里加载,消耗多量时间,从总结结果看,在渲染品质差距上并不曾场景1那么鲜明。
但有缓存的意况下,页面渲染完毕的进程依旧更加快。
从Timeline里观察细节,剖析那几个近400kb的js文件对任何渲染进程招致了一定压力,但是总共40ms的拆解解析时间是一心能够选拔的。

图片 15

  1. 从html里直直接援用图片链接和base64图片对渲染质量的影响大概从不分化,在互联网条件差的情状下,合併央浼却能大大进步加载功用;
  2. 直接援引至html,不可能缓存,将base64后的图形能源放在js文件中管理,方便设置缓存。
  3. 有一个毛病正是图表财富base64化要求扩张创设工具来支撑。

采纳提议

  1. 图表财富的base64编码进css文件会拉动一定的属性消耗,需谨严使用。
  2. 将图片财富编码进js文件中,管理和预加载H5应用的图纸能源,合理的集结伏乞能够大大升高页面体验。

    1 赞 1 收藏 评论

图片 16

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:将图片资源转至base64格式后可直接放入页面作为

您可能还会对下面的文章感兴趣: