什么是Manifest: 其实Manifest是一个简单的 文本文件,它的扩展名是任意的,定义需要缓存的文件.资源,当第一次打开时,浏览器会自动缓存相应的资源. Manifest 的特点: 离线浏览:即当网络断开时,可以继续访问你的页面. 访问速度快:将文件缓存到本地,不需每次都从网络上请求. 稳定性:做了Manifest缓存,遇到突发网络故障或者服务器故障,继续访问本地缓存. Manifest的使用: html新增了一个manifest属性,可以用来指定当前页面的manifest文件. 创建一…

简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网络无法访问,也能继续访问. 而且做好相应资源的缓存可以带来更好的用户体验,当用户使用自己的流量上网时,本地缓存不仅可以提高用户访问速度,而且大大节约用户的使用流量. 先来看下我们公司实际项目中的使用情况.(阿里淘点点也使用了manifest) 第一次加载时:整体请求是392KB耗时1.82s 当本地…

请跳转我的有道云笔记查看: http://note.youdao.com/noteshare?id=caaf067c6e38820ba8f87b212c2327a9&sub=23E0F8F7A41C446899AA48513FD3C4A7…

一.作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联网会直接使用缓存在本地的文件.优化加载速度,节约服务器资源. 二.适用场景 正如 manifest 英译的名字:离线应用程序缓存,这项功能是设计给会有离线场景的应用来使用,例如:需要离线使用的手机APP/H5,亦或是PC端的纯静态页面. 三.问题 1.服务器资源更新后显示滞后需要多刷新一次页面 首次在载入页面时,浏览器会判断是否引入了 manifest,若检测到引入,则下载并按文件规则缓存资源. 再次载入页面时,便会根…

腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. H5 应用程序缓存为应用带来三个优势: 离线浏览 用户可在应用离线时使用它们 速度 已缓存资源加载得更快 减少服务器负载 浏览器将只从服务器下载更新过或更改过的资源. 根据标准,到目前为止,H5 一共有6种缓存机制,有些是之前已有,…

本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qHm_dJBhVbv0pJs8Crp77w 作者:叶建升 个人主页:http://www.linkedin.com/in/jiansheng-ye-b3319778/ 导语 在web项目开发中,我们可能都曾碰到过这样一个棘手的问题: 线上项目需要更新一个有问题的资源(可能是图片,js,css,json数据等),这个资源已经发布了很长一段时间,为什么页…

H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本地,在没有网络的情况下可以访问到已缓存的对应的站点页面,这些文件包括html.js.css.img等文件:其实在有网络的时候,浏览器也会优先使用已离线存储的文件.而且做好相应资源的缓存可以带来更好的用户体验,当用户使用自己的流量上网时,本地缓存不仅可以提高用户访问速度,而且大大节约用户的使用流量.…

在web项目开发中,我们可能都曾碰到过这样一个棘手的问题: 线上项目需要更新一个有问题的资源(可能是图片,js,css,json数据等),这个资源已经发布了很长一段时间,为什么页面在浏览器里打开还是没有看到更新? 有些web开发经验的同学应该马上会想到,可能是资源发布出了岔子导致没有实际发布成功,更大的可能是老的资源被缓存了.说到web缓存,首先我们要弄清它是什么.Web缓存可以理解为Web资源在Web服务器和客户端(浏览器)的副本,其作用体现在减少网络带宽消耗.降低服务器压力和减少网络延迟,加…

H5的缓存,大概有localstorage.sessionstorage.cookie和manifest. 一.LocalStorage LocalStorage是永久性的本地缓存,存储在客户端的浏览器上,除非主动删除,是不会过期的.LocalStorage采用的是键值对的方式进行存储,存储方式只能是字符串.存储内容可以用图片.json.样式.脚本等. API基本使用方法: 1.localStorage.setItem() 存储 2.localStorage.getItem() 获取数据,其中使…

H5离线缓存基础系列   1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2.离线缓存的优势 在没有网络的时候可以访问到缓存的对应的站点页面,包括html,js,css,img等等文件 在有网络的时候,浏览器也会优先使用已离线存储的文件,返回一个200(from cache)头.这跟HTTP的缓存使用策略是不同的 资源的缓存可以带来更好的用户体验,当用户使用自己的流量上网时,…

  HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个,离线存储可以将站点的一些文件存储在本地,在没有网络的时候还是可以访问到以缓存的对应的站点页面,其中这些文件可以包括html,js,css,img等等文件,但其实即使在有网络的时候,浏览器也会优先使用已离线存储的文件,返回一个200(from cache)头.这跟HTTP的缓存使用策略是不同的. 它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网络无法访问,也能继续访…

