@(HTML5)[多线程与离线存储]

[TOC]

十九、HTML 5 多线程与离线存储

多线程 Worker

1. 前端页面

// 创建对象
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 应用可进行缓存，并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势：

• 离线浏览 – 用户可在应用离线时使用它们
• 速度 – 已缓存资源加载得更快
• 减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。

---

1. 新建一个 .appcache 文件，html文件的html标签中引入这个文件
2. 在apache的httpd.conf文件下添加 AddType text/cache-manifest .appcache
3. 在.appcache文件下进行设置：

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。manifest 文件可分为三个部分：

1. CACHE MANIFEST - 在此标题下列出的文件将在首次加载后进行缓存
2. NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
3. 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