SEO之html5缓存
来源:互联网 发布:淘宝优惠劵机器人 编辑:程序博客网 时间:2024/06/18 03:48
应用缓存可以实现离线浏览web应用,降低服务器负载,使应该更加流畅。
Manifest 文件
manifest 文件是简单的文本文件,它告知浏览器需要被被缓存的内容、时时更新的内容以及不缓存的内容。
浏览器兼容性
所有主流浏览器均支持应用程序缓存,除了 Ie。
manifest 文件可分为三个部分:
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存(下次直接从缓存中取)
- NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存(实时更新的数据)
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
myappcache.appcache内容如下
CACHE MANIFEST../css/flex.css../img/compatible_chrome.gif../img/compatible_firefox.gif../img/compatible_ie.gif../img/compatible_opera.gif../img/compatible_safari.gif../js/main.jsNETWORK:http://ajax.microsoft.com/ajax/jquery/jquery-2.1.4.min.jsFALLBACK:/404.html
index.html内容如下
<pre name="code" class="html"><!DOCTYPE html><html manifest="./manifest/myappcache.appcache"><head><meta charset="utf-8" /><link rel="stylesheet" href="css/flex.css" /><script src="http://ajax.microsoft.com/ajax/jquery/jquery-2.1.4.min.js"></script><title>flex</title></head><body><div id='content'><div><img src="img/compatible_chrome.gif" ><span>chrome</span></div><div><img src="img/compatible_firefox.gif" ><span>firefox</span></div><div><img src="img/compatible_ie.gif" ><span>ie</span></div><div><img src="img/compatible_opera.gif"><span>opera</span></div><div><img src="img/compatible_safari.gif" ><span>safri</span></div></div></body></html>
更新缓存
一旦应用被缓存,它就会保持缓存直到发生下列情况:
- 用户清空浏览器缓存
- manifest 文件被修改
- 由程序来更新应用缓存
demo的目录结构如下:
第一次打开页面耗时如下:
再次打开或者重新加载时,明显有耗时较少
注意:
1、浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)。
2、manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest",必须在 web 服务器上进行配置。 2 0
- SEO之html5缓存
- HTML5之应用缓存
- HTML5之离线应用缓存
- HTML5之离线应用缓存
- html5学习笔记之离线缓存
- HTML5之---Manifest 文件--离线缓存
- HTML5新特性之离线缓存技术
- HTML5新特性之离线缓存技术
- Web缓存系列之HTML5.0中的缓存机制
- html5缓存
- HTML5 缓存
- html5缓存
- HTML5研究之应用缓存(application cache)
- Html5常见知识点之缓存(cookie,sessionStorage,localStorage)
- html5浏览器缓存 localStorage 之LsyStorage.js插件的使用
- html5 浏览器缓存 sessionStorage 之 LsySession.js插件的使用方法
- HTML5基础标签与SEO
- SEO之SEO公关优化
- app开发简单流程
- hdu 2060(水题)
- 【漫谈机器学习】-前言
- perl让人纠结的几个问题
- 欢迎使用CSDN-markdown编辑器
- SEO之html5缓存
- PHP之随机截取汉字
- 从菜鸟走向大数据高手
- perl pack/unpack
- LeetCode Majority Element II
- opencv2.4.9学习_加载并显示一个图像
- perl 数字<->字符串及其进制间的转换
- 杭电2602
- 京东商品详情页应对“双11”大流量的技术实践