传统的web应用是在线应用,这其实也是web的特色,对于PC时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得更低.比如:在火车上,穿山越岭进隧道,便无法访问web应用......离线缓存为应用带来三个优势:离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减少服务器压力 - 浏览器将只从服务器下载更新过或更改过的资源*支持性检测 实现离线缓存的步骤:1, 建立.manifest或者appcache为后缀的文件.  manifest文件…

参考文章:http://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==&mid=404724239&idx=1&sn=e0a2887f9ff6293f0f550fa4e44057a0&scene=1&srcid=0331jLkF55dKeJO00POMiXLZ 1.浏览器缓存机制 2.Dom Storage(local storage 和 session storage) 3.Web SQL Database,不推荐使用. 根据官…

1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2.离线缓存的优势 在没有网络的时候可以访问到缓存的对应的站点页面,包括html,js,css,img等等文件 在有网络的时候,浏览器也会优先使用已离线存储的文件,返回一个200(from cache)头.这跟HTTP的缓存使用策略是不同的 资源的缓存可以带来更好的用户体验,当用户使用自己的流量上网时,本地缓存不仅可以提高用户访…

离线缓存 application cache 1. 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 例子:比如我们在手机或电脑上访问一个网页,下一次访问即使不连网也可以访问,因为当我们第一次访问时候,浏览器已经把此时页面给保存到本地了. 2. 离线缓存的优势: 1. 在没有网络的时候可以访问到缓存对应的站点页面,包括 html,css,img等文件 2.在有网络的时候,浏览器也会优先使用…

来源:https://juejin.im/entry/588b44a08fd9c544813ed5b3 一.背景 用户点击浏览器工具栏中的后退按钮,或者移动设备上的返回键时,或者JS执行history.go(-1);时,浏览器会在当前窗口“打开”历史纪录中的前一个页面.不同的浏览器在“打开”前一个页面的表现上并不统一,这和浏览器的实现以及页面本身的设置都有关系. 在移动端HTML5浏览器和webview中,“后退到前一个页面”意味着:前一个页面的html/js/css等静态资源的请求(甚至是aj…

