html5引入了应用程序缓存,它为应用带来了哪些优势,html5本地缓存

　　为什么要使用Application Cache技术？

　　在HTML5之前，我们需要访问网络才能访问它。毫无疑问，网站多次请求服务器，减慢了速度。对于PC用户来说，网络相对稳定，加载速度不会差太多。但是移动端呢？移动终端依赖于无线信号，在信号塔上，其位置不固定，并且受到附近建筑物的影响。一系列的网络不稳定，我们无法改变用户，也无法放弃网速较慢的用户。

　　还有，在混合app领域，内置的webview经常用来加载html页面。如果网速太慢，还是会造成上述问题。

　　离线存储技术

　　实践中主要使用应用缓存和LocalStorage技术，这些技术来源于HTML5技术。

　　(1)应用缓存：通常用于缓存静态资源(静态页面)。

　　(2)LocalStorage:通常用于缓存AJAX请求，以存储非关键的AJAX数据。

　　我将用一段话来描述我为什么要使用应用程序缓存技术：

　　当页面的某些元素不变时，您可以使用应用程序缓存技术脱机缓存它们。每次访问这些缓存的元素时，都不需要再次请求服务器。当某些东西经常改变时，让他们每次都请求服务器！

　　HTML5 Application Cache特性

　　HTML5引入了应用程序缓存，这意味着在没有互联网连接的情况下，可以缓存和访问web应用程序。

　　应用程序缓存为应用程序带来了三大优势：

　　(1)离线浏览：用户可以在不参与网络的情况下访问和使用。

　　(2)速度提升：缓存资源加载更快。

　　(3)减少对服务器的请求：浏览器只会从服务器下载更新或改变的资源。支持：除IE之外的所有浏览器都支持应用程序缓存。

　　开始使用Application Cache

　　涉及的角色：服务器和html文件

　　服务器端需要做的事情

　　维护manifest.appcache文件，检查清单列表中是否有无法访问的文件，及时更新以免丢失。

　　清单文件(W3C推荐的文件扩展名是。appcache)

　　清单文件是一个简单的文本文件，它告诉浏览器缓存了什么(以及没有缓存什么)。

　　清单文件可以分为三个部分：

　　缓存清单-此标题下列出的文件将在第一次下载网络后被缓存-此标题下列出的文件需要连接到服务器，不会被缓存回退-此标题下列出的文件规定了无法访问页面时的回退页面(如404页)。我们来整理一下，逐一介绍。

　　一、CACHE MANIFEST（它是必须的）

　　cache manifest/reset . css/logo . gif/hx . js manifest文件列出了三个资源：CSS文件、GIF图像和JavaScript文件。当清单文件被加载时，浏览器将从网站的根目录下载这三个文件。然后，无论用户何时断开互联网连接，这些资源仍然可用。

　　注意：文件位置基于文件在服务器上的实际目录，并且路径是正确的。

　　摘要：缓存清单中列出的资源是需要本地缓存的文件(要缓存的文件)。

　　二、NETWORK

　　NETWORK:nav.htmlNETWORK子节规定文件“nav.html”永远不会被缓存，脱机时也不可用。

　　网络：*您还可以使用星号“*”来表示所有其他资源/文件都需要互联网连接。

　　注意：千万不要将首页索引放入网络禁止缓存，否则插件之类的无法使用。

　　总结：NETWORD列出的资源都是需要每个请求的动态资源文件(未缓存文件)。

　　三、FALLBACK

　　Fallback:/index//404.html section Fallback规定，如果无法建立Internet连接，“404 . html”将替换/index/目录中的所有文件。

　　注意：第一个URI是资源，第二个是替代品。

　　摘要：如果文件无法联网或访问失败，则通过回退列出的资源将使用后一种替代显示。(友好替代页面)

　　完整的清单文件

　　缓存清单#需要缓存的文件2014 . 6 . 5/reset . CSS/logo . gif/hx . js network:#不需要缓存的文件2014.6.5nav.htmlFALLBACK:#要替换的文件2014年6月5日/index//404.html注：#代表注释行，看似简单的注释行却大有用处。为什么这么说？因为当应用程序的清单文件更改时，应用程序的缓存将会更新。如果您编辑图片或修改JavaScript函数，这些更改将不会被重新缓存。在注释行中更新日期和版本号、时间戳或md5代码是使浏览器再次缓存文件的一种方法。

　　html需要做的事情

　　只需要导入manifest.appcache文件。

　　！DOCTYPE HTMLhtml清单=manifest.appcacheApplication Cache生命销毁规则

　　(1)当用户清空浏览器的缓存时，应用缓存的本地缓存会被销毁。

　　(2)修改清单文件时，因为当其清单文件改变时，应用的缓存会更新。如果你编辑了一张图片或者修改了一个JavaScript函数，这些修改不会被重新缓存，应用缓存的本地缓存会被销毁。

　　(3)应用程序缓存由程序更新

　　深入manifest.appcache文件

　　首先，不要禁止缓存索引首页，虽然放在网络里是不行的。这是一种规范，也是一种规则，请大家遵守。

　　相关的HTTP的缓存头域和https的缓存页面限制会被manifest忽略，所以在用户代理更新页面之前不会过期，也就是说，即使HTTPS也可以脱机工作。

　　应用缓存的容量限制因浏览器而异，差不多5MB。

　　缓存资源时，浏览器直接请求此绝对路径来访问缓存的资源。

　　缓存包含manifest的页面，所以实际上即使我们不在manifest缓存列表中显示包含manifest的页面，这个页面也会被缓存。

　　每次网站更新时，服务器都要检查并更新manifest.appcache文件，以免丢失。

