JavaScript采用的是单线程模式,它每次也只能执行一个事件,所以它在加载大量的事件的时候会比较慢。

而web-worker的作用就是给JavaScript提供一个多线程的模式。

  注意的是

    web-worker是无法操作DOM的节点的,它不能再主线程中调用的子线程中的函数,并且只能使用原生js进行编写。

    还有web-worker我在网上看见说是在部分浏览器里面是无效的,我在电脑上Google及Safari(电脑上仅有这两个浏览器╮( ̄▽ ̄)╭)上面测试了一下是没有问题的。

web-worker的使用

  创建主线程

    使用new来创建一个worker的函数,

var worker = new Worker("./work.js")

    然后使用worker.postMessage('...')向子线程方式数据

    接收子线程的数据

worker.onmessage = function(){
console.log(event.data)
}

  子线程

    在主线程中想子线程发布的数据使用

onmessage =function (event){
var mar_skt = event.data; //通过event.data获得发送来的数据
console.log(mar_skt); //打印数据
}

    然后在使用postMessage向主线程发生在子线程内容执行完毕的内容

postMessage(data)

  在不想要worker的时候也可以直接使用terminate()来结束它

worker.terminate();

  

web-worker 的使用的更多相关文章

  1. JavaScript多线程之HTML5 Web Worker

    在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...

  2. Web Worker javascript多线程编程(一)

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

  3. Web Worker javascript多线程编程(二)

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  4. 过段时间逐步使用HTML5新增的web worker等内容

    想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...

  5. web Worker使js实现‘多线程’?

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

  6. HTML5:web socket 和 web worker

    a:hover { cursor: pointer } 做练习遇到了一个选择题,是关于web worker的,问web worker会不会影响页面性能?补习功课之后,答案是不会影响. 查阅了相关资料学 ...

  7. javascript 多线程Web Worker不引用外部js文件的方法

    最近在Android开发中 Webview通过调用JavascriptInterface的方式与App交互 在交互的过程中,有些App上的操作时间会比较长,Web中调用的话会造成程序假死的情况 于是想 ...

  8. HTML5 Web Worker的使用

    Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Wo ...

  9. Web Worker 是什么鬼?

    前言 前端工程师们一定有过这样的体验,当一个页面加载了大量的 js 文件时,用户界面可能会短暂地"冻结".这很好理解,因为 js 是单线程的语言.我们再走的极端点,一段 js 中出 ...

  10. Web Worker

    写在前面 众所周知,JavaScript是单线程的,JS和UI更新共享同一个进程的部分原因是它们之间互访频繁,但由于共享同一个进程也就会造成js代码在运行的时候用户点击界面元素而没有任何响应这样的情况 ...

随机推荐

  1. 数据库语句收藏(MySQL)

    概览 => MySQL是一种关系数据库管理系统,关系数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这样就增加了速度并提高了灵活性. =>关键字不区分大小写 => S ...

  2. css笔记详解(1)

    css讲解 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 首先在我们学习css之前先来思考一个问题,为什么html标签上不直接 ...

  3. MongoDB加auth权限

    目录 裸奔有多危险 mongoDB修改默认端口号 关闭MongoDB 重启MongoDB 设置密码 吹个牛B,自己的MongoDB裸奔了快半年,从未遭受黑客攻击.也不知道是自己运气好,还是黑客对我的乞 ...

  4. HDU 1006 Tick and Tick 时钟指针问题

    Tick and Tick Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  5. Spring Boot 系列 - WebSocket 简单使用

    在实现消息推送的项目中往往需要WebSocket,以下简单讲解在Spring boot 中使用 WebSocket. 1.pom.xml 中引入 spring-boot-starter-websock ...

  6. SVN不能解锁,报错:没有匹配的可用锁令牌的解决方法

    命令行进入到要解锁的目录,执行 svn unlock 要解锁的文档名 进行解锁:若还是打不开锁,就用强制解锁 , svn unlock -f(--force) 要解锁的文档名 也可以通过 svnadm ...

  7. JavaScript之ECMA对象的学习

    从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现“类”这个词.ECMAScript 定义了“对象定义”,逻辑上等价于其他程序设计语 ...

  8. 部署vmware-vcsa 6.5

    介绍一下vcsa vsphere的两个最重要的组件是esxi和vcenter server,esxi是虚拟化主机管理软件,而vcenter server则是管理.组织多台esxi主机的管理中心. es ...

  9. Layui table 组件的使用:初始化加载数据、数据刷新表格、传参数

    背景 笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧! ...

  10. Centos 7.6配置nginx反向代理负载均衡集群

    一,实验介绍 利用三台centos7虚拟机搭建简单的nginx反向代理负载集群, 三台虚拟机地址及功能介绍 192.168.2.76    nginx负载均衡器 192.168.2.82    web ...