移动端缓存性能和加载速度优化

今晚跟一个前端大佬同学讨论了一下开发中会遇到的问题，其中提到移动端页面的缓存性能优化和加载速度优化。

我之前没有考虑过这个问题，于是在请教大佬之余，自己又快速学习一波。

总的来说，移动端的缓存主要借助于H5的缓存机制，分别是：

1. 浏览器缓存机制；
2. Dom Storgage（Web Storage）存储机制；
3. Web SQL Database存储机制；
4. Application Cache（AppCache）机制；
5. Indexed Database （IndexedDB）；
6. File System API。

这些缓存机制之前都没怎么了解过...所谓的优化也是从这里入手，比如我们可以加入和客户端浏览器缓存相关的HTTP头，例如expires，chache-control来控制缓存的有效时间，或者借助Last-Modifield/If-Modified-Since来使浏览器只下载更新的内容，没有改变的内容就直接加载本地缓存。

至于加载性能的优化，主要就是：
1. 将css和js代码抽离出来，单独作为外部文件，并在html中引用，实现多个页面文件共享；

2. 想办法减少HTTP请求的数目；

3. 采用Gzip技术，对网页图片进行压缩；

4. 脚本放在body的下方，优先加载页面，先将页面呈现给用户，再加载脚本。