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
你的反应是: