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. Hystrix线程隔离技术解析-线程池(转)

    认识Hystrix Hystrix是Netflix开源的一款容错框架,包含常用的容错方法:线程隔离.信号量隔离.降级策略.熔断技术. 在高并发访问下,系统所依赖的服务的稳定性对系统的影响非常大,依赖有 ...

  2. React-Native App启动页制作(安卓端)

    原文地址:React-Native App启动页制作(安卓端) 这篇文章是根据开源项目react-native-splash-screen来写的.在使用react-native-link命令安装该包后 ...

  3. Thinkphp手把手练习

    一.搭建thinkphp开发环境 准备条件:thinkphp框架 1.在Apache的www目录下新建文件夹,命名为thinkphp,可以将THinkPHP框架放在该目录中. 2.在thinkphp目 ...

  4. 2019.2.25考试T1， 矩阵快速幂加速递推+单位根反演（容斥）

    \(\color{#0066ff}{题解}\) 然后a,b,c通过矩阵加速即可 为什么1出现偶数次3没出现的贡献是上面画绿线的部分呢? 考虑暴力统计这部分贡献,答案为\(\begin{aligned} ...

  5. jenkins在windows系统下部署安装,使用

    首先需要从官网上下载下来war包,让进入tomcat中 启动tomcat,然后可以看一堆日志 再在网站输入 localhost:8080/jenkins就会进去下面界面: 会出现上面状况: 需要进入: ...

  6. STP-6-快速生成树协议-新端口角色，状态和类型以及新链路类型

      IEEE 802.1w快速生成树协议(RSTP)增强了802.1D标准,在设计合理的网络中收敛时间远少于1秒.   端口状态从5个减少到3个 丢弃状态是在端口刚启用时的默认状态,边界端口除外,它的 ...

  7. DesiredCapabilities内容详解--Appium服务关键字

    上次了解了一些DesiredCapabilities的用法,有些还是不太清楚,去appium官网找了找官方文档,觉得写的很全: ## Appium 服务关键字 <expand_table> ...

  8. java经典学习路线

    恩,做开发的工作已经三年多了,说起来实在是惭愧,自己的知识树还像一棵小草一样,工作中使用到了许多的知识和技术,不过系统性不够.根基不牢.并且不够深入!当然,慢慢的我也更加的清楚,我需要学习一些什么样的 ...

  9. linux系统安全加固--账号相关

    linux系统安全加固 一.账号相关 1.禁用或删除无用账号 减少系统无用账号,降低安全风险. 当我们的系统安装完毕后,系统默认自带了一些虚拟账户,比如bin.adm.lp.games.postfix ...

  10. C语言中函数声明、形参、实参

    函数原型: 原型prototype是函数的声明:描述了函数的返回值与参数: 函数原型说明了两点: 1.该函数的返回值 2.该函数的参数及其类型 ++++++++++++++++++++++++++++ ...