HTML5 cache

当请求一个页面index.html, 会依次下载以下文件:

index.html

b.js

c.css

再次刷新页面也会更新这些文件(当文件内容并无实际更新是也会发起http请求, http返回304, 但也会发起http请求)

添加cache文件index.manifest:

index.manifest文件:

CACHE MANIFEST
index.html
b.js
c.css

NETWORK:
*

FALLBACK:
error.html

index.html文件中配置:

<html manifest="index.manifest">

再次请求index.html,第一次请求会请求所有文件, 同时会请求index.manifest文件,刷新页面会发现只请求了一个文件——index.manifest

manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

manifest 文件可分为三个部分:

    • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存,等价于CACHE:
    • NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
    • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

注意:其中index.html一定会被缓存起来的,把index.html添加到NETWORK中是不起效果的。

参考:liqinghua1653的专栏

时间: 2024-10-13 19:07:01

HTML5 cache的相关文章

HTML5 Web存储(Web Storage)(5)

HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高. 在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据.它使在不影响网站性能的情况下存储大量数据成为可能. 对于不同的网站,数据存储于不

Webkit关于HTML 5的Application Cache实现之研究

因为工作关系,研究了一段时间的ApplicationCache.首先介绍一下与它相关的SQL DB Table的几个基本概念, CacheGroups : 就是一组资源,例如html, css, js, image,他们与一个cache的manifest关联,CacheGroups表包含的每个cache项有自己的ID以及相应的manifest的URL. CacheEntries, CacheResources : 这俩个表存储一些资源的元数据(metadta),例如HTTP header, mi

HTML5 Manifest使用测试笔记

此文纯属于个人笔记,个人能力有限,给看官带来误导请谅解,谢谢! 本文主要参考资料链接: http://www.cnblogs.com/powertoolsteam/archive/2011/04/02/2003834.html http://www.w3school.com.cn/html5/html_5_app_cache.asp http://www.w3school.com.cn/html5/html5_html.asp http://www.cnblogs.com/cxd4321/p/3

HTML5和CSS3新特性一览

HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内容. <bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置. <command> 定义命令按钮,比如单选按钮.复选框或按钮 <details> 用于描述文档或文档某个部分的细节 <dialog> 定义对话框,比如提示框 <summary>

HTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件

一. 实现 HTML5 applicationCache 的步骤 一般的操作步骤 1. 新建 manifest 文件 如文件名为  lzwme.manifest,内容配置参考如下: 01 CACHE MANIFEST 02   03 # version 1.2  for update cop help 04   05 # 直接缓存的文件 06 CACHE: 07     /wp-content/themes/weisayheibai/images/meta_author.png 08     /

html5—— 应用程序缓存

使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源. 浏览器支持 所有主流浏览器均支持应用程序缓存,除了 Inte

SpringBoot整合SSM之查询

一.引入项目所需要用到的依赖 <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.11</version> <scope>test</scope> </dependency> <dependency> <groupId&g

SpringBoot-06:SpringBoot增删改查一套完整的考试案例

------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本此博客记录一套考试题,随后我把项目以及题目发到github上,简单的说一下springboot的开发 本此考试题用Spring+SpringMVC+MyBatis+SpringBoot+MySQL+Druid+.yml配置文件+thymeleaf模板引擎 我会把大量源码放上来,以及整合需要的注意点,大家可以一会去github上下载观看 项目概览: 一,jar包,pom.xml中的配置 <?xml vers

Spring Boot @EnableWebMvc 与相关配置属性

注意: 1.小心使用  @EnableWebMvc 注解 根据官方文档,尽量不要使用 @EnableWebMvc 注解,因为它会关闭默认配置. ① 你希望关闭默认配置,自己完全重新实现一个 @EnableWebMvc @Configuration public class WebConfig implements WebMvcConfigurer { ② 你希望重写部分配置 //@EnableWebMvc @Configuration public class WebConfig impleme