文档章节

web workers工作线程

Akillua
 Akillua
发布于 2017/07/27 10:55
字数 458
阅读 5
收藏 0
web worker工作线程是Html5里面提出来的一个新api,对于JavaScript我们的印象是单线程执行,如果运行复杂运算的时候,页面可能就会失去响应,
是运行在后台的javascript,独立于其他脚本 ,创建后,会在后台执行,并不会影响浏览器对于页面的响应

方法:postMessage()用于向html页面传回一段消息,
terminate()——终止web worker并释放浏览器/计算机资源

事件:onmessage</p>

使用:直接new一个出来,接收一个指向执行的javascript代码的地址。通过worker实例的onmessage方法可以接受工作线程发送过来的响应信息
工作线程通过postMessage可以向主线程发送消息,但是注意,这里的postMessage只接受一个参数
最后工作线程创建出来,如果不用了记得把他干掉work.terminate()

示例html代码如下:
<div id="numDiv">0</div>
    <button id="start">start</button>
    <button id="stop">stop</button>

js代码如下:

/**
 * Created by wwtliu on 14/8/16.
 */
var numDiv;
var work = null;

window.onload = function(){
    numDiv = document.getElementById("numDiv");

    document.getElementById("start").onclick = startWorker;
    document.getElementById("stop").onclick = function(){
        if(work){
//             Terminate()在以下多种情况下可以被调用:
// 1.     当发送一个异常,并且构造函数产生异常。
// 2.     当产生一个异常,或者析构函数发送一个异常。
// 3.     一个静态对象的析构或构造函数发送一个异常。
// 4.     以atexit注册的函数发生异常的时候。
// 5.     当你自行编写一个异常,但实际上没有异常产生的时候。
// 6.     当调用缺省的unexpected()函数时。
            work.terminate();
            work = null;
        }
    }
}

function startWorker(){
    if(work){
        return;
    }
    work = new Worker("count.js");
    work.onmessage = function(e){
        numDiv.innerHTML = e.data;
    }
}

工作线程代码如下:

/**
 * Created by wwtliu on 14/8/16.
 */

var countNum = 0;
function count(){
    postMessage(countNum);
    countNum++;
    setTimeout(count,1000);
}

count();

 




© 著作权归作者所有

Akillua
粉丝 0
博文 43
码字总数 19935
作品 0
郑州
私信 提问
JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景

摘要: 理解Web Workers。 原文:JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有。 这是专门探索 JavaScript 及其...

Fundebug
01/02
0
0
HTML5 Web Workers

Web workers 是什么 Web workers 是HTML5标准的一部分, 这一规范定义了一套API,它允许一段JavaScript程序运行在主线程以外的另外一个线程中。Web Workers 规范中定义了两类工作线程,分别是...

nao
2015/12/10
103
0
使用 Web Workers 提高 web 应用程序可用性

简介: Web Workers,一个新的 JavaScript 编程模型,可以提高您 web 应用程序的交互性。有了它您就可以以一种多线程方法运行 JavaScript,而且可以在后台运行脚本而不依赖任何用户界面脚本。...

IBMdW
2011/11/03
544
0
Javascript是如何工作的:Web Workers的原理,以及5个你应该使用他们的场景[译]

前言略。。。大概就是,这是一个javascript系列文章的第七篇,然后推荐了一个应用SessionStack。原文地址: https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web...

ITgecko
2018/12/06
0
0
精读《谈谈 Web Workers》

1 引言 本周精读的文章是 speedy-introduction-to-web-workers,是一篇 Web Workers 快速入门的文章,借精读这篇文章的机会,谈谈对 Web Workers 的理解与运用。 2 概述 就像分工,你只负责编...

黄子毅
2018/10/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部