web worker的小例子，用来入门很合适，建议启动服务来开发。可以使用node的anywhere。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    ddd

</body>

<script src="./index.js"></script>

</html>

　　

index.js

// 实例化 Worker 对象，其实质为新创建的工作线程在主线程的引用

var worker = new Worker("task.js")

// postMessage 方法与新创建的工作线程通信

worker.postMessage({

    id: 1,

    msg: 'Hello World'

});

// 当 Worker 线程返回数据时，onmessage 回调函数执行

worker.onmessage = function (message) {

    var data = message.data;

    console.log(JSON.stringify(data))

    // terminate 方法终止 worker 线程的运行

    worker.terminate()

};

// 当 Worker 线程出错时，onerror 回调函数执行

// error 参数中封装了错误对象的文件名、出错行号和具体错误信息

worker.onerror = function (error) {

    console.log(error.filename, error.lineno, error.message)

}

　　

task.js

onmessage = function (message) {

    var data = message.data

    console.log(data)

    data.msg = 'Hi from task.js'

    postMessage(data)

}

这是web worker的工作原理

web worker技术-js新线程的更多相关文章

  1. HTML5中的Web Worker技术

    为了让后台程序更好的执行,在HTML5中设计了Web Worker技术.Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的,一旦前面的脚本花费 ...

  2. Web worker 与JS中异步编程的对比

    0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 问,以上代码何 ...

  3. web Worker使js实现‘多线程’？

    大家都知道js是单线程的,在上一段js执行结束之前,后面的js绝对不会执行,那么为什么标题说js实现‘多线程’,虽然说加了引号,可是标题也不能乱写不是,可恶的标题党? 姑且抛开标题不说,先说我们经常会 ...

  4. 一个简单的HTML5 Web Worker 多线程与线程池应用

    笔者最近对项目进行优化,顺带就改了些东西,先把请求方式优化了,使用到了web worker.发现目前还没有太多对web worker实际使用进行介绍使用的文章,大多是一些API类的讲解,除了涉及到一些 ...

  5. 通过一次实验来了解HTML5的 Web Worker

    web worker 是运行在后台的 JavaScript,不会影响页面的性能. 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 Ja ...

  6. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  7. 关于Web Worker你必须知道的7件事

    介绍 通过使用Web Worker, 我们可以在浏览器后台运行Javascript, 而不占用浏览器自身线程.Web Worker可以提高应用的总体性能,并且提升用户体验.如果你想在自己的Web应用中 ...

  8. web worker的用法及应用场景（转）

    首先简单介绍一下什么是web worker.我们都知道在浏览器中javascript的执行是单线程的,页面上的javascript在执行时会阻塞浏览器的响应,这非常影响用户体验,所以ajax应运而生了 ...

  9. 【转】Web Worker javascript多线程编程（一）

    原文:https://www.cnblogs.com/peakleo/p/6218823.html -------------------------------------------------- ...

随机推荐

  1. Julia体验 语言特性 元编程，宏

    上接语言基础,就release-1.1来看,个人感觉这门语言和自己心中的理想国相距较远.这门语言因为受众不仅仅是程序员有很多让人迷惑的设计,但是奇怪的是它的语法等表象设计虽然暗示这不是专门为程序员准备 ...

  2. socket中close发生的事情,RST,pipe信号错误

    1.server端close之后,client端write,导致server端发送RST(服务器关闭套接字):对方已经关闭或者异常终止,但是client端,不知道,这个成为半打开 当server端cl ...

  3. CF912D Fishes 期望

    题意翻译 Description 有一个长为nnn ,宽为mmm 的鱼缸,还有一个边长为rrr 的正方形渔网.你可以往鱼缸里放kkk 条鱼,问用渔网随机在浴缸里捞鱼的最大期望是多少.不懂什么是期望的自 ...

  4. 禁止百度转码和百度快照缓存的META声明

    今天手机 site 中国博客联盟时,发现网被转码了,虽然这个网站没做移动站,但是我也不希望被百度转码,因为这相当于拦截了所有来自手机的流量.下面说一下禁止百度转码和禁止百度快照缓存的方法. 一.禁止百 ...

  5. EA添加流程图

  6. java 简单封装resultMap返回对象为map

    public class DbUtils { private static String host = "47.93.******"; private static String ...

  7. javaEE 转发 和 重定向

    转发 两种方法: 1,request.getRequestDispatcher(getServletContext().getContextPath() + "/path").fo ...

  8. 需要了解的几个Java基础点

    关键字 native:表示要调用非Java语言写函数,比如用C语言使用JNI实现的接口.比如windows环境的dll文件.举例:Object.hashcode() 位运算 << n:左移 ...

  9. String转不同type的类对象

    import org.springframework.beans.SimpleTypeConverter; private Object deserializeValue(Class<?> ...

  10. yii2下的路由重写

    1.在config/main.php中添加配置信息 文件位置如图所示(图中展示的是backend下的config,也可以在fronted和common的config中添加) 配置的代码标准格式如下 ' ...