近期研究着前端性能的优化方面的知识,并以博客记之。之前有相同系列的文章(前端性能优化 -- 图片懒加载 (lazyload image)),这次继续是关于图片的处理,CSS sprites 和 base64 格式图片,这两种处理都是通过减少了 http 的请求来达到前端性能优化的效果,请求减少,与服务器连接次数减少,加载页面的时间就快了,如是甚好。
Css Sprites(雪碧图或 css 精灵),是网页图片处理的一种方式,它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
将许多的小图片整合到一张大图片中,利用 css 中的 background-image 属性,background-position 属性定位某个图片位置,来达到在大图片中引用某个部位的小图片的效果。
html 代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>css Sprites</title>
- </head>
- <body>
- <ul class="container">
- <li class="icon icon-issue"></li>
- <li class="icon icon-upload"></li>
- <li class="icon icon-passage"></li>
- </ul>
- </body>
- </html>
css 代码:
- .container {
- overflow: hidden;
- width: 50px;
- height: 200px;
- background - color: #faa755;
- }
- .icon {
- margin: 0 auto;
- margin - top: 20px;
- width: 40px;
- height: 30px;
- background - image: url(icon.png);
- list - style - type: none;
- }
- .icon - issue {
- background - position: 0 0;
- }
- .icon - upload {
- background - position: 0 - 50px;
- }
- .icon - passage {
- background - position: 0 - 100px;
- }
base64 是网络上最常见的用于传输 8Bit 字节代码的编码方式之一,要求把每三个 8Bit 的字节转换为四个 6Bit 的字节,Base64 是网络上最常见的用于传输 8Bit 字节代码的编码方式之一。
通俗点讲:将资源原本二进制形式转成以 64 个字符基本单位,所组成的一串字符串。
比如一张图片转成 base64 编码后就像这样,图片直接以 base64 形式嵌入文件中(很长没截完):
图片生成 base64 可以用一些工具,如在线工具,但在项目中这样一个图片这样生成是挺繁琐。
特别说下,webpack 中的 url-loader 可以完成这个工作,可以对限制大小的图片进行 base64 的转换,非常方便。
上面说的两个处理图片共同点是都是应用于小图片,都能减少请求数,但并不是所有的图片都适用,尺寸大的图片就不应使用。
两种方式都有利有弊,应该适应场景使用,权衡利弊,方可将这两种方法能力发挥好。
来源: http://www.cnblogs.com/Ry-yuan/p/7392492.html