引子:(JS单线程)

什么是webworker?
Web Worker为Web应用程序提供了一种能在后台中运行的方法。通过Web Worker可以生成多个线程同时运行,并保证页面对用户的及时响应,完全不会影响用户的正常操作。

单线程:单线程在程序执行时,所走的程序路径按照连续顺序排下来,前面的必须处理好,后面的才会执行。简单的说就是处理事务的任务链,当只有一条链,所有的事情都在这一条链上执行时,那就是单线程。

优点:单线程较多线程来说,系统稳定、扩展性极强、软件丰富。

缺点:只有一个线程,代码顺序执行,容易出现代码阻塞(页面假死)。

多线程:为Js 提供了多线程处理能力,一些复杂、数据量大的处理时可以让别的线程去处理,处理的同时不影响主线程的执行(简称异步),从而让页面运行更加流畅而且不失效果。

Web Worker说明:

Web主线程:
1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker,同时返回一个worker实例。
  url: 需要异步处理的js文件路径
2.通过 worker.postMessage( data ) 方法来向worker发送数据。
  data: 要发送的数据
3.绑定 worker.onmessage(value)方法来接收worker发送过来的数据。
  value: postMessage发送过来的数据
4.可以使用 worker.terminate() 来终止一个worker的执行。 worker子线程:
1.通过postMessage( data ) 方法来向主线程发送数据。
2.绑定onmessage方法来接收主线程发送过来的数据。

  

代码如下:

1)创建一个Worker:

通常,与web worker相关的代码都放在一个独立的JavaScript文件中。父线程通过在Worker构造函数中指定一个JavaScript文件的链接来创建一个新的worker,它会异步加载并执行这个JavaScript文件。

// var worker = new Worker(子线程路径);
// console.log(worker); //对象 身上有很多数据 let worker = new Worker('worker.js'); //创建
worker.postMessage('我是要传递的数据'); //postMessage方法向worker发送数据。

2)编写子线程 worker.js:

this.onmessage = function(ev){
console.log(ev.data); // html页面打印出我是要传递的数据 注:子线程没有alert
};

注意:

1.子线程进行计算,不能进行 DOM BOM操作
2.子线程不能跨域,文件需放在同路径中
3.子线程不能套子线程
4.子线程 不和主线程共享数据,而是复制一份儿 哪怕是对象

子线程可以直接输入运算:

//主线程 html页面
let worker = new Worker('worker1.js');
worker.postMessage(5);
//子线程 worker1.js
this.onmessage = function(ev){
console.log(ev.data+5); // 10
};

可以利用子线程为我们做一些计算:

let worker = new Worker('worker2.js');
worker.postMessage(10); //向子线程发送数据
worker.onmessage = function(ev){ //接收字线程发送过来的数据
console.log(ev.data); //
};
//子线程 worker2.js
this.onmessage = function(ev){ //接收主线程发送过来的数据
this.postMessage(ev.data+5); //向主线程发送数据
};

以上就是介绍js开启多线程方法了。

详情直戳官方介绍 HTML5 Web Worker http://www.w3school.com.cn/html5/html_5_webworkers.asp

  

  

HTML5新特性 Web Workers 实现多线程的更多相关文章

  1. HTML5新特性--svg-echarts(重点)-拖动API-WebWorker

    一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " s ...

  2. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  3. 前端进阶系列(三):HTML5新特性

    HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...

  4. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  5. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  6. HTML5新特性:范围样式

    原文出处:http://blog.csdn.net/hfahe/article/details/7381141        Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...

  7. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  8. HTML5新特性 websocket(重点)--多对多聊天室

    一.html5新特性  websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...

  9. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

随机推荐

  1. UVA12558 埃及分数

    #include<iostream> #include<cstdio> #include<set> #include<memory.h> using n ...

  2. Java只给汉字转URLEncoder

    public static String encode(String str, String charset) throws UnsupportedEncodingException { Patter ...

  3. ECMAScript6语法重点(一)

    一. let和const ①let声明的变量只在它的块作用域有效({ }括起来) ②let不能重复声明同一变量 ③const声明的常量不能改(但对象可以加属性) ④const也有块作用域概念 ⑤con ...

  4. unity 截图 压缩 处理

    /****************************************************** unity屏幕截图,并转换成Base64码* 作者: lyb* 日期:2017年7月25 ...

  5. ZJOI-2017 R1游记

    无实力非既得利益的$xrdog$作为一名外卡选手去参加ZJOI2017啦... Day 0: 颓?(细节待填坑..) Day 1: 上午我来到讲课现场发现讲课内容是:搜索专题  QwQ不太清醒的我一下 ...

  6. conda-使用手册

    conda remove -n tf --all ##删除环境 conda env export -- name ##首先导出配置文件: conda env create -f name.yml ## ...

  7. Axure 第一次交互 实现跳转页面

  8. 修改TP5中common模块默认不能使用问题

    在TP5框架中common模块是一个特殊的模块,默认是禁止直接访问的,一般用于放置一些公共的类库用于其他模块的继承.其实是可以访问common模块的, 只需要把convention.php文件中的 / ...

  9. centos7:mysql-5.7.23安装(二进制安装)

    mysql有二进制码安装,和源码编译安装(mysql5.5使用cmake安装,mysql5.7需要安装boost依赖安装),因为boost依赖安装麻烦,所以用二进制码安装 MySql 5.7.23安装 ...

  10. eclipse---->自己常用的快捷键

    organize imports----> ctrl+shift+o  导入其他工程的类(在学习springboot的注解@EnableAutoConfiguration时用到) 关闭当前窗口的 ...