====索引=====
【Web缓存机制系列】4 – HTML5时代的Web缓存机制
【Web缓存机制系列】5 – Web App时代的缓存机制新思路
【Web缓存机制系列】6 – 进击的Hybrid App，量身定做缓存机制
============
随着现代浏览器的推动，Flash放弃对移动端的支持，HTML5无疑成为当前Web前端炙手可热的话题。各大游戏开发商、App开发商纷纷投入人力进行研究和技术储备。相信不久的将来，HTML5会迎来一个快速发展和普及的春天。那么，HTML5这个新一代的标准，又给我们带来哪些缓存机制呢？
HTML5 之离线应用Manifest
我们知道，使用传统的技术，就算是对站点的资源都实施了比较好的缓存策略，但是在断网的情况下，是无法访问的，因为入口的HTML页面我们一般运维的考虑，不会对其进行缓存。HTML5的Cache Manifest离线应用特性就能够帮助我们构建离线也能使用的站点，所有的资源都使用浏览器本地缓存，当然前提是要求在联网的情形下使用过一次站点。
如何实现离线访问特性
实现的步骤非常简单，主要3个步骤：
1）在服务器上添加MIME TYPE支，让服务器能够识别manifest后缀的文件
AddType text/cache-manifest manifest
2）创建一个后缀名为.manifest的文件，把需要缓存的文件按格式写在里面，并用注释行标注版本
CACHE MANIFEST
# 直接缓存的文件
CACHE:
Path/to/cache.js
# version：2012-03-20
3）给 <html> 标签加 manifest 属性，并引用manifest文件
具体可以参考：HTML5 缓存: cache manifest
<html manifest=”path/to/name-of.manifest”>
离线应用访问及更新流程
- 第一次访问离线应用的入口页HTML（引用了manifest文件），正常发送请求，获取manifest文件并在本地缓存，陆续拉取manifest中的需要缓存的文件
- 再次访问时，无法在线离线与否，都会直接从缓存中获取入口页HTML和其他缓存的文件进行展示。如果此时在线，浏览器会发送请求到服务器请求manifest文件，并与第一次访问的副本进行比对，如果发现版本不一致，会陆续发送请求重新拉取入口文件HTML和需要缓存的文件并更新本地缓存副本
- 之后的访问重复第2步的行为
离线机制的缓存用途
从Manifest的机制来看，即使我们不是为了创建离线应用，也同样可以使用这种机制用于缓存文件，可以说是给Web缓存提供多一种可以选择的途径。
存在的问题：缓存文件更新控制不灵活
就目前HTML5提供的manifest机制来讲，一个页面只能引用一个manifest页面，而且一旦发现这个manifest改变了，就会把里面所有定义的缓存文件全部重新拉取一遍，不管实际上有没有更新，控制比较不灵活。针对这个问题，也有的同学提出了一些建议，比如把需要缓存的文件分模块切分到不同manifest中，并分开用HTML引用，再使用强大的iframe嵌入到入口页面，这样就当某一个模式需要有更新，不会导致其他模块的文件也重新拉取一遍。
HTML5 之本地存储localstorage
HTML5给我们提供本地存储localstorage特性，严格来讲，其实已经不算传统Web缓存的范畴。因为它存储的地方是跟Web缓存分开的，是浏览器重新开辟的一个地方。
localstorage的作用
本地存储localstorage的作用主要使Web页面能够通过浏览器提供的set/get接口，存储一些自定义的信息到本地硬盘，并且在单次访问或以后的访问过程中随时获取或修改。
Localstorage的使用
Localstorage提供了几个非常易用的Api，setItem/getItem/removeItem/clear，具体的可以参考：Html5 Step by Step(二) 本地存储
Localstorage的缓存用途
Localstorage设计的本意可能是用来存储一些用户操作的个性化设置的文本类型的信息和数据，当我们其实也可能拿来当Web缓存区使用，比如我们可以将Base64格式编码的图片信息，存在localstorage中，再次访问时，直接本地获取后，使用Css3的Data:image的方式直接展现出来。
存在的问题：大小限制
按照目前标准，目前浏览器只给每个独立的域名提供5m的存储空间，当存储超过5m，浏览器就会弹出警告框。
可以说，HTML5的Manifest和localstorage是给我们在考虑Web缓存的时候提供了多一种思路，当你开发的应用只面对现代浏览器的时候，不妨可以考虑一下。
原创文章转载请注明：
转载自AlloyTeam：http://www.alloyteam.com/2012/03/web-cache-4-html5-web-cache/
相关推荐
摘要：本文作者，腾讯游戏平台与社区产品部安卓开发组高级工程师贺辉超详细分析了各种缓存机制的原理、用法及特点，并针对Android移动端Web性能加载优化的...根据标准，到目前为止，HTML5一共有6种缓存机制，有些是之前
缓存机制在IT行业中，尤其是Web开发领域，扮演着至关重要的角色。它通过存储经常访问的数据，减少了对服务器资源的依赖，从而提升了系统的响应速度和用户体验。本项目“缓存机制demo”着重展示了如何实现ASP.NET平台...
2. Local Storage 和 Session Storage：HTML5提供的本地存储机制，用于在客户端持久化数据。 3. Service Worker：一种离线缓存策略，允许预加载和缓存资源，提高离线或弱网络环境下的用户体验。 4. IndexedDB：高级...
### 浏览器HTTP缓存机制详解 #### 一、概述 HTTP缓存机制是现代Web应用中的一个重要组成部分，它能够显著提升用户体验并减轻服务器负载。本文将详细探讨浏览器HTTP缓存的工作原理及其背后的机制。 #### 二、HTTP...
- 引入缓存：通过缓存机制减少数据库的负担，例如使用memcached等内存缓存系统。这不仅可以加快数据检索速度，还能减轻数据库的压力。 - 运算码缓存：使用OPcache等工具缓存编译后的PHP代码，避免重复编译。 13. ...
HTML5离线缓存，也称为App Cache，是HTML5引入的一种增强网页应用程序离线运行能力的技术。它允许开发者将一部分网页资源（如HTML、CSS、JavaScript、图片等）存储在本地，使得用户在离线状态下依然能访问这些页面，...
这两个层次的缓存机制协同工作，确保数据能够快速地传递给最终用户。 ##### 2.1 服务器端缓存（PHP缓存） PHP缓存主要用于存储输出结果，它在PHP脚本执行过程中自动创建并管理。默认情况下，PHP将输出缓冲区的内容...
5. **性能监控**：为了确保优化效果，可以使用Vue Devtools进行性能监控，检查组件的创建、销毁次数，以及内存占用情况。 压缩包文件`vc-keep-alive-master`可能包含了一个优化过的`keep-alive`实现，包括上述提到...
在现代Web开发中，HTML5（H5）引入了许多新的特性和功能，其中之一就是本地缓存机制，这对于提升用户体验和优化网页性能具有重要意义。本文将深入探讨H5的本地缓存技术，包括其原理、使用场景、优势以及如何在实践中...
在Web开发中，缓存机制是提升网站性能的重要手段之一。然而，在某些情况下，例如动态内容频繁更新的网页，为了确保用户始终能够看到最新的内容，开发者可能需要禁用对这些页面的缓存。本文将详细介绍如何针对ASP、...
HTML5前端浏览器离线缓存，也称为离线存储或应用程序缓存，是HTML5引入的一项重要特性，旨在提升Web应用的性能和用户体验。当用户在网络连接可用时访问一个支持离线缓存的网站，浏览器会自动下载并存储指定的资源，...
在iOS开发中，缓存机制扮演着至关重要的角色，它能有效地提高应用性能，减少网络数据的消耗，提升用户体验。本文将深入探讨iOS缓存的原理、类型以及如何结合本地化和网络请求来优化应用程序。 首先，理解缓存的基本...
一种常见方法是使用HTML5的App Cache特性，通过manifest文件指定需要缓存的资源。 五、优化策略 1. 设置合适的缓存大小：根据应用需求设置磁盘缓存的最大容量，避免过多占用用户存储空间。 2. 使用Service Worker：...
为了提高用户体验、减少网络流量消耗以及增强应用的可用性，合理配置WebView中的离线缓存机制变得尤为重要。本文将详细介绍如何通过Android平台下的WebView组件实现Html的离线缓存功能。 #### 一、WebView简介 ...
Application Cache API 是HTML5提供的一种机制，用于管理离线缓存。它包括四个主要的状态：UNCACHED、IDLE、CHECKING、DOWNLOADING、UPDATEREADY和OBSOLETE。浏览器会根据清单文件的变化自动更新缓存内容。 3. **...
#### 二、JSP页面缓存机制 JSP页面缓存可以分为两种类型：服务端缓存和服务端之外的客户端缓存。这两种缓存方式各有特点，适用于不同的场景。 1. **服务端缓存**：主要依赖于应用服务器提供的缓存机制。这种方式下...
有些web开发经验的同学应该马上会想到，可能是资源发布出了岔子导致没有实际发布成功，更大的可能是老的资源被缓存了。说到web缓存，首先我们要弄清它是什么。Web缓存可以理解为Web资源在Web服务器和客户端（浏览器...
HTML5引入了离线存储机制，如Application Cache，允许开发者将关键资源缓存到本地，即使在网络不稳定或无网络的情况下，也能保证应用的基本功能运行。 2. **Canvas绘图** Canvas元素提供了动态图形绘制能力，...