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. compose函数

    compose函数 在学习redux源码的时候看到了其中的工具函数compose,compose函数的作用就是组合函数,依次组合传入的函数: 后一个函数作为前一个函数的参数 最后一个函数可以接受多个参 ...

  2. 分享一个基于web的满意度调查问卷源码系统

    问卷调查系统应用于各行各业,对于企业的数据回收统计分析战略决策起到至关作用.而现有的问卷调查系统大都是在线使用并将数据保存在第三方服务器上.这种模式每年都要缴纳费用并且数据安全性得不到保证.所以说每个 ...

  3. Ocelot简易教程(二)之快速开始1

    Ocelot简易教程目录 Ocelot简易教程(一)之Ocelot是什么 Ocelot简易教程(二)之快速开始1 Ocelot简易教程(二)之快速开始2 Ocelot简易教程(三)之主要特性及路由详解 ...

  4. casbin的分析

    casbin的分析 问题 一般的项目中,都会有权限认证模块,用来控制不同的角色,可以访问的功能.比较出名的权限控制模型有ACL和RABC.如果每个项目中,都重新实现权限控制模块,这样操作会比较繁琐,希 ...

  5. T4代码生成器

    最近用MVC时业务上需要新增不同类型的视图页面,实际上页面排版什么的都差不多,只是内容有所不同,但是不能使用同一个视图. 想到了用T4代码生成器完成,之前就有听说过这个好东西,但是一直没有深入研究.借 ...

  6. Web前端课程设计——个人主页

    大三上学期期末总结,嗯,没错,是上学期,写在新学期开始hhh. 上学期学了一门HTML5+CSS3的课程,也叫Web前端技术,期末的课程设计是写一个个人主页,能够在浏览器中打开的静态网页.通过一学期的 ...

  7. Python 的 setitem、getitem、delitem 特殊方法使用

    简介 setitem:当属性被以索引方式赋值的时候会调用该方法 getitem:一般如果想使用索引访问元素时,就可以在类中定义这个方法 delitem:当使用索引删除属性时调用该方法 实例 __Aut ...

  8. iOS面试准备之思维导图

    以思维导图的方式对iOS常见的面试题知识点进行梳理复习,文章xmind点这下载,文章图片太大查看不了也点这下载 你可以在公众号 五分钟学算法 获取数据结构与算法相关的内容,准备算法面试 公众号回复 g ...

  9. MONGODB(二)——索引操作

    一.1.插入10w条数据> for(var i = 0;i<100000;i++){... var rand = parseInt(i*Math.random());... db.pers ...

  10. Linux--Introduction and Basic commands(Part one)

    Welcome to Linux world! Introduction and Basic commands--Part one J.C 2018.3.11 Chapter 1 What Is Li ...