html5线程,html5多线程

html5 worker 怎么杀掉线程

这个我试过，跟中止进程类似，用API： 1.取线程中止码：GetExitCodeThread((void *)thread-Handle,ExitCode); 2.强行中止: TerminateThread((void *)thread-Handle,ExitCode);如此而已 这是一个死循环线程：__fastcall MyThread::MyThread(bo...

成都创新互联公司主要从事做网站、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务北仑,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

如何使用html5的web workers开启多线程

HTML5-Web Workers实现多线程：

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行，单实际上JavaScript使单线程的，一次只能做一件事情。

可以运行以下示例，检验js的单线程特性。

相关代码请到github查看。

div id='container'/div

script

window.alert('hi');

setTimeout(function(){

var ul = document.createElement('ul');

var li = document.createElement('li');

var text = document.createTextNode('world');

var container = document.getElementById('container');

li.appendChild(text);

ul.appendChild(li);

container.appendChild(ul);

console.log('done!');

},2000);

/script123456789101112131415123456789101112131415

如果JavaScript是多线程，在弹出警告框两秒后，页面应该出现一个li标签（内容为world）。事实上因为JavaScript是单线程，所以如果你不点击弹出框的确定按钮，world这个li永远也出不来。

点击确定后

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

我们需要把希望单独执行的javascript代码放到一个单独的js文件中，然后在页面中调用Worker构造函数来创建一个线程，参数是该文件路径，参数存放如果是相对地址，那么要以包含调用Worker构造函数语句所在脚本为参照，如果是绝对路径，需要保证同源（协议+主机+端口）。这个文件不需要我们在页面使用script标签显示引用。

var worker = new Worker('src/js/worker.js');11

我们可以看到worker对象只有两个属性，其实是两个回调函数句柄

onerror:当worker运行出现错误，并且没有在worker中ing捕获，会在此捕获

onmessage:当worker向主线程发送消息是调用

在其prototype内有两个重要方法

postMessage:很熟悉的赶脚，之前我们介绍过window对象的postMessage()方法，woker的postMessage方法和window的比较类似，但参数略有不同，只需要传递消息内容就可以，而且支持所有JavaScript原生数据类型，当然不放心的话同样也可以序列化为字符串传递

terminate:终止worker执行，有些worker执行比较慢，主线程可以主动终止其执行

下面我们用web workers重写上面那个例子。

相关代码请到github查看。

test_web_worker.html

script

var worker = new Worker('./worker.js');

window.alert('hi');

/script12341234

worker.js

setTimeout(function(){console.log('done!');},2000);

在html5中，多线程worker和异步ajax有什么区别

多线程是属于并发范畴,而异步是数据请求方式的范畴,与同步相对。从具体使用场景来说，耗CPU的任务可以移到worker中处理，ajax主要是IO费时间，为了保证不让代码阻塞，所以异步处理，等数据到达时再通知程序。这是在html5中的变通方法，因为ajax是比较早实现的，而worker是比较新的一个概念，可以说worker的功能是覆盖ajax的，只是由于HTML的不断发展自然出现了这样的问题。

在其它语言中，一般费时任务都放在其它线程中，以避免阻塞主线程。而不管它是费CPU还是费IO。

总之，这都是HTML的错。你大可以把网络请求也放在worker中处理，但不幸的是，支持worker的浏览器并不多。

HTML5(四)——Web Workers

JavaScript 语言是采用单线程模型，也就是任务只能在一个线程上完成，一次只能做一件事，前面任务没执行完，后面的任务只能排队等待，由于多核 CPU 的出现，单线程带来很大不便，无法充分发挥计算机的能力。

Web Worker 就是为了 javascript 创造多线程而生的，主线程创建 worker 子线程，将一些任务分配给后台运行，等到子线程完成计算任务，再把结果返回给主线程，好处是计算密集型或高延迟的任务被 worker 负担了，主线程就会很流畅。网页加载展示可分为两部分：主进程也叫 UI 进程，子进程也叫工作进程，子进程不能控制 UI 进程，只能进行数据交互。

Web Worker 子线程一旦创建成功，就会独立于其他脚本始终运行，不会被主线程上活动打断。这样有利于随时响应主线程的通信。但是这也造成 Worker 比较耗费资源，不应该过度使用，使用完毕之后应该关闭。

使用 Web Worker 注意点：

2.1 创建Worker线程：

创建worker之前，先检查浏览器是否支持它。使用 typeof 检查，代码如下：

检查浏览器支持 worker 之后，主线程使用 new 命令，调用 worker() 构造函数，新建 Worker 线程。

构造函数的参数是一个脚本文件，该文件不能是本地文件，必须来自网络脚本，该文件就是Worker 线程要执行的任务。如果该文件加载失败，Worker 就会失败。

2.2 主线程与子线程数据通信：

主线程调用 postMessage() 方法，向 Worker 发消息。postMessage(参数) 方法中参数就是传给 Worker 的数据，这个数据可以是任意格式。

紧接着 Worker 线程，通过 onmessage 指定监听函数，接收消息。worker.js 代码如下：

worker子进程收到消息之后，可以继续向主进程发送消息，使用 postMessage()。代码如上。

主进程也通过onmessage监听函数接收消息。

2.3 Worker线程

Worker线程内部，添加 this.onmessage 监听函数，其中 this 是子线程的全局对象，也可以替换成 self，self 代表子线程本身。等同于：

除了使用 self.onmessage 指定监听函数，也可以使用 this.addEventListener() 监听事件对象。上述 worker.js 代码可改为：

2.4 错误处理

主线程可以监听Worker是否发生错误，如果发生错误，Worker 会触发主线程的 error 事件。

worker 子线程也可以监听 error 事件。

2.5 关闭 Worker

Worker 比较耗费资源，不应该过度使用，使用完毕之后应该关闭。主线程和子线程都可以关闭。

通常情况下，Worker 载入的是一个单独的 javascript 文件，但是也可以载入与主线程在同一个网页的代码。网页中添加 Worker 脚本，必须注意指定script标签的type属性是一个浏览器不认识的值，否则就会失去意义。如：

然后，需要读取这段代码，先将嵌入网页的脚本代码转成二进制对象，然后为这个二进制对象生成url，再让worker加载url,这样就实现了主进程和worker在同一个网页内。代码如下：

Worker构造函数方法：

子进程属性方法：

Worker() 构造函数，可以接受两个参数，第一个是脚本的地址，第二个是参数是配置对象，该对象指定Worker的名称。如：