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. phaser小游戏框架学习（一）

    这两天由于项目的需要,所以简单学了一下phaser框架. 官网:http://phaser.io/ 还有一个phaser小站,是中文的网站,但是内容不如英文文档全,大家也可以去看这个网站,需要查阅AP ...

  2. kuangbin专题十二 HDU1176 免费馅饼 （dp）

    免费馅饼 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  3. element el-tree循环遍历树形结构，并动态赋值disabled属性

    凌晨3点,功夫不负有心人,已经累趴,效果终于出来: 贴上代码: <style scoped> .form { width: 50%; } </style> <templa ...

  4. 老男孩python作业3-购物车程序优化

    购物车优化要求:用户入口: 1.商品信息存在文件里 2.已购商品,余额记录.第一次启动程序时需要记录工资,第二次启动程序时谈出上次余额 3.允许用户根据商品编号购买商品 4.用户选择商品后,检测是否够 ...

  5. Spring 配置RMI远程调用

    项目中遇到了跨系统调用,当初想的是用webservice或者是hessian.但是这个接口用到的并不多,而且是一个非常简单的方法.所有便想到了RMI.在spring中 实现RMI非常简单. 暴露服务: ...

  6. Educational Codeforces Round 13 C

    Description Little Joty has got a task to do. She has a line of n tiles indexed from 1 to n. She has ...

  7. 2016计蒜之道初赛第四场A

    在每年的淘宝“双十一”时,访问量都会暴涨,服务器的请求会被流量分配程序按照一定策略,分发给不同的进程去处理.有一类请求,有两个进程可以接受分发的请求,其中一个进程所在服务器的配置.网络传输性能等都要优 ...

  8. lintcode - 被围绕的区域

    class Solution { public: /* * @param board: board a 2D board containing 'X' and 'O' * @return: nothi ...

  9. 《高性能mysql》笔记

    组合索引和sql中的顺序有关 单列索引和sql中的顺序无关

  10. Zero Sum Subarray

    Given an integer array, find a subarray where the sum of numbers is zero. Your code should return th ...