H5的 多线程Worker,缓存cache

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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值