图片资源 Base64 化在 H5 页面里有用武之地吗

来源:http://www.sh-fengwen.com 作者:瘦身美容 人气:78 发布时间:2019-12-03
摘要:图片资源 Base64 化在 H5 页面里有用武之地吗 2016/12/15 · HTML5 ·Base64 原文出处:凹凸实验室    将图片资源转至base64格式后可直接放入页面作为首屏直出,也可以放入css文件中,减少请求

图片资源 Base64 化在 H5 页面里有用武之地吗

2016/12/15 · HTML5 · Base64

原文出处: 凹凸实验室   

图片 1

将图片资源转至base64格式后可直接放入页面作为首屏直出,也可以放入css文件中,减少请求,以加快首屏的呈现速度。
不过图片base64化,将带来一个臃肿的html或css文件,是否会影响页面的渲染性能,浏览器又支持如何呢?

Base64是一种基于64个可打印字符来表示二进制数据的表示方法

如何统计?

通过Navigation Timing记录的关键时间点来统计页面完成所用的时间,并通过Chrome开发工具来跟踪细节

JavaScript

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

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+微信环境中一直是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 //页面接收到数据开始到呈现完毕的总时间。
什么是Base64图片呢?

使用Base64字符串来代替图片的URL属性,如下所示,以data:image/png;base64 开头。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAwCAYAAACVMr0DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyMThFN0FFOTYzNDAxMUU0Qjg0MEY0MTgyQzZENjY3MSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMThFN0FFQTYzNDAxMUU0Qjg0MEY0MTgyQzZENjY3MSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjIxOEU3QUU3NjM0MDExRTRCODQwRjQxODJDNkQ2NjcxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjIxOEU3QUU4NjM0MDExRTRCODQwRjQxODJDNkQ2NjcxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+pUgM2QAABbxJREFUeNrkW01sG0UUnqQrBWHamEqt1FKIkZBSCWH7UA49lDicuAC+U6mGA1LFoemhF6gU9wASJ3IA5YS6UYMEJxLgwImu20MOjYQdCSmHStj8RWpRsd0fEakonRfeVpPdt7Mz3tl4J33Sar2zv/727fe+92ZmZGtri9lqK7lima/yw3yGk/fXPNn+EdsA5qACoHW+1PgynoFH6vFlCZ6Jg922GmAObpWv3IwAS9m7HGRXbBi1CNwKX31rGtxc8Tg7cOpVU5e7zJ+zZp0HIy20TYILwE5+M8fGXji6vf1f/x67+f5Fduf7n0xc/kWfLmzx4BnTniuCC7bvwDNs8mveNnHUxOXrUg9+6cjhKv4p0dybG7dc4ZgCBhrf2uJ+4prwiVfENn58XdGDwRsmTIELlPDyj1+S+/74ZJ79/vG8ids8y72460jeQInwItEA4Flhu4EBSPZWp6LedAw9TDD7DCSk5xCeVibA7fDlZ77P356WeKonANngXlqJOLSh8aBG7cHa+jbnAi2ENNe1VaP3Go3gu6DNGXqjorWH5VoPe3fZrxc+DbXf/uo71r9+w+i9HIInzxBCGj79zwa9CfJ1MEgVeDtFEVIuN2W3F5fZZucvNv7aie3tf/lvaDNtjoKnzvE/3BXoYRCjaGKK4GQVLieDlg/UoPYUVw/Pf3RW6xyVYOgIXuYS3NtSjfQDAGzMANxjH57ddapRAXhUAJeihmrSh+DXzpu4jq3mcABmIsCtcO8dJBDlie2oIFkLSDBtesg8wAQgLfjjHNym5DwKsDJ/Wc0AzbTxJdUlyYcIsGcqwIEiuHVlORMAi14LAa0OlMGXM5LzShQVEu1NBFHM3jyJtxuzzc6fUslFBcY0lISDevQ8psJdbK8SXl3SvLYv73YUaTjg0wLIoReyW55FBcb+9VXzAAc/SaxDBDXrkgbALQSqjvKuGSHHKOvuuSCnmMm5CeRaOwAwUIaXRTDGNLQwpNQqWZ9DeO8UIfzzWGPQtSaREheEmkemPBjKl+p6el4PYNSrboRiyGt85nGKoxAV4GKUi70UgeB6jC5qJ/WqNpEiU8WfoRtU2O631pWOBcWhmmiU0XNLMcGnMQhFgFcG6xh4zwJBRUM1APeXN94z7sHVOIWAn26SekIjQDFllqHy5W6rCFldQSfQzQic2iSUxBMHcAfXsu4ZnUAnBjF4MeeEbUpre3sVYA9rAB56aBr9Xx6RVjNJCm3EZJ2b9PEnYChU7HEruaJWJpe652BGJ0u3l9ketaTjIi5x8EZgUTh2acB9T06QS2gA4uywAd78Tb1iNjbxHDv0zlt2AIx6mKKJBaGKZ8yiut+ho1N1YAlweFKAUx06BRkiX2oxSiGx9z5dPB7Oynp39wQHy6yK2raGYBfYzqFWvtUT89z4/nBWtrZuF8BYr9CpU5wLyDE3otZRihgfoSWvRLvzw1UrVQSVKjcVX85MTJIyi6VSbTv45uuhNkNDUHddRQQB6Chq6L9ZeFTQAq7Ffj/oB6zoliyPfHB6J/f277F/JADvy+9XGnDt8OOOEcV3uL5xgCOGVKmMV7vAl4uEavB5WRxoCPQB2WRZdbjAodNvh+gBBlE/lAS43CuTWtld0q9DlSKCkR5G/MgAhg5PGIG5GuDdhg+uQDutQApdUH34wxxg0aCrPm162Ph8MRWKEEFqMXnpEkqTVUyPK5TnBlLoCsq3qDRaiTIAXPDeoFSDnmITBl8FJCi66kQ30XgMXoTX1iM8OwSuCDL7f9CKS9AQFF+6K7kiVPrIIpRsbgWAYbqArmFNHYBl4PkWxZ3nY87zga5hFz9lLpVmb3yxyPrXbkg5d0i2AI4BP5RmGYEGTiOdVbU0ZhmlbI9nGVkzERHnyV214FF3TEa0ZiIizgmeRrrKovWYzTM9BZBBxl3KENA9TJzKQXCtoogI2hj2bPsuB1UqI60G2AZ7JMAA5DJcXbfGMfsAAAAASUVORK5CYII=">
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAwCAYAAACVMr0DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyMThFN0FFOTYzNDAxMUU0Qjg0MEY0MTgyQzZENjY3MSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMThFN0FFQTYzNDAxMUU0Qjg0MEY0MTgyQzZENjY3MSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjIxOEU3QUU3NjM0MDExRTRCODQwRjQxODJDNkQ2NjcxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjIxOEU3QUU4NjM0MDExRTRCODQwRjQxODJDNkQ2NjcxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+pUgM2QAABbxJREFUeNrkW01sG0UUnqQrBWHamEqt1FKIkZBSCWH7UA49lDicuAC+U6mGA1LFoemhF6gU9wASJ3IA5YS6UYMEJxLgwImu20MOjYQdCSmHStj8RWpRsd0fEakonRfeVpPdt7Mz3tl4J33Sar2zv/727fe+92ZmZGtri9lqK7lima/yw3yGk/fXPNn+EdsA5qACoHW+1PgynoFH6vFlCZ6Jg922GmAObpWv3IwAS9m7HGRXbBi1CNwKX31rGtxc8Tg7cOpVU5e7zJ+zZp0HIy20TYILwE5+M8fGXji6vf1f/x67+f5Fduf7n0xc/kWfLmzx4BnTniuCC7bvwDNs8mveNnHUxOXrUg9+6cjhKv4p0dybG7dc4ZgCBhrf2uJ+4prwiVfENn58XdGDwRsmTIELlPDyj1+S+/74ZJ79/vG8ids8y72460jeQInwItEA4Flhu4EBSPZWp6LedAw9TDD7DCSk5xCeVibA7fDlZ77P356WeKonANngXlqJOLSh8aBG7cHa+jbnAi2ENNe1VaP3Go3gu6DNGXqjorWH5VoPe3fZrxc+DbXf/uo71r9+w+i9HIInzxBCGj79zwa9CfJ1MEgVeDtFEVIuN2W3F5fZZucvNv7aie3tf/lvaDNtjoKnzvE/3BXoYRCjaGKK4GQVLieDlg/UoPYUVw/Pf3RW6xyVYOgIXuYS3NtSjfQDAGzMANxjH57ddapRAXhUAJeihmrSh+DXzpu4jq3mcABmIsCtcO8dJBDlie2oIFkLSDBtesg8wAQgLfjjHNym5DwKsDJ/Wc0AzbTxJdUlyYcIsGcqwIEiuHVlORMAi14LAa0OlMGXM5LzShQVEu1NBFHM3jyJtxuzzc6fUslFBcY0lISDevQ8psJdbK8SXl3SvLYv73YUaTjg0wLIoReyW55FBcb+9VXzAAc/SaxDBDXrkgbALQSqjvKuGSHHKOvuuSCnmMm5CeRaOwAwUIaXRTDGNLQwpNQqWZ9DeO8UIfzzWGPQtSaREheEmkemPBjKl+p6el4PYNSrboRiyGt85nGKoxAV4GKUi70UgeB6jC5qJ/WqNpEiU8WfoRtU2O631pWOBcWhmmiU0XNLMcGnMQhFgFcG6xh4zwJBRUM1APeXN94z7sHVOIWAn26SekIjQDFllqHy5W6rCFldQSfQzQic2iSUxBMHcAfXsu4ZnUAnBjF4MeeEbUpre3sVYA9rAB56aBr9Xx6RVjNJCm3EZJ2b9PEnYChU7HEruaJWJpe652BGJ0u3l9ketaTjIi5x8EZgUTh2acB9T06QS2gA4uywAd78Tb1iNjbxHDv0zlt2AIx6mKKJBaGKZ8yiut+ho1N1YAlweFKAUx06BRkiX2oxSiGx9z5dPB7Oynp39wQHy6yK2raGYBfYzqFWvtUT89z4/nBWtrZuF8BYr9CpU5wLyDE3otZRihgfoSWvRLvzw1UrVQSVKjcVX85MTJIyi6VSbTv45uuhNkNDUHddRQQB6Chq6L9ZeFTQAq7Ffj/oB6zoliyPfHB6J/f277F/JADvy+9XGnDt8OOOEcV3uL5xgCOGVKmMV7vAl4uEavB5WRxoCPQB2WRZdbjAodNvh+gBBlE/lAS43CuTWtld0q9DlSKCkR5G/MgAhg5PGIG5GuDdhg+uQDutQApdUH34wxxg0aCrPm162Ph8MRWKEEFqMXnpEkqTVUyPK5TnBlLoCsq3qDRaiTIAXPDeoFSDnmITBl8FJCi66kQ30XgMXoTX1iM8OwSuCDL7f9CKS9AQFF+6K7kiVPrIIpRsbgWAYbqArmFNHYBl4PkWxZ3nY87zga5hFz9lLpVmb3yxyPrXbkg5d0i2AI4BP5RmGYEGTiOdVbU0ZhmlbI9nGVkzERHnyV214FF3TEa0ZiIizgmeRrrKovWYzTM9BZBBxl3KENA9TJzKQXCtoogI2hj2bPsuB1UqI60G2AZ7JMAA5DJcXbfGMfsAAAAASUVORK5CYII=);

场景1,内嵌至css文件中

为何要使用Base64编码图片呢?
  • 使用Base64编码可以减少网络请求
    将图片转为字符串后,图片文件会随着HTML元素一并加载,这样就可以减少HTTP请求的次数
  • 采用Base64编码的图片是随着页面一起加载的,不会造成跨域请求问题
  • 没有清理图片缓存的问题

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

一张大小为50kbjpg格式图片,应用到9×15=135个dom做背景图,模拟雪碧图的模式,多个节点引用同一张图片做背景,(示例)如图。
图片 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
Base64图片的弊端?
  • Base64编码后生成的字符串大小会增加约30%,增大HTML/CSS体积,而且可读性差
  • IE8-不兼容,由于IE8以下不支持data url格式

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、调整图片体积

调整上面图片的(压缩品质)体积,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

本文由美高梅游戏平台网站发布于瘦身美容,转载请注明出处:图片资源 Base64 化在 H5 页面里有用武之地吗

关键词:

上一篇:教你用webgl快速创建一个小世界

下一篇:没有了

最火资讯