zoukankan      html  css  js  c++  java
  • html5 workers线程

    html5之前,javascript脚本都是在单线程中执行的,也就是说如果js运行时间过长,除了等待什么也干不了,甚至卡死。创建一个worker后台线程,这样就不影响前台的渲染了。

    简单演示主页面

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>html5 workers</title>

    </head>

    <body>
    <span id="span1">5</span>
    <div id="result">结果</div>
    <script type="text/javascript">
    var value = +document.getElementById('span1').innerHTML;
    var work = new Worker('work.js');
    work.onmessage
    = function(event){
    document.getElementById(
    'result').innerHTML = event.data;
    }
    window.onload
    = function(){
    work.postMessage(value);
    }
    </script>
    </body>
    </html>

    work.js页面代码

    onmessage = function(event){
    var result = event.data + 10;
    postMessage(result);
    }

    示例简单说明

    建立一个后台线程很简单,只要建立一个带有js文件参数的Worker()实例。运行上面内容,"结果"会被"15"替换。
    主页面和js页面都通过onmessage()事件句柄来接收数据(message监听事件),此方法可传入一个event事件对象,event.data就是实际传递的数据。
    主页面和js页面都通过html5的postMessage方法发送数据(含有循环的引用不能通过postMessage发送)。

    注意事项
    后台线程脚本文件不能直接访web问页面和DOM API,如果访问会报错。主页面方法都是work实例调用的,而在线程脚本中是直接调用的。

    其他相关
    work可以使用“error”错误监听事件处理错误
    work不会自动关闭,为了节省资源,可使用work.terminate()方法关闭进程。关闭后无法打开,只能新建
    线程可以嵌套
    如需在线程js中引入其他Js文件,可以使用importScript(urls)方法

  • 相关阅读:
    【Shell】Shell编程之while循环命令
    【Shell】Shell编程之grep命令
    【Shell】Shell编程之awk命令
    【Shell】Shell编程之sed命令
    【MySQL】MySQL之示例数据库Sakila下载及安装
    关于JAVA项目报表选型过程
    关于HSQLDB访问已有数据库文件的操作说明
    为什么要用 C# 来作为您的首选编程语言
    ThinkPHP_5对数据库的CURL操作
    使用ECharts画K线图
  • 原文地址:https://www.cnblogs.com/bianyuan/p/2356467.html
Copyright © 2011-2022 走看看