File System API

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

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

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

浏览器给虚拟文件系统提供了两种类型的存储空间:临时的和持久性的。临时的存储空间是由浏览器自动分配的,但可能被浏览器回收;持久性的存储空间需要显示的申请,申请时浏览器会给用户一提示,需要用户进行确认。持久性的存储空间是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前端的同事根据一些规范和一些调试工具进行优化了。

余下全文(1/3)

本文最初发表在CSDN,文章内容属作者个人观点,不代表本站立场。

分享这篇文章:

请关注我们:

发表评论

电子邮件地址不会被公开。 必填项已用*标注