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. springboot jpa mongodb 整合mysql Field in required a bean of type that could not be found Failed to load ApplicationContext

    1.完整报错 *************************** APPLICATION FAILED TO START *************************** Descripti ...

  2. CF1101A Minimum Integer 模拟

    题意翻译 题意简述 给出qqq组询问,每组询问给出l,r,dl,r,dl,r,d,求一个最小的正整数xxx满足d∣x d | x\ d∣x 且x̸∈[l,r] x \not\in [l,r]x̸∈[l ...

  3. 新建maven 父子模块项目

    第一步: 第二步: 先创建个简单的空架结构作为父项目 第三步: 创建子项目 第四步: 切换显示不同的maven子项目显示方式 关于maven中的parent聚合一直都有没好好总结,固有这篇. ---- ...

  4. C语言使用指针表示数组的注意事项

    1)数组名是指针常量 如对指针变量可以进行++运算,但是对数组名却不允许,另外,对数组名的赋值运算也是错误的 2)注意指针变量的当前值 指针变量的值在程序运行过程中可能经常改变,要对此注意 3)数组越 ...

  5. PowerShell命令部署WSP

    转载:http://www.cnblogs.com/ChunLiangZhang/archive/2012/07/18/2597335.html(作者:ChunLiang) 现在可以用SharePoi ...

  6. CMOS和BIOS

      CMOS是一类特殊的RAM(断电时将丢失其存储内容) BIOS是软件,是程序! CMOS是芯片,是硬件! 实际上我们是通过BIOS这个程序,去设置COMS的参数的.. COMS是一块芯片,继承在主 ...

  7. hdu1698 线段树（区间更新~将区间[x,y]的值替换为z）

    Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  8. html样式

    <!doctype html> <html> <head> <style id="mceDefaultStyles" type=" ...

  9. Oracle的CLOB大数据字段类型

    转载:https://www.cnblogs.com/Grand-Jon/p/7389427.html 一.Oracle中的varchar2类型 我们在Oracle数据库存储的字符数据一般是用VARC ...

  10. my16_sql_thread执行慢导致主从延迟高的一个情景

    现象:从库延迟高,查看slave status发现sql_thread执行语句的速度比主库慢,这样的延迟会一直高下去,下面是排查的一些过程1. 检查了从库的配置,磁盘的写入速度的确没有主库高2. io ...