@(HTML5)[多线程与离线存储]
[TOC]
十九、HTML 5 多线程与离线存储
多线程 Worker
- 前端页面
// 创建对象
var w = new Worker("work.js");
w.postmessage("发送的数据");
w.onmessage = function(e){
// do something
}
2.多线程处理页面
self.onmessage = function(e){
// 前端页面传过来的数据
console.log(e.data)
}
离线存储
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。 HTML5引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势：
- 离线浏览 – 用户可在应用离线时使用它们
- 速度 – 已缓存资源加载得更快
- 减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。
- 新建一个
.appcache文件，html文件的html标签中引入这个文件 - 在
apache的httpd.conf文件下添加AddType text/cache-manifest .appcache - 在
.appcache文件下进行设置：
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次加载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
在线的情况下,用户代理每次访问页面，都会去读一次manifest.如果发现其改变, 则重新加载全部清单中的资源
更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况： 用户清空浏览器缓存 manifest 文件被修改（包括注释） 由程序来更新应用缓存
注意事项
- 站点离线存储的容量限制是5M
- 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
- 引用manifest的html必须与manifest文件同源，在同一个域下
- 在manifest中使用的相对路径，相对参照物为manifest文件
- CACHE MANIFEST字符串应在第一行，且必不可少
- 系统会自动缓存引用清单文件的 HTML 文件
- manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
- FALLBACK中的资源必须和manifest文件同源
- 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
- 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
- 当manifest文件发生改变时，资源请求本身也会触发更新
同域跨文档操作（服务器下运行）
iframe内页： 父页面操作子页面：contentWindow 子页面操作父页面：window.top(找到最顶级的父页面)/parent(第一父页面)
新窗口页： 父页面操作子页面：window.open 子页面操作父页面：window.opener
