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

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)。