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. 亿级PV请求的三种负载均衡技术（转）

    http://www.360doc.com/content/17/1126/23/50145453_707419125.shtml       目录 DNS轮询 LVS负载均衡 DR模式 NAT模式 ...

  2. Django / Python 链接MySQL数据库

    https://www.cnblogs.com/wupeiqi/articles/5237704.html python (Django)中使用MySQL 首先python3中没有 MySQLdb 需 ...

  3. Quadratic Residues POJ - 1808 二次剩余定理

    \(\color{#0066ff}{题目链接 }\) link \(\color{#0066ff}{ 题解 }\) 结论题 \((\frac{a}{p})=a^{\frac{p-1}{2}}\mod ...

  4. 1047 邮票面值设计 （DFS+DP)

    题目描述 Description 给定一个信封,最多只允许粘贴N张邮票,计算在给定K(N+K≤40)种邮票的情况下(假定所有的邮票数量都足够),如何设计邮票的面值,能得到最大值MAX,使在1-MAX之 ...

  5. 多数据源 + Configuration中bean依赖注入顺序问题

    为什么要调用方法,而不是直接autowire? 官方文档 https://docs.spring.io/spring-boot/docs/current/reference/html/howto-da ...

  6. my21_myloader -o参数

    -o 参数 如果不使用-o参数,遇到第一个有主键或者唯一约束的数据,则退出当前线程:如果有-o参数,则删除原来的表,创建新表,再插入数据,主键不会发生变化. ** Message: Dropping ...

  7. scp —— 服务器之间互传文件

    scp 可以在 2个 linux 主机间复制文件: 从 本地 复制到 远程 * 复制文件:       举例子: scp /home/space/music/.mp3 root@192.168.0.1 ...

  8. my.资料_副本_破六欲

    http://www.nok2.com/fxjy/816.html 梦幻之家礼包网讲解梦幻2破除心魔 来源:www.nok2.com作者:礼包达人时间:2016-04-01 22:11 最近听到不少小 ...

  9. Mybatis学习笔记6 - #{}和${}

    #{}:可以获取map中的值或者pojo对象属性的值.${}:可以获取map中的值或者pojo对象属性的值. 区别: #{}:是以预编译的形式,将参数设置到sql语句中:PreparedStateme ...

  10. impdp参数TABLE_EXISTS_ACTION

    [转自:http://space.itpub.net/519536/viewspace-631445] 当使用IMPDP完成数据库导入时,如遇到表已存在时,Oracle提供给我们如下四种处理方式:a. ...