离线缓存:application cache 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没链接网络,被缓存的页面也可以展示 离线缓存的优势: 提高用户的访问速度,节省流量: 如何实现离线缓存 1.在需要缓存文件的根节点 html 上添加 manifest 属性(属性值是以   .appcache  为后缀的文件)   案例  (<html manifest="a.appcache">  ...   …

离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest     manifest,作用是为了让服务器识别该类型文件 2,在html文件html标签中添加一行manifest="cache.appcache",告诉浏览器要加载的内容. 3.在该目录下新建一个文件cache.appcache,文件内容为: chche manifest 为版本号: chche 是告诉浏览器要缓存的文件: netwo…

引用张图,简单粗俗的解释下 Native App.Web App 和 Hybrid App Navtie App: 使用平台系统提供的原生语言来编写的 App,如果Android用java,ios用objective-c,windows c++等 Web App:主要使用 Web 技术js/html/css进行编写,运行在各平台系统浏览器或浏览器组件中 Hybrid App:混合使用前面两种技术,部分代码以 Web 技术编写,部分代码由某些 Native Container 承担(如 Phong…

一.webStorage 1.目标 1.了解cookie的不足之处,引入webstorage的概念    2.学习并且掌握webstorage有哪两种    3.学习并且掌握sessionStorage    4.学习并且掌握localStorage    5.反复练习localStorage的用法    6.掌握离线存储技术    7.掌握多媒体标签的一些基本属性    8.自主开发出一个自定义视频播放器的控件    9.熟悉使用webwoker    10.了解webSocket的原理 1.…

一.离线缓存的起因. HTML5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代, 设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15分钟),便无法访问网站,十分不便. 而离线web应用允许我们在脱机时与网站进行交互. 二.什么是离线Web应程序?为什么要开发离线的Web应用程序? 离线web应用程序是指:当客户端本地与web应用程序的服务器没有建立连接时,也能正常在客户端本地使用该w…

首先先上一张图: 用360浏览器的用户对这张图应该都是耳熟能详了吧,没错,当网络不通畅时使用360浏览器,便会有这张图弹出来.为什么没有网络还能弹出这一副画面呢?这就关乎HTML5的应用缓存机制了. 那什么是应用缓存机制呢? 应用缓存,是专门从浏览器的缓存中分出一块缓存区用于缓存数据,从而在离线状态下也能读取和使用该数据,这就是应用缓存,或者说叫appcache 怎么使用应用缓存? 首先,我们需要新建一个自定义的清单文件(manifest file),在这里我先将其命名为"cache_manif…

一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionstorage和cookie.但是这些传统的方式有着致命的弊端.首先这些传统的存储方式的最大使用空间有 限,最多不超过5M;其次它们处理大规模的结构化数据的能力有限.鉴于传统方式的局限性,HTML5提出了三种新的离线缓存解决方案:Web SQL,indexedDB和File System. 其中Web S…

Tempdb就像Sqlserver的临时仓库,各式各样的对象,数据在里面进行频繁计算,操作.大量的操作使得tempdb可能面临很大压力,tempdb中缓存的设计就是为了缓解这些压力.这次就为大家介绍下tempdb的缓存机制. 在介绍缓存机制前,先简单了解一下TempDB对象 一般我们把tempdb对象分为两种类型用户对象和内部对象.用户对象指通过显式T-sql来创造的对象(如临时表),内部对象指通过隐式T-sql创建的对象(Worktables) 注:在引入版本控制后,也可以此单独分类(DMV…

使用缓存的目的是为了使用的应用程序能更快速的响应用户输入,是程序高效的运行.有时候我们需要将远程web服务器获取的数据缓存起来,减少对同一个url多次请求. 内存缓存我们可以使用sdk中的NSURLCache类.NSURLRequest需要一个缓存参数来说明它请求的url何如缓存数据的,我们先看下它的CachePolicy类型. 1.NSURLRequestUseProtocolCachePolicy NSURLRequest默认的cache policy,使用Protocol协议定义. 2.N…

资料均来自互联网,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任. 人魔七七:http://www.cnblogs.com/qiqibo/ 为什么要有缓存 应用需要离线工作的主要原因就是改善应用所表现出的性能.将应用内容缓存起来就可以支持离线.我们可以用两种不同的缓存来使应用离线工作.第一种是**按需缓存**,这种情况下应用缓存起请求应答,就和Web浏览器的工作原理一样:第二种是**预缓存**,这种情况是缓存全部内容(或者最近n条记录)以便离线访问. 像第14…

web app不比PC,有性能和流量方面的考虑,离线应用越来越重要,虽然浏览器有缓存机制,但是时常不靠谱,更何况普通情况下html文件是没法缓存的,断网之后一切over. 什么是manifest? 简单来说manifest能让你的应用在无网的情况下也能访问. 它有三大优势: 1.离线浏览,无网情况下也能正常访问: 2.更快的加载速度,缓存在本地访问速度自然更快: 3.减轻服务请求压力,文件缓存后不需要再次请求,只需要请求需要更新的文件. 如何使用? <!DOCTYPE HTML> <ht…

原文链接:http://my.oschina.net/leejun2005/blog/369148 1.缓存的分类 缓存分为服务端侧(server side,比如 Nginx.Apache)和客户端侧(client side,比如 web browser). 服务端缓存又分为 代理服务器缓存 和 反向代理服务器缓存(也叫网关缓存,比如 Nginx反向代理.Squid等),其实广泛使用的 CDN 也是一种服务端缓存,目的都是让用户的请求走”捷径“,并且都是缓存图片.文件等静态资源. 客户端侧缓存一…

现在应用市场上的 App 无一不需要网络操作,这些应用的开发者大多数都选择结合使用 OkHttp 和 Retrofit 来完成网络操作.okHttp 最为人称道的一个特性就是它的缓存机制,而我将在本篇博文对其进行剖析. 每次我用 OkHttp 时我都需要一些时间想想我将怎么使用它,我该用哪一个 HTTP 报头,作为一个客户端 App 我有哪些职责,我期望从服务器上获得什么,等等……所以对我来说,这篇博文将是 OkHttp 缓存特性的引用文档,我写这篇文档不是因为我在之后的开发中可能会接触 OkH…

浏览器端的九种缓存机制介绍 浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户.浏览器端缓存的机制种类较多,总体归纳为九种,这里详细分析下这九种缓存机制的原理和使用场景.打开浏览器的调试模式->resources左侧就有浏览器的8种缓存机制. 一.http缓存 http缓存是基于HTTP协议的浏览器文件级缓存机制.即针对文件的重复请求情况下,浏览器可以根据协议头判断从服务器端请求文件还是从…