写在前面

众所周知，JavaScript是单线程的，JS和UI更新共享同一个进程的部分原因是它们之间互访频繁，但由于共享同一个进程也就会造成js代码在运行的时候用户点击界面元素而没有任何响应这样的情况，这么糟糕的用户体验HTML5怎么会不修订了，这样Web Worker诞生了。

简介

Web Worker进程加载的js运行的时候不仅不会影响浏览器UI，而且也不会影响其它Web Worker进程加载的JS代码。由于Web Worker进程加载的js运行的时候不会影响浏览器UI，也就说明Web Worker中加载的js不能修改用户界面，而每个Web Worker都有自己的全局运行环境，因为它加载的js不能修改用户界面，所以它能操作的对象主要只包括以下几个部分

  • 一个浏览器对象，只包含四个属性：appName,appVersion,userAgent,platform
  • 一个location对象（和window里的一样，但是里面所有的属性是只读的）
  • 一个self对象指向全局Web Worker线程对象
  • 一个importScripts()方法使Web Worker能够加载外部js文件
  • 所有的ECMAScript对象
  • XMLHttpRequest构造器
  • setTimeout()和setInterval()方法

WebWorker擅长之处

这里先特意讲一个importScript方法，它是以阻塞方法加载js的，只有所有文件加载完成之后接下来的脚本才能继续运行

事实上，Web Worker适合于那些纯数据的，或者说与浏览器UI没关系的长运行脚本。

下面附上最基本的demo事例，我相信聪明的你一看就会了

简单建立一个html页面，页面代码如下而所示

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body>
  7.     <script type="text/javascript">
  8.         var worker = new Worker("webworker.js"); //这句话将让浏览器去加载webworker.js
  9.         worker.postMessage('主线程发起的数据请求!'); //把数据传递给webworker.js
  10.  
  11.         worker.onmessage = function (event) {
  12.             console.log(event.data); //来自work的数据保存在event.data
  13.             //接下来就可以对它event.data进行序列化等数据处理啦
  14.         };
  15.  
  16.     </script>
  17. </body>
  18. </html>

上面代码加载的webworker.js的代码如下所示：

  1. onmessage = function (event) {
  2.     var data = event.data;//这是接收过来的数据
  3.     console.log(data);//注意啦 这里不能用alert来替换console.log  因为alert是会阻塞ui  所以wobworker没有使用alert的权限哦
  4.     postMessage(data + ' --- js回复过来的数据哦!');//这里可以把数据传递给主线程哦
  5. };
  6. onerror = function (event) {
  7.     console.log('Error:' + event.filename + '(' + event.lineno + '):' + event.message);
  8.     //event.filename  错误的文件名
  9.     //event.lineno 错误的行号
  10.     //event.message完整的错误消息
  11. }

那么Web Worker的主要用处在哪儿呢，它的优点有哪些呢，下面总结一下哈

  • 可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信，使用ternimate方法停止工作
  • 可以在worker中通过importScripts(url)加载另外的脚本文件

它的主要缺点在哪儿呢

  • 不能跨域加载JS
  • worker内代码不能访问DOM
  • 因为它是html5中新的API，所以各个浏览器支持都不一样哦！

web worker来加载数据还是比较慢的，即便是大数据量情况下也没任何优势，可能是Worker初始化新起线程比较耗时间。除了在加载过程中是无阻塞的之外没有任何优势

下面再附上我写的一个例子，主要是发挥Web Worker的特长

html界面代码如下所示

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body>
  7.     <script type="text/javascript">
  8.  
  9.         var worker = new Worker('fibonacci.js');
  10.         worker.addEventListener('message', function (event) {
  11.             console.time('总共花费的时间为：');
  12.             console.log('结果：' + event.data);
  13.             console.timeEnd('总共花费的时间为：');
  14.         }, false);
  15.  
  16.         worker.postMessage(40);
  17.  
  18.     </script>
  19. </body>
  20. </html>

上面代码中加载的fibonacci.js代码如下所示

  1. var fibonacci = function (n) {
  2.     return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);
  3. };
  4. onmessage = function (event) {
  5.     var n = parseInt(event.data, 10);
  6.     console.log('传过来的值为：'+n);
  7.     postMessage(fibonacci(n));
  8. };
  9. onerror = function (event) {
  10.     console.log('Error:' + event.filenme + '(' + event.lineno + '):' + event.message);
  11. }

大家运行后可以发现chrome控制台的结果如下图所示：

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 中出 ...

随机推荐

  1. 用c#操作Mongodb(附demo)

    因为需要,写了一个基于泛型的helper,这样要使用起来方便一点. 为了大家也不重复造轮子,所以发出来希望能帮到谁. 复杂的查询最好用linq,这也是mongodb官方建议的. mongodb的C#配 ...

  2. Javascript 模块化开发上线解决方案

    最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...

  3. [转]Win2003打不开https的问题

    转自:http://ljl-xyf.iteye.com/blog/2269834 碰到客户做问题是能打开https://www.baidu.com 这个网页 打不开 https://sha256.al ...

  4. NPOI导出

    <body> @using (Html.BeginForm("ImportCommentsFile", "CommentsManage", Form ...

  5. 简单的解释XSS攻击

    XSS 跨站点脚本 cross site script 怎么造成攻击? 举例:有一个公共的页面,所有用户都可以访问且可以保存内容,输入的时候若输入<script>alert('I am h ...

  6. canvas三角函数做椭圆运动效果

    <canvas id="canvas" width="800" height="400" style="background ...

  7. jQuery能做些什么

    来源于: Learning jQuery, 4th Edition What jQuery does: 1. Access elements in a document; $('div.content ...

  8. Oracle SQL Developer 添加SQLServer 和Sybase 连接

    来源于: http://blog.csdn.net/kk185800961/article/details/8602306 1. 开始只有Oracle 和access 连接 2. 打开Oracle S ...

  9. Shell脚本_启动停止重启sh脚本

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  10. 强联通 poj 2762

    t个样例    (注意清零) n个点m条边 有向; 任意2点是否能从a->b或者b->a; Yes  No #include<stdio.h> #include<algo ...