
课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
众所周知,图片的优化处理,是WEB性能优化的一部分;对于PNG格式的可以使用雪碧图,JPG的可以适当的优化,当然还有DataURL技术,这个就是达内web前端培训小编今天要分享的内容。
了解DataURL
说到DataURL技术,简单的说就是图片另外一种显示方法而已。
这个是常用的图片应用格式。这种方式中,src&background属性指定了一个远程服务器上的资源。当网页加载到浏览器中时,浏览器会针对每个外部资源都向服务器发送一次拉取资源请求,占用网络资源。大多数的浏览器都有一个并发请求数不能超过4个的限制。这意味着,如果一个网页里嵌入了过多的外部资源,这些请求会导致整个页面的加载延迟。而使用Data URL技术,图片数据以base64字符串格式嵌入到了页面中,与HTML成为一体。
DataURL兼容性
几乎所有的现代浏览器都支持Data URL格式,包括火狐浏览器,谷歌浏览器,Safari浏览器,opera浏览器。IE8也支持,但有部分限制,IE9完全支持。
DataURL的优缺点
在本次项目的优化中,我发现并不是所有的图片都能用DataURL技术的,有时候你用它会起到反作用,这个不是我们想看到的结果。比如我们有张50K的PNG图,经过DataURL处理后,发现现在CSS的文件大小比原有的CSS要大了80K,这时候你可以放弃了,果断放弃它,保持原来的png。当然这里想提醒下大家,如果要用DataURL技术,尽量要把图片压缩到最小,这样占用内存会小很多。
那我们如何正确使用DataURL技术呢。
1、 当图片很小(我一般都是10K以下的)时,但是占用一个HTTP请求显得太浪费时,可以用这个技术。
2、当图片是服务器端生成,并且每个用户都不一致的时候,例如验证码,有的网站的头像也可以用这种技术。
(以上内容来源于web前端之家)
达内web前端技术非常丰富,如果想要掌握web前端技术,选择达内培训机构是非常不错的选择,前景不等人,机遇不等人,想要学习的亲们赶快报名吧!