江苏龙网

  1. 首页 > 资讯 > 科技 > >

|小图标，大学问


图标虽小 ， 里面的门道可一点都不少 。 甚至可以说 ， 图标的演化是 Web 技术演化的一个缩影 。 本文将带你回顾一下图标简史 ， 了解一下图标技术的来龙去脉 。
古代：一个图标一张图
史前时代的图标 ， 正如我们的直觉一样 ， 就是一张图片 。 那时候的网络很慢 ， 一分钟只够下载一个页面 ， 因此内容为王 ， 美观是次要的 ， “没什么用”的图标还没有被人们视为页面上的必备元素 。 图标个数少、使用频率低 ， 自然就没人在上面花心思了 。
近代：CSS Sprites（雪碧图）
随着网上内容迅速丰富 ， 内容的比拼已经没有更多花样可玩了 ， 于是网站的竞争转向了“用户体验”领域 。 当然 ， 后来内容又重新回到了舞台中央 ， 不过这已经是后话了 。
在体验方面追求差异化的方式很多 ， 而在宽带网络还不够普及的时代 ， 最直观的方面就是加载速度 。然而“一个图标一张图”的方式在加载速度方面受到了严重限制 。 限制主要来自两个方面：建立连接的时间 ， 和浏览器的并发下载数量限制 。 前者来自 HTTP 协议 ， 而后者则来自浏览器的实现 。
|小图标，大学问
本文插图

HTTP 方面的限制很容易理解 ， 代理、DNS、握手、发送请求、TTFB 的时间对于像图标这样的小文件来说很可能远超下载内容的时间 。
浏览器的并发限制其实在技术上来说是很有必要的 。 如果不限制并发下载数 ， 一方面浏览器就会开很多个线程 ， 用户的机器受不了；另一方面服务器也会收到大量的并发请求 ， 服务器也受不了 ， 很容易压垮一些技术不过硬的网站 。
浏览器限制并发下载数 ， 就会导致超出并发限制的请求被迫进行排队 ， 对于图标、图片、css、js 等小文件很多的页面来说 ， 即使网速已经较快 ， 这种排队也可能会持续很久 。
显然 ， 优化的方向就是减少并发下载的需求 。 因此 ， 优化的方案也就显而易见了：把各种小图标拼合成一个大图 ， 然后想办法让浏览器把它重新切成多个就可以了 。 恰好 ， 浏览器有一个特性叫background-position ， 也就是说假如我们把这张大图设置为当前元素（宽w、高h）的背景 ， 并且指定了 background-position 为 (x, y) ， 那么当前元素的背景就是从大图上 (x, y, x+w, y+h) 截取出来的那个区域 。 这样一来 ， 就把 N 个并发下载合并成了一张大图和一个 css 文件 。
这种方案如果做手动拼合是非常繁琐的 ， 因此有人开发了工具来整合到前端工具链中 ， 并且 UX 的一些工具也逐渐提供了直接导出雪碧图的功能 。
近代：Data URL
除了拼合成雪碧图之外 ， 还有另一种技术也可以减少并发下载请求 ， 那就是 Data URL 。
简单来说 ， Data URL 就是这样的形式：data:[<mediatype>][;base64],<data> ，比如 data:image/svg+xml;utf8,<svg ... > ... </svg> ，也可以对 data部分进行 base64 编码 ，比如data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo 。
|小图标，大学问
本文插图

对于浏览器来说 ， Data URL 和普通的 http URL 没有什么区别 —— 除了不用额外下载 。 因此 ， 凡是能用 http URL 的地方都可以换成 Data URL ， 比如 html 中的 <img src=''...''> ， css 中的 background-image: url(...) 。 这样一来 ， 就把图标的下载合并到了 html/css 的下载过程中 。
但是 ， 这种方式也有缺点 ， 那就是拖慢了整体渲染速度 。
通常来讲 ， 浏览器的下载优先级是 html > css > 图片等资源的 ， 因此我们经常看到一个网站展现出来之后 ， 里面的图片还只显示了一半 ， 过一会儿才会完全显示 。 如果我们把大量图标塞到 css 甚至 html 中 ， 就会增大它们的体积 ， 导致首屏展现变慢 。


推荐阅读


上一篇：新机发布|金立祭出大招，新机重305克，网友：用来砸核桃吗？

下一篇：InfoQ|知“微”知彰，互联网企业的微服务5G创新有哪些从0到1？