H5的 多线程Worker,缓存cache

来源:互联网 发布:oracle数据库导出 编辑:程序博客网 时间:2024/06/09 02:27

worker详细

cache详细

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

worker

交给worker.js 处理 , 数据返回给html

<!DOCTYPE html><html lang="en"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta name="Author" content="">    <meta name="Keywords" content="">    <meta name="Description" content="">    <title>Document</title>    <style type="text/css">        * {margin: 0; padding: 0;}        a {text-decoration: none;}        ul,li {list-style: none;}        body {font-family: "Microsoft yahei";}    </style></head><body>    <button id="btn">worker</button>    <div id="box"></div>    <script type="text/javascript">    btn.onclick = function (e) {        // 发送postMessage        // 外部new Worker()        /*        web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。         */        console.time(1);        var w = new Worker('demo.js');        var num = 20000;        w.postMessage(num);        console.timeEnd(1);        w.onmessage = function (e) {            box.innerHTML = e.data;        }    }    </script></body></html>

worker.js

//  监听  传输的信息self.onmessage = function (e) {    var str = '';    for (var i = 0; i < e.data; i++) {        str += String.fromCharCode(i);    }    self.postMessage(str);}

cache

给Apache /conf/http.conf添加

        AddType text/cache-manifest manifest

cache.manifest 文件 后缀名可以是appcache
eg:

//缓存CACHE MANIFEST# time/theme.css/logo.jpg/main.js//联网时NETWORK:login.php//替补FALLBACK:/html/ /offline.html

html文件 中 html 要 添加属性 manifest=”manifest 文件”

<!DOCTYPE html><html manifest="cache.appcache"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta name="Author" content="">    <meta name="Keywords" content="">    <meta name="Description" content="">    <title>Document</title></head><body>    <img src="3.jpg" alt="" width="420" height="531"></body></html>