Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。它独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

1、Web Worker的创建是在主线程当中通过传入文件的url来实现的。如下所示：

var webworker=new Worker('my_task.js');

创建webworker对象的时候需要判断浏览器是否支持 if(typeof Worker == 'undefind')则提示错误；

返回的webworker对象，该对象可以完成与worker线程的通信，主要通过webworker.postMessage(data)向线程发送消息，通过webworker.onmessage=function(evt){}来监听worker线程发送到主线程的消息，通过webworker.onerror=function(evt){}来监听线程中的错误消息，通过webworker.terminate()来告诉worker线程立即终止执行。

2、web worker线程是无法操作Dom对象的，所以像prompt、alert、console等都是无法在web worker线程中使用的，所以调试不太处理。但是可以将调试发送给主线程，主线程通过web worker线程发出的请求作出处理。

3、用于创建webworker线程的js文件必须和当前页面遵循同源策略，也就是说不能跨域请求js文件；另外，线程之间的消息传递是不能有Function对象的，就是说不能够传递函数，在safari浏览器中只能传递数字/字符串等基本值（连Object都不行）。并且所有线程之间的数据并不是常规的引用方式，都是一份独立的拷贝。因此一般情况下，我们会将传递的参数转化为字符串进行传递，可以通过JSON.stringify()和JSON.parse()来处理。

****一个发送消息的小例子****

woker.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Web Worker模拟聊天</title>

    <style>

        .apply{width:500px;height:300px;overflow:auto;border: 1px solid #000;margin:20px;padding:20px;font-size:14px;line-height:24px;}

        .apply .time{color:#ccc;font-size:12px;}

    </style>

</head>

<body>

    <div class="apply" id="res2"></div>

    <div style="padding:20px;">

        <textarea style="width:400px;height:100px;" id="res"></textarea>

        <button onclick="startWorker()">发送</button>

        <button onclick="stopWorker()">stop</button>

    </div>

    <script>

    var w;

    w = new Worker('worker.js');

    var res = document.getElementById('res'),

        res2 = document.getElementById('res2');

    if(typeof Worker !== 'undefined'){

        function startWorker(){

            w.postMessage(res.value);

            res.innerHTML = '';

            w.onmessage = function(e){

                var oTxt = document.createTextNode(e.data);

                var oTime = document.createElement('div'),

                    oTimeTxt = document.createTextNode(new Date());

                oTime.setAttribute('class','time')

                oTime.appendChild(oTimeTxt);

                res2.appendChild(oTime);

                res2.appendChild(oTxt);

                res2.appendChild(document.createElement('br'))

                res2.appendChild(document.createElement('br'))

            }

        }

        function stopWorker(){

            w.terminate();

        }

    }

    </script>

</body>

</html>

worker.js

onmessage = function(e){

	postMessage("收到："+e.data);

}

效果：

有借鉴：https://blog.csdn.net/web_doris/article/details/38440401

Web Worker浅学的更多相关文章

  1. 浅学JavaScript

    JavaScript是互联网上最流行的脚本语言,可广泛用于服务器.PC.笔记本电脑智能手机等设备: 对事件的反应: <!DOCTYPE html> <html> <hea ...

  2. 前端每周清单第 49 期：Webpack 4 Beta 尝鲜，React Windowing 与 setState 分析，Web Worker 实战

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID: fron ...

  3. JavaScript多线程之HTML5 Web Worker

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

  4. Web Worker javascript多线程编程（一）

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

  5. Web Worker javascript多线程编程（二）

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

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

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

  7. web Worker使js实现‘多线程’？

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

  8. HTML5：web socket 和 web worker

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

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

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

随机推荐

  1. URL重写：Rewirte模块原理详解

    Apache+PHP+MySQL Rewirte主要的功能就是实现URL的跳转和隐藏真实地址,基于Perl语言的正则表达式规范.平时帮助我们实现拟静态,拟目录,域名跳转,防止盗链等.本文将针对mod_ ...

  2. oracle查看表占用磁盘空间

    SELECT T.OWNER, T.SEGMENT_NAME, SUM(T.BYTES) / 1024 / 1024 M  FROM DBA_SEGMENTS T WHERE T.OWNER = 'u ...

  3. xcode下载低版本模拟器速度缓慢解决方案

    随着苹果系统的更新和迭代,现在app开发中需要适配的除了需要适配屏幕尺寸以外,还需要适配系统版本.系统版本测试如果有条件可以使用各种系统版本的真机进行适配,如果没有这个条件,也可以采用xcode的模拟 ...

  4. 让Category支持添加属性与成员变量【转载】

    Category是Objective-C中常用的语法特性,通过它可以很方便的为已有的类来添加函数.但是Category不允许为已有的类添加新的属性或者成员变量.     一种常见的办法是通过runti ...

  5. sublime使用技巧（3）-- 常用快捷键【持续更新】

    ♥ Ctrl + Shift + v 这样粘贴可以保持原格式,不会有缩进上的困扰 Ctrl + k 用Ctrl + d选中重复单词时跳过当前选中 Ctrl + Enter 在光标所在行的下一行新建一行 ...

  6. 二级导航内容均分--jquery

    这个是去年做过的一个项目中的算法,个人感觉还可以,所以拿出来分享下. 背景:头部导航二级导航有些内容太长,一列的话太过难看,就要分成两列,要做到按块尽量均分,排列顺序没有限制. 原理: 1.把各个二级 ...

  7. Linux高并发应用类型对系统内核的优化

    Linux操作系统内核参数优化 net.ipv4.tcp_max_tw_buckets = net.ipv4.ip_local_port_range = net.ipv4.tcp_tw_recycle ...

  8. 09 Memcached 分布式之取模算法的缺陷

    一: Memcached 分布式之取模算法的缺陷(1)假设你有8台服务器,运行中突然down一台,则求余数的底数就7. 后果: key_0%8==0 ,key_0%7==0 =>hist(命中) ...

  9. local variable 'xxx' referenced before assignment（犯过同样的错）

    这个问题很囧,在外面定义了一个变量 xxx ,然后在Python的一个函数里面引用这个变量,并改变它的值,结果报错local variable 'xxx' referenced before assi ...

  10. python is == 的区别, 编码与解码.深浅拷贝

    一. is  ==  的区别 双等表示的是判断是否相等, 注意. 这个双等比较的是具体的值.而不是内存地址 is 比较的是地址 编码回顾 除了了ASCII码以外, 其他信息不能直接转换 编码和解码的时 ...