HTML5新特性 Web Workers 实现多线程
引子:(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 实现多线程的更多相关文章
- HTML5新特性--svg-echarts(重点)-拖动API-WebWorker
一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " s ...
- web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
- 前端进阶系列(三):HTML5新特性
HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
- HTML5新特性:范围样式
原文出处:http://blog.csdn.net/hfahe/article/details/7381141 Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- HTML5新特性 websocket(重点)--多对多聊天室
一.html5新特性 websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...
- 转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
随机推荐
- UVA12558 埃及分数
#include<iostream> #include<cstdio> #include<set> #include<memory.h> using n ...
- Java只给汉字转URLEncoder
public static String encode(String str, String charset) throws UnsupportedEncodingException { Patter ...
- ECMAScript6语法重点(一)
一. let和const ①let声明的变量只在它的块作用域有效({ }括起来) ②let不能重复声明同一变量 ③const声明的常量不能改(但对象可以加属性) ④const也有块作用域概念 ⑤con ...
- unity 截图 压缩 处理
/****************************************************** unity屏幕截图,并转换成Base64码* 作者: lyb* 日期:2017年7月25 ...
- ZJOI-2017 R1游记
无实力非既得利益的$xrdog$作为一名外卡选手去参加ZJOI2017啦... Day 0: 颓?(细节待填坑..) Day 1: 上午我来到讲课现场发现讲课内容是:搜索专题 QwQ不太清醒的我一下 ...
- conda-使用手册
conda remove -n tf --all ##删除环境 conda env export -- name ##首先导出配置文件: conda env create -f name.yml ## ...
- Axure 第一次交互 实现跳转页面
- 修改TP5中common模块默认不能使用问题
在TP5框架中common模块是一个特殊的模块,默认是禁止直接访问的,一般用于放置一些公共的类库用于其他模块的继承.其实是可以访问common模块的, 只需要把convention.php文件中的 / ...
- centos7:mysql-5.7.23安装(二进制安装)
mysql有二进制码安装,和源码编译安装(mysql5.5使用cmake安装,mysql5.7需要安装boost依赖安装),因为boost依赖安装麻烦,所以用二进制码安装 MySql 5.7.23安装 ...
- eclipse---->自己常用的快捷键
organize imports----> ctrl+shift+o 导入其他工程的类(在学习springboot的注解@EnableAutoConfiguration时用到) 关闭当前窗口的 ...