基于WEB 的图片加载优化技术研究

李兰兰，宋永鹏

（1.山东省气象服务中心，山东济南 250031；2.山东省气象信息中心，山东济南 250031）

HTTP Archive 统计显示，图片内容已经占到了互联网内容总量的62%，也就是说超过一半的流量和时间都用来下载图片。从性能优化的角度看，图片也是优化的重点和热点之一，Google PageSpeed 优化规则把图片优化作为重要的优化手段。传统的图片加载方式是通过Url 或者Src 属性加载图片地址，向服务器提出Http 请求[1]后下载图片至浏览器，图片站点的开发过程中，加载的图片过多会增加向服务器请求的次数而导致请求时间过长，对服务器和本地网络资源是极大的浪费；图片体积过大会使浏览器从上到下逐步显示图片直到图片完整呈现，这种从空白区域到完全加载的过程显得比较突兀会使用户体验较差[2]。基于Javascript 的懒加载和预加载是目前流行的图片优化技术，能够从页面前端的角度优化加载速度[3]；Base64 转码和图像压缩在后端和系统架构方面为图片站点的优化提供技术支持。该文的硬件测试环境是4G 内存的DELL 一体机，软件测试环境为Win7 操作系统、山东省气象部门图片资料云平台和Google Chrome。

1 Base64转码

Base64 是网络中常见的用于传输8 Bit 字节代码的编码方式，Base64 编码可用于在Http 环境下传递较长的标识信息，具有不可读性，即编码的数据无法直接查看，通过Html 的Img 图片标签的Src 属性和CSS 背景图片的Url 属性传递[4]。页面中的每一个图片需要先向服务器递交一个Http 请求，再进行图片的下载与显示，图片过多会导致Http 请求时间过长，而Base64 转码技术将图片在服务器中的保存地址通过编码表转换成一串字符，随着页面的Html 代码下载到本地，避免了向服务器进行Http 请求的时间消耗和网络资源的浪费。……