码迷,mamicode.com
首页 > 其他好文 > 详细

manifest save for self

时间:2015-04-24 18:23:44      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:

一、使用html5的缓存机制

1.先上规则代码:m.manifest

技术分享
CACHE MANIFEST
# 2015-04-24 14:20

#直接缓存的文件
CACHE:
/templates/specialty/css/style.css
/templates/specialty/js/jquery.js
/templates/specialty/js/index.js
/templates/specialty/js/custom.js
/templates/specialty/js/97zzw.js


NETWORK:
*
技术分享

CACHE: 需要缓存的文件

NETWORK: 需要从网络加载的文件

当然还有其他参数,但我只测试这些;注意:时常变化的就不要缓存了,如果已缓存可以通过修改manifest文件,让浏览器重新创建缓存。

2.在<html>中添加规则文件<html manifest="m.manifest">

技术分享
<!DOCTYPE html>
<html manifest="m.manifest">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
技术分享

3.manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

如果使用的是Apache,可在 .htaccess 中添加:

AddType text/cache-manifest manifest

以上3步完成,这时就可以测试了

chrome下:

技术分享

缓存成功!继续测试————>

技术分享

状态码304,使用缓存。

Firefox下:

技术分享

总结:定义规则时注意要缓存那些不是时时更新的数据,不要漏写NETWORK规则;速度还是有非常明显的提升的。

manifest save for self

标签:

原文地址:http://www.cnblogs.com/junxizai/p/4454029.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!