zoukankan      html  css  js  c++  java
  • HTML5学习总结-06 WebWorker

    一 WebWorkder

      它允许开发人员编写能够长时间运行而不被用户所中断的后台程序,去执行事务或者逻辑,并同时保证页面对用户的响应。简而言之,就是允许JavaScript创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。从而,可以用webWorker来处理一些比较耗时的计算。

    好处:

      1 可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信
      2 可以在worker中通过importScripts(url)加载另外的脚本文件
      3 可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
      4 可以使用XMLHttpRequest来发送请求

    局限性:
      1 不能跨域加载JS
      2 worker内代码不能访问DOM
      3 各个浏览器对Worker的实现不大一致,例如FF里允许worker中创建新的worker,而Chrome中就不行
      4 IE这个新特性

    例子:

    index.html

    <!DOCTYPE html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <p id="support">你的浏览器不支持 HTML5 Web Workers</p>
    <button id="stopButton" >停止任务</button>
    <button id="helloButton" >发送消息</button>
    <script>
    window.onload = function() {
        if( typeof (Worker) !== "undefined") {
            document.getElementById("support").innerHTML = "你的浏览器支持HTML5 Web Workers";
            worker = new Worker("worker.js");
            worker.onmessage = function(e) {
                console.log(e.data);
            }
            worker.onerror = function(e) {
                console.warn(e.message, e);
            }        
            document.getElementById("helloButton").onclick = function() {
                worker.postMessage("ok");
            }
            document.getElementById("stopButton").onclick = function() {
                worker.terminate();
            };
        }
    }
    
    </script>

    worker.js

    onmessage = function(e) {
        postMessage("worker says: " + e.data );
    }

    参考资料:

    http://www.w3school.com.cn/html5/html_5_webworkers.asp

    http://www.cnblogs.com/giggle/p/5350288.html

    http://www.cnblogs.com/giggle/p/5350288.html

  • 相关阅读:
    xss框架(一)之浏览器通信
    Joomla未授权创建特权用户漏洞和getshell脚本解析
    从零开始写网站登录爆破(一)
    CSRF学习整理
    vue中vue2-google-maps使用谷歌地图的基础操作
    vue中百度地图API的调用
    60秒定时减少
    git操作指令,以及常规git代码操作
    taro taroUi的H5打包后路径/修改为./
    vue enter事件无效,加入native
  • 原文地址:https://www.cnblogs.com/wangshuo1/p/5859418.html
Copyright © 2011-2022 走看看