写在前面

众所周知，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. 一道javascript面试题

    下面表达式比较的结果分别是什么? 1. []=="0" 2. []==0 3. "0"==0 4. []==false 5. []==[] 大家可以试试写下自己 ...

  2. jQuery操作单选按钮(radio)用法

    1.获取选中值,四种方法都可以: $('input:radio:checked').val():$("input[type='radio']:checked").val(); $( ...

  3. ArcEngine选中面要素样式修改

    //只用前五行,可以直接将选中的面要素的颜色全部修改成红色,也就是填充颜色 IRgbColor pRgbColor= new RgbColor();; pRgbColor.Red = ; pRgbCo ...

  4. 狗屎的Java规范

    规范 标题真有点侮辱了狗. 最近做Java,C#与Java对比笔记: http://www.cnblogs.com/newsea/p/4839540.html 其实Java语法弱点就弱点,关键是Jav ...

  5. [C#解惑] #2 对象的初始化顺序

    谜题 在上一篇C#解惑中,我们提到了对象的初始化顺序.当我们创建一个子类的实例时,总是会先执行基类的构造函数,然后再执行子类的构造函数.那么实例字段是什么时候初始化的呢?静态构造函数和静态字段呢?今天 ...

  6. MD5加密与验证

    package com.study; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException ...

  7. C 语言学习的第 03 课：你的 idea 是怎么变成能够执行的程序的

    在上一篇文章中,我们说到,C 语言系统应该由程序开发环境,C 语言本身和 C 语言的库组成.且同时说了程序开发环境做了“编写”,“预处理”,“编译”和“链接”这几件事情.但是细节并没有一一呈现.不知道 ...

  8. extjs基础 使用图标字体来美化按钮)

    下载 Font Awesome 1.拷贝css 和 fonts 到build同级目录 2.需要在index.html中引入css文件 3.在main.js文件中添加 initComponent : f ...

  9. [转]Oracle中使用Rownum分页详细例子

    原文地址:http://www.jb51.net/article/52272.htm 在MySQL中,我们通常都使用limit来完成数据集获取的分页操作,而在Oracle数据库中,并没有类似limit ...

  10. 【BZOJ 1568】【JSOI 2008】Blue Mary开公司

    经典的splay维护凸壳,但是看了看zky学长的题解最后决定写线段树维护标记永久化. Round1考到了这个之后一直没有理解标记永久化,CTSC也因为自己的缺陷丢掉了一些部分分,so sad 看来以后 ...