广州web培训
达内广州五羊中心

18589266248

热门课程

达内广州web培训详解缓存application cache

  • 时间:2016-11-08 14:26
  • 发布:广州web培训
  • 来源:techug

application cahce是将大部分图片资源、js、css等静态资源放在manifest文件配置中。当页面打开时通过manifest文件来读取本地文件或是请求服务器文件。

离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制,但它们并不可靠,也不一定总能起到预期的作用。HTML5使用ApplicationCache接口可以解决由离线带来的部分难题。达内广州H5培训这里要说的前提是你需要访问的web页面至少被在线访问过一次。

使用缓存接口可为应用带来以下三个优势:

离线浏览– 用户可在离线时浏览您的完整网站

速度– 缓存资源为本地资源,因此加载速度较快。

服务器负载更少– 浏览器只会从发生了更改的服务器下载资源。

一个简单的离线页面主要包含以下几个部分:

index.html

<html manifest="clock.manifest">

<head>

<title>AppCache Test</title>

<link rel="stylesheet" href="clock.css">

<script src="clock.js"></script>

</head>

<body>

<p><output id="clock"></output></p>

<div id="log"></div>

</body>

</html>

clock.manifest

CACHE MANIFEST

#VERSION 1.0

CACHE:

clock.css

clock.js

clock.js和clock.css为独立的另外文件。

另外达内广州H5培训觉得你需要注意的是更新缓存。在程序中,你可以通过window.applicationCache对象来访问浏览器的app cache。你可以查看status属性来获取cache的当前状态:

var appCache = window.applicationCache;

switch (appCache.status) {

case appCache.UNCACHED: // UNCACHED == 0

return 'UNCACHED';

break;

case appCache.IDLE: // IDLE == 1

return 'IDLE';

break;

case appCache.CHECKING: // CHECKING == 2

return 'CHECKING';

break;

case appCache.DOWNLOADING: // DOWNLOADING == 3

return 'DOWNLOADING';

break;

case appCache.UPDATEREADY:  // UPDATEREADY == 4

return 'UPDATEREADY';

break;

case appCache.OBSOLETE: // OBSOLETE == 5

return 'OBSOLETE';

break;

default:

return 'UKNOWN CACHE STATUS';

break;

};

为了通过编程更新cache,首先调用applicationCache.update()。这将会试图更新用户的cache(要求manifest文件已经改变)。最后,当applicationCache.status处于UPDATEREADY状态时, 调用applicationCache.swapCache(),旧的cache就会被置换成新的。

var appCache = window.applicationCache;

appCache.update(); // Attempt to update the user’s cache.

if (appCache.status == window.applicationCache.UPDATEREADY) {

appCache.swapCache();  // The fetch was successful, swap in the new cache.

}

这里是通过更新menifest文件来控制其它文件更新的。

上一篇:达内广州web培训详解浏览器端缓存
下一篇:达内广州web培训详解缓存cacheStorage

马上预约三天免费体验课

姓名:

电话:

选择城市和中心
贵州省

广西省

海南省