加载静态资源的几种方式
- 1 min最近转来专门做无线项目，由于移动设备的网速问题，所以身为一个前端工程师，会更加关注资源的缓存和加载速度。
说起页面优化，其实在PC端早就有各种方法，包括bigpipe,bigrender,combo,动态加载等等方法，其实目的只有一个，就是让页面最快的呈现到用户面前，并且是功能可以最快达到可用情况。
说实话，在平时的开发中，其实并没有特别注意这些方面，第一就是因为自己懒，在现成的combo解决方案下，懒得再去想其他更好的解决方案；第二就是因为所做产品用户量比较下，相比之下，节约流量付出的成本要远高于公司付出的带宽成本，所以对所谓的页面加载优化也都只停留在o’relly出版的那本书上而已。
不过在找工作面试的时候，绝大多数公司都会问一个关于页面优化的问题，大家的回答也无法就是：
- css sprit
- 混淆压缩代码
- 优化图片
- 多用css少用图片
- 如果使用类库，那就多用类库中的方法
- 静态文件加上expires缓存
但是以上这些基本都已经是上一个十年优化方法了，基本已经成为了前端行业中的必备条件了，想要再更进一步的进行优化，就需要开动各种脑筋了。
#####先说说图片 js,css,image这三种静态资源中，几乎在任何页面里，图片所占的比重都是最大的，pn8的半透明阴影,png24的大体积几乎会困扰每一个前端工程师，针对图片的优化其实可以有两条路：
第一种是iconfont的方式，也就是将icon压成矢量图，再合并为自体文件，使用字符代替标签的背景图。好处是显而易见的，首先是绝大多数情况下，文件体积会变小，其次是可以无限的增大缩小图片尺寸，而不必担心出现图片发虚的情况；再有就是可以随便在css中使用color改变icon的颜色。
但是相对的，缺点也比较明显，就是只能适用于简单icon图片，如果图片带有渐变或者是多种色彩，那iconfont的方式就完全失效了。
最后分享一些关于iconfont的资源：
- 阿里系运营的iconfont生成站http://www.iconfont.cn
- bootstrap的iconfont解决方案http://getbootstrap.com
第二种是base64压缩的方法，也就是将图片压缩成base64格式的字符编码，直接写在css中。这种方法基本可以完全避免加载外部资源，而且不论是png8还是png24，基本上体积不会有什么差别。这里顺便提一句，我大百度就是使用这种方法来进行无线端的优化的。
但是这么做，其实也是有一些缺点的，比如需要编译。如果出错的话，难以定位资源图片。但总体来说，在移动端这个方法还是非常可行的，配合上面的iconfont方法，基本可以大幅度的减少图片资源的载入。
#####再说说css和js 与图片不同的是，css和js完全是字符编码，这也就意味着可以使用操作字符串的方式去操作这些资源。
有了以上的理论支持，其实可以想出一些比较hack的方式来进行优化。
比如在百度，移动端使用localstorage的方式缓存页面的静态资源，代码其实很简单，就是发个请求，拿回数据，然后缓存。这个方法我曾经在某次面试的时候想出来过，但是可惜当时觉得这方法实在是太hack了，所以没有继续深究下去，形成一个完整的解决方案。来了百度之后，看到这个想法已经被实现，并且服务于千万用户，实在是感慨百度还是挺勇于创新的。 说到用localstorage做本地存储，其实也还是会有一些问题，比如存储空间有限等；另外没有做过测试，不知道这种方法和传统的浏览器缓存速度上有多少差别。
另外，还有比较常规的本地缓存方法，也就是通过manifest来实现，具体可以参照html5手册，这个没见有网站用过，所以就不多说了。