作用

如果在浏览器需要运行耗时的 js 程序

现象

js 执行的过程中，按钮 1 可见，按钮 2 在按钮 1 显示后可见

原因

浏览器执行 js 和渲染页面的一个线程

解决

方案一

将所有 js 程序执行放在 body 最后一个元素上

方案二

创建新的线程，由他来执行耗时的 js 任务，UI 主线程执行后续的 HTML 渲染

<button>1</button>
<script>
	var w = new Worker('1.js')
</script>
<button>2</button>

				

					
				
				

					
				
				

					
				
				

					
				
			

---

WebWorker — 缺陷

• 浏览器不允许 Worker 线程操作 DOM 和 BOM 对象

原因

• 浏览器只允许 UI 主线程操作 DOM&BOM, 若多个 Worker 线程同时操作 DOM 结构，页面将混乱

解决方案

• Worker 线程可以给 UI 主线发数据
  • worker 线程 (发送)
    • postMessage(stringMsg)
  • UI 主线程 (接收)

var wvar w6 = new Worker("1.js")
w6.onmesssage = function(e){e.data}

				

					
				
				

					
				
				

					
				
				

					
				
			

UI 线程可以给 Worker 主线发送数据

• UI 主线程 (发送)

var w6 = new Worker("1.js")
w6.postMessage(stringMsg)

				

					
				
				

					
				
				

					
				
				

					
				
			

Worker 线程 (接收)

onmessage = function(e){e.data}