　　如果请求的资源在缓存中，即使未设置manifest属性，也可以从缓存中访问站点中的其他页面。

　　如果清单文件或内部列出的文件之一无法正常下载，整个更新过程将失败，浏览器将继续使用旧的缓存。

　　实际上，没有必要明确列出应用程序缓存所链接的页面。默认情况下，任何包含html元素的manifest属性的页面都将被缓存。这些自动缓存的页面称为主条目，而列表中列出的文件称为详细条目。如果需要在线访问某些文件，可以创建一个“白名单”。与网络下的条目一样，这些文件通常被称为网络条目。每次连接网络，每次都要请求服务器。

　　缓存清单的第一行是固定格式的，必须写在第一行，还必须有。网络和回退是可选的。

　　回退中的资源必须与清单文件相同。

　　引用清单的html必须与清单文件相同，在同一域下。

　　当清单文件改变时，资源请求本身也将触发更新。

　　注释不仅起到不执行的作用，这一点上面已经详细解释过了。它们可以是版本号、时间戳、md5代码等等。

　　在清单文件的缓存部分不能使用通配符，必须手动指定。没有自动工具。

　　在开发过程中，通过ajax与WCF进行数据交互时，常常头一次或头几次数据加载成功，以后均加载失败。

　　由于启用了web离线缓存机制，ajax每次加载数据时，都会从本地缓存文件中读取数据，并使用ajax的get模式。因为get模式缓存，它不会再向服务器请求数据，导致数据加载失败。

　　更改为ajax post模式后，数据将永远不会被缓存，因此网站每次刷新时，都会向service请求数据。

　　报错： Application Cache Error event: Manifest fetch failed (404)

　　解决方法：

　　清单文件需要配置正确的MIME类型，即“文本/缓存清单”。

　　清单的内容类型=text/cache-manifest，建议的扩展名为。appcache。

　　而且必须在web服务器上配置，不同的服务器配置方式不一样。

　　离线，ajax更新。

　　首先你可以修改manifest文件来更新这个页面，但是当一篇文章的内容页面离线时，会保存在本地。如果你是一个章节，那么这篇文章的内容页将被保存。如果您使用相同的url访问它，无论您的文章中的数据是否更新，离线页面都不会更新(除非您更新清单文件)。因此，所有的动态数据都必须由ajax获取。就像客户端一样，离线页面应该是一个没有数据的空壳，然后可以通过ajax把数据拉出来填充空壳。那么需要注意的是，ajax的请求地址要写入网络的manifest。

　　离线页面的更新(长尾问题)

　　网站已经更新。如何更新用户的离线页面？

　　就像很多文章里说的，先把你的文件上线，然后修改页面里介绍的cache.manifest文件，比如修改注释。修改后，如果再次访问该页面，将首先检查清单中是否有更新。如果有更新，当您再次刷新页面时，页面将被更新。

　　长尾问题(非常重要):

　　如前所述，如果您的清单文件更新了，并且您访问了页面，那么在加载更新的页面之前，它需要刷新一次，那么就有问题了。如果你的后端数据，也就是js ajax接口的数据发生了变化，你对应的js也随之修改。然后当你修改manifest上线后，第一次打开页面，页面上会出现bug。再刷一遍页面，就好了。所以，这个初诊bug是我们不想看到的。

　　而且你无法知道用户什么时候会再次访问你的页面，所以一旦你的页面离线使用manifest，就跟客户端一样，导致了长尾问题。好在manifest有一些js接口，可以用来判断。加载更新文件。

　　cache.status属性返回当前脱机应用程序的状态。

　　未缓存(值0):脱机应用程序未启用。IDLE(值1):脱机应用程序已经启动，但是本地缓存的资源是最新的。且未标记为废弃资源检查(值2):当前更新缓存的状态为“正在检查”下载(值3)；当前更新缓存的状态是“下载资源”更新就绪(值4)；当前更新缓存的状态是“已完成更新”过时(值5)；脱机应用程序已经启动，但是所有缓存资源都被标记为已放弃。如果文件超过了缓存5M的大小会怎么样？

　　比如我在通道A维护自己的应用缓存，在通道B维护自己的应用缓存，这个时候如果通道A的使用达到一个峰值，通道B的所有缓存都会失效。

　　所以建议应用缓存存储公共资源而不是业务资源！

　　从更新机制来说，第一次更新清单时，浏览器仍然会使用过期的资源，因为页面加载已经开始甚至结束，缓存更新还没有完成；更新应用程序缓存时，浏览器这次不会使用新资源，只会在第二次使用。此时，在更新事件中执行window.reload事件。

　　window . application cache . addevent listener( update ready ，function(){ window . location . reload()})；从上面的例子可以看出，缓存的文件不仅仅是显示器定义的文件。例如，当使用上面示例中的applicationcache/时，index.html将默认保存为映射的数据，并将包含demo.appcache文件。在许多情况下，文件更新行总是不更新。这个时候只需要在清单配置文件中做一点修改就可以更新了。

　　进行代码更改：

　　html Manifest= A.appcache =html manifest= b . app cache 此时，如果a . app cache没有更新，缓存也不会更新，因为index.html被缓存，仍然检测到原始的manifest。

　　每个页面统一管理自己的清单，也就是说页面A配置了common.js，页面B也配置了common.js，也就是说页面A更新后，

　　如果页面B的清单没有改变，页面B仍然会读取文件的旧版本。这有道理，但也会浪费。它需要由公共页面来处理。

　　关于HTML5应用缓存的这篇文章到此为止。更多相关HTML5应用缓存内容，请搜索之前的文章或继续浏览以下相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。