HTML5——webworker

概念

程序：指可以被CPU执行的代码，程序存储在磁盘上 a.html b.js

进程：将程序调入内存中，并且分配指定空间，在内存中的程序称为进程

线程：进程内部是由多个线程组成（在内存中）

chrome浏览器

一个chrome浏览器进程中内部至少6个线程负责向服务器发送请求去获取资源【这种线程叫做：资源(网页、图片、视频)请求线程】

一个线程负责绘制所有资源并且执行js程序——ui主线程

案例：单线程阻塞

<button>按钮1</button>

<script src="js/a1.js">

</script>

<button>按钮2</button>

a1.js

var start = new Date().getTime()
do{
 var end = new Date().getTime()
}while(end - start < 5000)

如果js执行的时间特别长，按钮2就会渲染的很慢

解决方案：创建新线程帮助ui主线程执行耗时的js任务

<button>按钮1</button>

<script >
//Worker不能在本地文件中运行
var w = new Worker("js/1.js")  //new Worker("js文件路径")

</script>

<button>按钮2</button>

案例： work线程和ui线程互相传递数据【注意：worker中不能操作dom和bom，所以才需要互相传递】

• 操作网页中DOM/BOM只能交给UI主线程
• 其他线程不能操作DOM/BOM 担心混乱

①、 ui线程发送，Worker接收

<button>按钮1</button>

<script>
//Worker不能在本地文件中运行
var w = new Worker("js/a1.js");  //new Worker("js文件路径")
w.postMessage('1212')
</script>

<button>按钮2</button>

 a1.js:

onmessage = function(event){console.log(event.data)}

②、Worker发送，ui线程接收

<button>按钮1</button>

<script>
//Worker不能在本地文件中运行
var w = new Worker("js/a1.js");  //new Worker("js文件路径")
w.onmessage = function(event){console.log(event.data)}
</script>

<button>按钮2</button>

 a1.js:

postMessage("阿克苏")