老生常谈h5新特性:WebWorker-原创手记-慕课网

WebWorker
HTML5新特性重要程度(10)
1.新的语义标签 10
2.表单2.0 7
3.视频和音频 8
4.Canvas绘图 9
5.SVG绘图 9
6.地理定位 1
7.拖放API 4
8.WebWorker 4
9.WebStorage 9
10.WebSocket 2

Chrome浏览器的线程模型是怎样的？

程序：计算机可以执行的代码，存在于磁盘中——静止的
进程：把程序调入到内存中，等待被CPU执行——活动的
线程：是CPU执行进程代码的基本单位——生产任务

面试题：进程和线程间的关系？
进程是操作系统分配内存的基本单位。
线程处于进程内部，是CPU执行代码的基本单位。
一个进程中至少有一个线程，也可以有多个。
多个线程间并发执行——宏观上看是“同时”执行，微观上看是“轮流”执行。

Chrome中的线程模型：

(1)Chrome中发起HTTP请求最多可以使用6个并发的线程；
(2)Chrome中负责向页面中执行绘制任务(执行HTML/CSS/JS/事件处理等代码)的只有1个线程——UI主线程。
碰到如下的代码，就有问题了：

  <button onclick="console.log(111)">1</button>
  <script src="耗时.js"></script>
  <button onclick="console.log(222)">2</button>

根本解决之道：
创建一个新的线程，去执行耗时的JS任务——与UI主线程并发执行。new Thread('x.js') —— 其它语言中的类似代码。

Web Worker

HTML5提供了一种类似创建新线程的机制：
new Worker('x.js'); //工人线程，与UI主线程并发执行

注意：Worker线程天然缺陷！！
浏览器禁止Worker线程操作任何的BOM和DOM对象！！！——浏览器只允许UI主线程进行页面内容的渲染！——不能使用Worker加载类似jquery.js文件！！项目中，必需用到Worker的场景不多，比如有非常复杂耗时的且与DOM无关的运算时。

UI主线程可以给Worker线程传递数据——发消息：
UI线程：
var w = new Worker('x.js');
w.postMessage('StringMsg');
Worker线程：
onmessage = function(e){ //e.data //UI主线程发来的消息数据 }
Worker线程可以给UI主线程传递数据——发消息：
UI主线程：
var w = new Worker('x.js');
w.onmessage = function(e){ //e.data //Worker线程发来的消息数据 }
Worker线程：
.....
postMessage('StringMsg');

总结：Worker本质是一个线程，在UI主线程之外并发执行的线程；用于执行耗时的JS任务；缺陷：不能操作BOM和DOM，只能和UI主线程发消息。

老生常谈h5新特性:WebWorker原创