写在前面

众所周知，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. SQL 2014 in-memory中的storage部分

    基于CTP1的官方白皮书,自己理解的内容.白皮书下载地址:http://download.microsoft.com/download/F/5/0/F5096A71-3C31-4E9F-864E-A6 ...

  2. 关于iphone 6 ios8网站背景图片错乱的问题解决办法

    最近公司有个客户的网站用手机safari打开出现背景图片错乱,本来应该显示A图片的却显示B图片,网速越慢的情况下越容易出现这种问题,悲催的是这种情况只在iPhone 6上出现,并且不是一直这样,多刷新 ...

  3. Android开发之Menu和actionBar

    一.通过Menu目录下创建一个布局文件: 先看代码meu/main.xml: <?xml version="1.0" encoding="utf-8"?& ...

  4. HTML5+AJAX原生分块上传文件的关键参数设置

    processData:false 这是jquery.ajax的一个参数.默认值为true,表示会将非字符串对象自动变成k1=v1&k2=v2的形式,例如一个数组参数{d:[1,2]},到服务 ...

  5. display~

  6. 升級 Centos 6.5 的 php 版本

    升級 Centos 6.5 的 php 版本   待會再看 Centos 6.5 的 php 預設是用 5.3.3 這個版本號 最近想要改用 Laravel 4.1 發現需要 5.3.7 才能用,所以 ...

  7. 51nod 1101换零钱（背包）

    N元钱换为零钱,有多少不同的换法?币值包括1 2 5分,1 2 5角,1 2 5 10 20 50 100元.   例如:5分钱换为零钱,有以下4种换法: 1.5个1分 2.1个2分3个1分 3.2个 ...

  8. Jquery.min.js 下载

    Jquery 下载:http://www.jq22.com/jquery-info122

  9. 【深入Java虚拟机】之一：Java内存模型与内存溢出

    [深入Java虚拟机]之:Java内存区域与内存溢出 高速缓存模型如下: ----------------------------------------------------分割线-------- ...

  10. 资源: StaticResource, ThemeResource

    StaticResource ThemeResource 示例1.演示“StaticResource”相关知识点Resource/StaticResourceDemo.xaml <Page x: ...