HTML5多线程与离线存储

多线程 Worker

  1. 前端页面
    1
    2
    3
    4
    5
    6
    // 创建对象
    var w = new Worker("work.js");
    w.postmessage("发送的数据");
    w.onmessage = function(e){
    // do something
    }
  2. 多线程处理页面
    1
    2
    3
    4
    self.onmessage = function(e){
    // 前端页面传过来的数据
    console.log(e.data)
    }

    离线存储

    使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。
    HTML5引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势:
  • 离线浏览 – 用户可在应用离线时使用它们
  • 速度 – 已缓存资源加载得更快
  • 减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。

  1. 新建一个 .appcache 文件,html文件的html标签中引入这个文件
  2. apachehttpd.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

文章作者: 踏浪
文章链接: https://www.lyt007.cn/技术/HTML5多线程与离线存储.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 平凡的生活,不平凡的人生
支付宝
微信打赏