从9个不同的方面深入分析HTML5的性能

 

　　5.离线存储

 　　接下来讲离线存储在性能方面给用户带来的好处。首先是进离线存储的定义文件，在Q+中所有的系统模块，都是有定义离线支持。就是说所有的应用，如果 网断了，还是可以用。在文档中加入MANIFEST的文件，MANIFEST是一个定义文件，声明当前页面哪些是需要存储在本地的？哪些是不需要存储的？ 哪些如果说请求失败，应该用哪些新的图片或者什么来代替？这样分三块：

第一，CACHE，哪些需要存储到本地。

第二，NETWORK，是不会存储在本地的，它每次都回去请求一遍但是这里需要指出的是，本地存储跟浏览器存储实际上是两回事情，他们存的是两块不 同的地方。即使NETWORK这边需要告诉APP说，我需要每次都拉一次，因为像Chrome，他这个存储缓存是非常可恶的，比较难清除的，必须通过手动 去清除，才能完全生效。所以说你即使设置了不要让它存储在本地，但是浏览器可能本身把它存储起来了，因为他存的是两块不同地方。

第三，FALLBACK。如果说一个图片假如说请求失败，它是404。那要用什么图片代替？我觉得这个比较好玩。

MAEIFEST怎么设置？ MANIFEST这里需要注意的是三点：

MANIFEST同源限制；

MIME类型必须为text/cache-manifest，这是标准的，如果是其他格式，都不会生效；

CHROME，如果要看这个东西有没有生效，可能通过CHROME这个伪协议的方式在浏览器输入，chrome://appcache-internals。

关于如何去更新应用的缓存。为什么要离线存储？离线存储在本地，当浏览器知道你有离线存储你，它会首先去离线存储的目录下，去找这个资源是否已经被 Cache。当它已被Cache的时候，他就直接从这边拿到这个资源，不会再去发送一个请求。因为浏览器的请求是这样的，当有离线存储的话，就连请求都不 会发，所以说会更快。 如果说有的时候我们需要更新，更新的时候怎么办？

用户可以手动去清除浏览器的Cache，这个时候自动把本地存储给清除了。

修改MANIFEST的任何内容，这是比较推荐的方式，也是我们线上用的方式。就是说我们可以修改里面的的具体项目，但是这里应该最好是修改注释， 因为我每次发布的时候，我们自动发布机制，发布的时候在上面注释修改一下就可以了。这样的话，每次发布的内容，都会实时同步到客户端的本地；

通过程序去执行，程序的就是window.applicationCache.update()。就是我要去操作离线存储，其实我有时候叫应用存储，因为它的语意就是应用存储。我们去手动的更新应用存储。

　　6.Web Worker

　　接下来Web Worker。 Web Worker是一个多线程的JS进程。应用场景其实我们在线上的话，是没有的，我就不讲了。但是可以讲下具体我看到过的应用场景。

首先介绍一下WEBWORK是什么东西？它是一个OS级别的线程。之前我们模仿多线程，实际上都是多开一个窗口。但是现在的话，浏览器本身就提供了，这个会让操作带来更多便利，是让我们整个文档比较重，并不是很建议的方式。

然后WebWorker访问能力是有限的，它并不能访问到很多全局对象。比如说documnet对象它是访问不了的。 WebWorker最适合的场景就是CPU密集型的计算操作。之前我们做游戏的时候，我们用BOX2D。应该很多人听到过，它涉及到大量的计算，就是整个 页面里面，下面所有的物体要去计算它们的碰撞关系，这个计算量是非常大的。但是如果放在当前的JS的进程里面去执行，这个计算量一大，一计算，整个页面就 非常卡。但是如果用WebWorker去做，它是异步的过程，实时的发送过去，在计算的过程中还能干其他事，这就是多线程。