Web Workers

为什么用web workers？

浏览器的原理中决定了页面打开只有一个主线程——UI渲染线程，如果线程中有耗时的程序（js）会阻塞线程，使得页面中其他的UI无法渲染，我们一般把js文件放在body结束之前，或者优化算法复杂度。但是根本上解决还是线程的问题。在HTML5中新增了web Workers的方法，用来解决JavaScript多线程的问题。把一些耗时的程序放在单独的js中，和浏览器的UI渲染线程同步执行。

如何用：

1.首先把需要单独执行的js代码单独放在一个js文件(such as fanfan.js);

　　　　onmessage方法接收主线程发送过来的数据

　　　　postMessage(data)向主线程发送数据

  /**

  * Created by fanfan on 2016/11/17.

  */

 onmessage=function(e){//onmessage方法接收主线程发送过来的数据

 var n= e.data;

     n=parseInt(n);

 var result =isPrime(n);

 postMessage(result);//postMessage(data)向主线程发送数据

 }

 function isPrime(num){//判断质数的算法

 var result = false;

 for(vari=2; i<num; i++){

 if(num%i===0){

 break;

         }

     }

 if(i===num){

         result = true;  //是质数

     }

 return result;

 }

fanfan.js

2.在使用js文件的HTML页面中调用js文件

①创建一个web worker线程

var w=new Worker(url);

②传递数据给worker

w.postMessage(data);

③接受worker返回的数据

w.onmessage=function(e){

console.log(e.data);

}

④释放web worker占用的资源

w.terminate();

　　　　完整代码：　

 <!DOCTYPE html>

 <html>

 <head lang="en">

 <meta charset="UTF-8">

 <title></title>

 <style>

 div{

 border:1px solid #ccc;

 width: 100px;

 height: 100px;

         }

 </style>

 </head>

 <body>

 <h3>判断质数</h3>

 <input type="text" id="num"/><button id="btn">开始判断</button>

 <div id="r"></div>

 <script>

 btn.onclick=function() {//btn监听事件

 var n=num.value;

 var w = new Worker('worker.js');//实例化一个worker对象

 w.postMessage(n);//向worker发送数据

 w.onmessage=function(e){//获取worker返回的数据

 r.innerHTML= e.data;

             }

         }

 </script>

 </body>

 </html>

index.html

以上事例结果为在html页面输入一个值，然后再worker中判断是否为质数，然后把结果打印在页面上的过程

注意事项：

本地运行index.html文件，在chrome中出现错误（chrome不支持），但是在firefox运行正确。

在web服务器环境下chrome就可以正常运行了。

web worker的跨域访问限制

在index.html中new worker(url)来创建work对象，加载的js文件不能跨域！

局限性：在web worker的js中无法访问index.html中的DOM等，很大局限。所以看情况使用。

HTML5新增的一些属性和功能之八——web Worker的更多相关文章

  1. HTML5新增的一些属性和功能之一

    大致可以分为10个方面: HTML5表单元素和属性 表单2.0 视音频处理 canvas绘图 SVG绘图 地理定位 拖放技术 web work web storage web socket 一.新的i ...

  2. HTML5新增的一些属性和功能之六——拖拽事件

    拖放事件的前提是分为源对象和目标对象,你鼠标拖着的是源对象,你要放置的位置是目标对象,区分这两个对象是因为HTML5的拖放事件对两者是不同的. 被拖动的源对象可以触发的事件: 1).ondragsta ...

  3. HTML5新增的form属性简介——张鑫旭

    一.引言 HTML5中新增了一个名为form的属性,是一个与处理表单相关的元素. 在HTML4或XHTML中,我们要提交一个表单,必须把相关的控件元素都放在<form>元素下.因为表单提交 ...

  4. HTML5新增标签与属性

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  5. HTML5新增的表单验证功能

    一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...

  6. html5新增及废除属性

    html5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 一.新增属性 1.表单属性 a.autofocus 对input[所有类型].select.textarea与button指定au ...

  7. HTML5新增input标签属性

    一. input type属性 <form action=""> 邮箱<input type="email" name="" ...

  8. 初学HTML5系列二：HTML5新增的事件属性

    Window事件属性: 属性 值 描述 onafterprint  script 文档打印之后运行的脚本. 属性发生于用户设置页面打印并且打印对话框已出现之后. onbeforeprint  scri ...

  9. 第十课html5 新增标签及属性 html5学习5

    一.常用新增标签 1.header:定义页面的页眉头部 2.nav:定义导航栏 3.footer:定义页面底部,页脚 4.article:定义文章 5.section:定义区域 6.aside:定义侧 ...

随机推荐

  1. 全文搜索-介绍-elasticsearch-definitive-guide翻译

    全文搜索 我们通过前文的简单样例,已经了解了结构化数据的条件搜索:如今.让我们来了解全文搜索-- 如何通过匹配全部域的文本找到最相关的文章. 关于全文搜索有两个最重要的方面: 相似度计算 通过TF/I ...

  2. cocos2dx--cocos2dx3.1.1执行报无法解析的外部符号

    使用cocos2dx3.1.1和VS2012 新建了一个名为test的工程.放在D:\cocos2dx\cocos2d-x-3.1.1\projects下 编译通过,没问题 用cocostudio的场 ...

  3. Mapreduce运行过程分析(基于Hadoop2.4)——(一)

    1 概述 该瞅瞅MapReduce的内部执行原理了,曾经仅仅知道个皮毛,再不搞搞,不然怎么死的都不晓得.下文会以2.4版本号中的WordCount这个经典样例作为分析的切入点.一步步来看里面究竟是个什 ...

  4. coco2d-html5制作弹弓射鸟第一部分---橡皮筋

    一.写在前面的话 最近在学习cocos2d-html5方面的知识,一直想从事游戏方面的工作,自己也找了好多资料.网上关于cocos2d-html5的教程真的不多,也只有自己摸索,慢慢看示例代码.由于本 ...

  5. （转）反射发送实战（－）InvokeMember

    反射是.net中的高级功能之一,利用反射可以实现许多以前看来匪夷所思的功能,下面是我看了<Programming C#>(O'Reilly)之后对于反射的一点实践,本想直接做个应用程序来说 ...

  6. (转) C# Activator.CreateInstance()方法使用

    C#在类工厂中动态创建类的实例,所使用的方法为: 1. Activator.CreateInstance (Type) 2. Activator.CreateInstance (Type, Objec ...

  7. Asp.Net--回调技术

    实现回调技术需要以下步骤: 1.实现ICallbakEventHandler 2.实现接口中的方法:RaiseCallbackEvent 3.实现GetCallbackResult 方法 解释 参数 ...

  8. java 修改文件名

    // 修改文件名 public static boolean modifyFileName(String serverPath, String oldFileName, String newLogin ...

  9. 常用mysql笔记

    1.insert into ... values insert into tables (col1,col2) values (1,2),(2,3); 2.insert into ... select ...

  10. 在同个类中non-const插入const来减少重复

    class A { private: std::string a; public: A(std::string b) :a(b){} const char& operator[](int b) ...