写在前面

众所周知，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页面，页面代码如下而所示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

</head>

<body>

    <script type="text/javascript">

        var worker = new Worker("webworker.js"); //这句话将让浏览器去加载webworker.js

        worker.postMessage('主线程发起的数据请求!'); //把数据传递给webworker.js

        worker.onmessage = function (event) {

            console.log(event.data); //来自work的数据保存在event.data

            //接下来就可以对它event.data进行序列化等数据处理啦

        };

    </script>

</body>

</html>

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

onmessage = function (event) {

    var data = event.data;//这是接收过来的数据

    console.log(data);//注意啦 这里不能用alert来替换console.log  因为alert是会阻塞ui  所以wobworker没有使用alert的权限哦

    postMessage(data + ' --- js回复过来的数据哦!');//这里可以把数据传递给主线程哦

};

onerror = function (event) {

    console.log('Error:' + event.filename + '(' + event.lineno + '):' + event.message);

    //event.filename  错误的文件名

    //event.lineno 错误的行号

    //event.message完整的错误消息

}

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

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

它的主要缺点在哪儿呢

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

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

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

html界面代码如下所示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

</head>

<body>

    <script type="text/javascript">

        var worker = new Worker('fibonacci.js');

        worker.addEventListener('message', function (event) {

            console.time('总共花费的时间为：');

            console.log('结果：' + event.data);

            console.timeEnd('总共花费的时间为：');

        }, false);

        worker.postMessage(40);

    </script>

</body>

</html>

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

var fibonacci = function (n) {

    return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);

};

onmessage = function (event) {

    var n = parseInt(event.data, 10);

    console.log('传过来的值为：'+n);

    postMessage(fibonacci(n));

};

onerror = function (event) {

    console.log('Error:' + event.filenme + '(' + event.lineno + '):' + event.message);

}

大家运行后可以发现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. Intel系列CPU的流水线技术的发展

    Intel系列CPU的流水线技术的发展 CPU(Central processing Unit),又称“微处理器(Microprocessor)”,是现代计算机的核心部件.对于PC而言,CPU的规格与 ...

  2. 工作框架各种使用整理---使用Cache

    <service verb="get" noun="Products"> <implements service="sang.pro ...

  3. lineNumber: 1; columnNumber: 1; 前言中不允许有内容

    周六项目还能运行,也没修改什么,周一来了启动项目,竟然报错了~~~ 这是遇到的错误提示: Cause: org.xml.sax.SAXParseException; lineNumber: 1; co ...

  4. Swift开发小技巧--自定义转场动画

    自定义转场动画 个人理解为重写了被弹出控制器的modal样式,根据自己的样式来显示modal出来的控制器 例:presentViewController(aVC, animated: true, co ...

  5. 远程登录服务器执行cmd的Python脚本

    import paramiko,os,sys ip = raw_input("input ip address :>>>") password = raw_inp ...

  6. hadoop,mapreduce---分布式计算

    从图中可以看出,map阶段的shuffle: 例如word count,当内存缓冲区满的时候会写到磁盘,一个spill,每个spill,进行分区,排序,最后将同一个分区word合并在一起,写入到磁盘中 ...

  7. Entity Framework Code First （八）迁移 Migrations

    创建初始模型和数据库 在开始使用迁移(Migrations)之前,我们需要一个 Project 和一个 Code First Model, 对于本文将使用典型的 Blog 和 Post 模型 创建一个 ...

  8. Canvas是什么

    Canvas 是通过 JavaScript 来绘制 2D 图形,是 HTML 5 中新增的元素. Canvas 有如下特点: 绘制的是位图,图像放大后会失真. 不支持事件处理器. 能够以 .png 或 ...

  9. 【2016多校训练4】Multi-University Training Contest 4

    1001  Another Meaning 题意:字符串A中包含的字符串B可以翻译或不翻译,总共有多少方案. 题解:动规,dp[i]表示A的第i位为止有多少方案. 转移方程: dp[i]=dp[i-1 ...

  10. awk 筛选特定长度的序列

    awk '/^>/ {printf("\n%s\t",$0);next;} {printf("%s",$0);} END {printf("\n ...