2.6 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提供了一组文件与文件夹的操作接口，有同步和异步两个版本，可满足不同的使用场景。下面通过一个文件创建、读、写的例子，演示下简单的功能与用法。
将上面代码复制到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前端的同事根据一些规范和一些调试工具进行优化了。
（审校/唐小引）
本文为腾讯Bugly投稿，Bugly是腾讯内部产品质量监控平台的外发版本，经团队四年打磨，支持iOS和Android两大主流平台，其主要功能是App发布以后，对用户端发生的Crash以及卡顿现象进行监控并上报，让开发同学可以第一时间了解到App的质量情况，及时修改。目前腾讯内部所有的产品，均在使用其进行线上产品的崩溃监控。
【活动预告】 由CSDN主办的“2015开发工具及服务年度大奖评选”活动已正式启动。近两年，开发工具及服务不断涌现，从云服务、即时通讯、安全到统计监测、人工智能、物联网平台等。CSDN将通过公开征集，并结合平台内用户数据采集分析，评选出CSDN 2015开发工具及服务年度大奖。赶快为你的开发工具与服务报名参与评选吧。更多详情，请关注评选活动官网。
第一时间掌握最新移动开发相关信息和技术，请关注mobilehub公众微信号（ID: mobilehub)。
|
温馨提示：资源转载网络个人收藏，如有侵权或下载链接失效或密码不对请联系站长
1、在论坛里发表的文章仅代表作者本人的观点，与本网站立场无关。
2、论坛的所有内容都不保证其准确性，有效性，时间性。阅读本站内容因误导等因素而造成的损失本站不承担连带责任。
3、当政府机关依照法定程序要求披露信息时，论坛均得免责。
4、若因线路及非本站所能控制范围的故障导致暂停服务期间造成的一切不便与损失，论坛不负任何责任。
5、注册会员通过任何手段和方法针对论坛进行破坏，我们有权对其行为作出处理。并保留进一步追究其责任的权利。
