HTML5缓存机制浅析：移动端Web加载性能优化

File System API

File System API是HTML5新加入的存储机制。它为Web App提供了一个虚拟的文件系统，就像Native App访问本地文件系统一样。由于安全性的考虑，这个虚拟文件系统有一定的限制。Web
App在虚拟的文件系统中，可以进行文件（夹）的创建、读、写、删除、遍历等操作。

File System API也是一种可选的缓存机制，和前面的SQL Database、IndexedDB 和App Cache等一样。File
System API有自己的一些特定的优势：

可以满足大块的二进制数据（large binary blobs）存储需求。
可以通过预加载资源文件来提高性能。
可以直接编辑文件。

浏览器给虚拟文件系统提供了两种类型的存储空间：临时的和持久性的。临时的存储空间是由浏览器自动分配的，但可能被浏览器回收；持久性的存储空间需要显示的申请，申请时浏览器会给用户一提示，需要用户进行确认。持久性的存储空间是Web
App自己管理，浏览器不会回收，也不会清除内容。持久性的存储空间大小是通过配额来管理的，首次申请时会一个初始的配额，配额用完需要再次申请。

虚拟的文件系统是运行在沙盒中。不同Web App的虚拟文件系统是互相隔离的，虚拟文件系统与本地文件系统也是互相隔离的。

File System API提供了一组文件与文件夹的操作接口，有同步和异步两个版本，可满足不同的使用场景。下面通过一个文件创建、读、写的例子，演示下简单的功能与用法。

<script type="text/javascript">
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
//请求临时文件的存储空间
if (window.requestFileSystem) {
     window.requestFileSystem(window.TEMPORARY, 5*1024*1024, initFS, errorHandler);
}else{
  alert('Sorry! Your browser doesn't support the FileSystem API');
}
//请求成功回调
function initFS(fs){
  //在根目录下打开log.txt文件，如果不存在就创建
  //fs就是成功返回的文件系统对象，fs.root代表根目录
  fs.root.getFile('log.txt', {create: true}, function(fileEntry) {
  //fileEntry是返回的一个文件对象，代表打开的文件
  //向文件写入指定内容
  writeFile(fileEntry);
  //将写入的内容又读出来，显示在页面上
  readFile(fileEntry);
  }, errorHandler);
}
//读取文件内容
function readFile(fileEntry)
{
    console.log('readFile');
   // Get a File object representing the file,
   // then use FileReader to read its contents.
   fileEntry.file(function(file) {
     console.log('createReader');
      var reader = new FileReader();
      reader.onloadend = function(e) {
        console.log('onloadend');
        var txtArea = document.createElement('textarea');
        txtArea.value = this.result;
        document.body.appendChild(txtArea);
      };
      reader.readAsText(file);
   }, errorHandler);
}
//向文件写入指定内容
function writeFile(fileEntry)
{
    console.log('writeFile');
    // Create a FileWriter object for our FileEntry (log.txt).
    fileEntry.createWriter(function(fileWriter) {
      console.log('createWriter');
      fileWriter.onwriteend = function(e) {
        console.log('Write completed');
      };
        fileWriter.onerror = function(e) {
          console.log('Write failed: ' + e.toString());
        };
        // Create a new Blob and write it to log.txt.
        var blob = new Blob(['Hello, World!'], {type: 'text/plain'});
        fileWriter.write(blob);
     }, errorHandler);
}
function errorHandler(err){
 var msg = 'An error occured: ' + err;
 console.log(msg);
};
 </script><br>

将上面代码复制到filesystemapi.html文件中，用Google Chrome浏览器打开（现在File System
API只有Chrome 43+、Opera 32+以及Chrome for Android 46+这三个浏览器支持）。由于Google Chrome禁用了本地
HTML文件中的File System API功能，在启动Chrome时，要加上“—allow-file-access-from-files”命令行参数。

上面截图，左边是HTML运行的结果，右边是Chrome开发者工具中看到的Web的文件系统。基本上HTML5的几种缓存机制的数据都能在这个开发者工具看到，非常方便。

分析：File System API给Web App带来了文件系统的功能，Native文件系统的功能在Web App中都有相应的实现。任何需要通过文件来管理数据，或通过文件系统进行数据管理的场景都比较适合。

到目前，Android系统的Webview还不支持File System API。

3. 移动端Web加载性能（缓存）优化

分析完HTML5提供的各种缓存机制，回到移动端（针对Android，可能也适用于iOS）的场景。现在Android App（包括手Q和WX）大多嵌入了Webview的组件（系统Webview或QQ浏览器的X5组件），通过内嵌Webview来加载一些HTML5的运营活动页面或资讯页。这样可充分发挥Web前端的优势：快速开发、发布，灵活上下线。但Webview也有一些不可忽视的问题，比较突出的就是加载相对较慢，会相对消耗较多流量。

通过对一些HTML5页面进行调试及抓包发现，每次加载一个HTML5页面，都会有较多的请求。除了HTML主URL自身的请求外，HTML外部引用的JS、CSS、字体文件、图片都是一个独立的HTTP请求，每一个请求都串行的（可能有连接复用）。这么多请求串起来，再加上浏览器解析、渲染的时间，Web整体的加载时间变得较长；请求文件越多，消耗的流量也会越多。我们可综合使用上面说到几种缓存机制，来帮助我们优化
Web的加载性能。

结论：综合各种缓存机制比较，对于静态文件，如JS、CSS、字体、图片等，适合通过浏览器缓存机制来进行缓存，通过缓存文件可大幅提升Web的加载速度，且节省流量。但也有一些不足：缓存文件需要首次加载后才会产生；浏览器缓存的存储空间有限，缓存有被清除的可能；缓存的文件没有校验。要解决这些不足，可以参考手
Q 的离线包，它有效的解决了这些不足。

对于Web在本地或服务器获取的数据，可以通过Dom Storage和IndexedDB进行缓存。也在一定程度上减少和Server的交互，提高加载速度，同时节省流量。

当然Web的性能优化，还包括选择合适的图片大小，避免JS和CSS造成的阻塞等。这就需要Web前端的同事根据一些规范和一些调试工具进行优化了。

本文文字及图片出自 CSDN