1.什么是离线缓存

　　离线缓存：离线缓存可以将站点的一些文件缓存到本地，它是浏览器自己的一种机制，将需要的文件缓存下来，以便后期即使没有连接网络，被缓存的页面也可以展示。

2.离线缓存的优势

  • 在没有网络的时候可以访问到缓存的对应的站点页面，包括html，js，css，img等等文件
  • 在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的
  • 资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。

3.如何实现离线缓存

　　在需要缓存的html文件的根节点（html）添加manifest属性，属性值是当前目录下的一个.appcache文件

01.html文件如下

与01.html文件同目录的.appcache文件

4..appcache文件的内容格式

5.在服务器端将.appcache文件的mime类型配置成 text/cache-manifest

下面以phpstudy为例

　　 打开mime.types文件 在后面添加

6.在网页打开01.html

H5离线缓存基础系列的更多相关文章

  1. H5离线缓存(基础)学习指南

    离线缓存 application cache 1. 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可 ...

  2. H5 离线缓存的用法

    H5离线缓存基础系列   1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2. ...

  3. H5离线缓存技术Application Cache

    H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...

  4. h5 离线缓存小demo

    传统的web应用是在线应用,这其实也是web的特色,对于PC时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得更低.比如:在火车上,穿山越岭进隧道,便无法访问w ...

  5. H5离线缓存机制-manifest

    简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...

  6. H5离线缓存技术

      HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个,离线存储可以将站点的一些文件存储在本地,在没有网络的时候还是可以访问到以缓存的对应的站点页面,其中这些文件可以包括html,js ...

  7. h5离线缓存

    离线缓存:application cache 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没链接网络,被缓存的页面也可以展示 ...

  8. 体验h5离线缓存

    摘要 Application Cache是浏览器自己的一种机制,随着移动互联网时代的到来,如果我们已经将需要的文件缓存下下来,一旦网络无法访问,也能继续访问.不仅能提高用户体验,而且在有网络时,也能直 ...

  9. Atitit.播放系统规划新版本 and 最近版本回顾 v3  pbf.doc  1 版本11 （ing）41.1 规划h5本地缓存系列 41.2 Android版本app41.3 双类别系统，

    Atitit.播放系统规划新版本 and 最近版本回顾 v3  pbf.doc 1 版本11 (ing)4 1.1 规划h5本地缓存系列 4 1.2 Android版本app4 1.3 双类别系统, ...

随机推荐

  1. Notepad++ 的使用（插件）

    为 Notepad++ 安装 NppFTP 插件,查看修改虚拟机上的文本文件 0. 常用快捷键 单行.多行注释 //方式 :ctrl+k 区块注释 / * * /方式 :ctrl+q 取消单行.多行. ...

  2. 受限玻尔兹曼机（RBM）以及对比散度（CD）

    1. RBM 的提出 BM 的缺点: 计算时间漫长,尤其是无约束自由迭代的负向阶段: 对抽样噪音敏感: 流行软件的不支持: 受限玻尔兹曼机(Restricted Boltzmann Machine,简 ...

  3. WPF 走马灯 文字滚动 自定义控件

    原文:WPF 走马灯 文字滚动 自定义控件 /// <summary> /// Label走马灯自定义控件 /// </summary> [ToolboxBitmap(type ...

  4. Cocos2d-x 3.0final 终结者系列教程09-漆节点Node中间Schedule

    怎么做HelloWorld工程HelloWorld文字实现它自己主动运动? 有的童鞋会想到使用线程.不断的变化Label的Position, 不要那样做,因为Cocos2d-x在主线程只能被改变Nod ...

  5. 协程在Web服务器中的应用（配的图还不错）

    协程(纤程,微线程)这个概念早就有之,各家互联网公司也都有研究,但在国内各大论坛和大会热起来,还是今年的事. 最近参与讨论开放平台建设和架构设计过程中,有同事提到了使用协程代替线程,能够很大幅度的提高 ...

  6. 在WPF中，如何得到任何Object对象的XAML代码？

    原文:在WPF中,如何得到任何Object对象的XAML代码? 在WPF中,可以使用System.Windows.Markup.XamlWriter.Save(objName)得到任何Object对象 ...

  7. Selenium-基础操作

    一.测试代码 @Test public void test() { WebDriver driver = new FirefoxDriver(); // 打开当前包中的index页面 driver.g ...

  8. nodejs dateformat date-utils

    https://www.npmjs.org/package/dateformat https://www.npmjs.org/package/date-utils 来自为知笔记(Wiz)

  9. sql server 定时备份数据库

    CREATE PROCEDURE [dbo].[SP_DBBackup_EveryNight_Local] @cycle INT, ---保存周期 @IsLocal INT, ---是否为本地 0表示 ...

  10. 经典面试编程题--atoi()函数的实现（就是模拟手算，核心代码就一句total = 10 * total + (c - '0'); 但是要注意正负号、溢出等问题）

    一.功能简介 把一个字符串转换成整数 二.linux c库函数实现 /*** *long atol(char *nptr) - Convert string to long * *Purpose: * ...