澳门葡京真人网站:页面里有用武之地吗

图形财富 Base64 化在 H5 页面里有用武之地吗

2016/12/15 · HTML5 ·
Base64

初稿出处:
坑坑洼洼实验室澳门葡京真人网站:页面里有用武之地吗。   

澳门葡京真人网站 1

将图片能源转至base6四格式后可平昔放入页面作为首屏直出,也足以放入css文件中,减弱请求,以加快首屏的显示速度。
唯独图片base64化,将拉动二个交汇的html或css文件,是或不是会潜移默化页面包车型大巴渲染质量,浏览器又扶助什么呢?

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

调用方法

NSString *str  = [self image2DataURL:[UIImage imageNamed:@"guanbi.png"]];
//图片 转为    base64编码的文本
        private void button1_Click(object sender, EventArgs e)
        {
            OpenFileDialog dlg = new OpenFileDialog();
            dlg.Multiselect = true;
            dlg.Title = "选择要转换的图片";
            dlg.Filter = "Image files (*.jpg;*.bmp;*.gif;*.png)|*.jpg*.jpeg;*.gif;*.bmp|AllFiles (*.*)|*.*";
            if (DialogResult.OK == dlg.ShowDialog())
            {
                for (int i = 0; i < dlg.FileNames.Length; i++)
                {
                    ImgToBase64String(dlg.FileNames[i].ToString());
                }
            }
        }
        //图片 转为    base64编码的文本
        private void ImgToBase64String(string Imagefilename)
        {
            try
            {
                Bitmap bmp = new Bitmap(Imagefilename);
                this.pictureBox1.Image = bmp;
                FileStream fs = new FileStream(Imagefilename + ".txt", FileMode.Create);
                StreamWriter sw = new StreamWriter(fs);

                MemoryStream ms = new MemoryStream();
                bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
                byte[] arr = new byte[ms.Length];
                ms.Position = 0;
                ms.Read(arr, 0, (int)ms.Length);
                ms.Close();
                String strbaser64 = Convert.ToBase64String(arr);
                sw.Write(strbaser64);

                sw.Close();
                fs.Close();
               // MessageBox.Show("转换成功!");
            }
            catch (Exception ex)
            {
                MessageBox.Show("ImgToBase64String 转换失败\nException:" + ex.Message);
            }
        }

        //base64编码的文本 转为    图片
        private void button2_Click(object sender, EventArgs e)
        {
            OpenFileDialog dlg = new OpenFileDialog();
            dlg.Multiselect = true;
            dlg.Title = "选择要转换的base64编码的文本";
            dlg.Filter = "txt files|*.txt";
            if (DialogResult.OK == dlg.ShowDialog())
            {
                for (int i = 0; i < dlg.FileNames.Length; i++)
                {
                    Base64StringToImage(dlg.FileNames[i].ToString());
                }

            }
        }
        //base64编码的文本 转为    图片
        private void Base64StringToImage(string txtFileName)
        {
            try
            {
                FileStream ifs = new FileStream(txtFileName, FileMode.Open, FileAccess.Read);
                StreamReader sr = new StreamReader(ifs);

                String inputStr = sr.ReadToEnd();
                byte[] arr = Convert.FromBase64String(inputStr);
                MemoryStream ms = new MemoryStream(arr);
                Bitmap bmp = new Bitmap(ms);

                //bmp.Save(txtFileName + ".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);
                //bmp.Save(txtFileName + ".bmp", ImageFormat.Bmp);
                //bmp.Save(txtFileName + ".gif", ImageFormat.Gif);
                //bmp.Save(txtFileName + ".png", ImageFormat.Png);
                ms.Close();
                sr.Close();
                ifs.Close();
                this.pictureBox2.Image = bmp;
                if (File.Exists(txtFileName))
                {
                    File.Delete(txtFileName);
                }
                //MessageBox.Show("转换成功!");
            }
            catch (Exception ex)
            {
                MessageBox.Show("Base64StringToImage 转换失败\nException:" + ex.Message);
            }
        }

怎么着统计?

通过Navigation
Timing记录的主要时刻点来总结页面完毕所用的命宫,并透过Chrome开发工具来跟踪细节

JavaScript

var timing = window.performance.timing timing.domLoading
//浏览器伊始解析 HTML 文书档案第1堆接受的字节 timing.domInteractive //
浏览器完毕解析并且拥有 HTML 和 DOM
营造达成timing.domContentLoaded伊夫ntStart //DOM
解析达成后,网页国内资本源加载起首的光阴 timing.domContentLoaded伊芙ntEnd
//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.domContentLoaded伊夫ntStart
//间隔记录网页国内资本源加载和表现时间。 complete = timing.domComplete –
timing.domLoading //页面接收到数码起始到展现完结的总时间。

1
2
build = timing.domComplete – timing.domContentLoadedEventStart //间隔记录网页内资源加载和呈现时间。
complete = timing.domComplete – timing.domLoading //页面接收到数据开始到呈现完毕的总时间。
什么是Base64图片呢?

动用Base6肆字符串来代表图片的UTucsonL属性,如下所示,以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=);

落到实处格局

- (BOOL) imageHasAlpha: (UIImage *) image
{
    CGImageAlphaInfo alpha = CGImageGetAlphaInfo(image.CGImage);
    return (alpha == kCGImageAlphaFirst ||
            alpha == kCGImageAlphaLast ||
            alpha == kCGImageAlphaPremultipliedFirst ||
            alpha == kCGImageAlphaPremultipliedLast);
}
- (NSString *) image2DataURL: (UIImage *) image
{
    NSData *imageData = nil;
    NSString *mimeType = nil;

    if ([self imageHasAlpha: image]) {
        imageData = UIImagePNGRepresentation(image);
        mimeType = @"image/png";
    } else {
        imageData = UIImageJPEGRepresentation(image, 1.0f);
        mimeType = @"image/jpeg";
    }

    return [NSString stringWithFormat:@"data:%@;base64,%@", mimeType,
            [imageData base64EncodedStringWithOptions: 0]];

}

 

场景1,内嵌至css文件中

何以要运用Base6四编码图片呢?
  • 行使Base64编码能够削减网络请求
    将图片转为字符串后,图片文件会趁机HTML成分1并加载,那样就能够削减HTTP请求的次数
  • 运用Base6肆编码的图样是随着页面一起加载的,不会促成跨域请求难点
  • 不曾清理图片缓存的标题

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

一张大小为50kbjpg格式图表,应用到九×1伍=壹三15个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:
5九ms(包罗以下稳定意况下屡次测试的平均值,截图为最相仿平均值的境况,暗中同意数据来源于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
Base6四图片的坏处?
  • Base6四编码后生成的字符串大小会大增约十分三,增大HTML/CSS体量,而且可读性差
  • IE8-不合作,由于IE八以下不帮忙data url格式

相关文章