HTML5规范之Web Worker入门

最新推荐文章于 2024-08-14 11:11:22 发布

aitangyong

最新推荐文章于 2024-08-14 11:11:22 发布

阅读量8.9k

点赞数 4

分类专栏： HTML5 文章标签： web worker入门 postMessage onMessage javascript多线程

本文链接：https://blog.csdn.net/aitangyong/article/details/49445307

版权

本文介绍了HTML5的Web Worker特性，包括Web Worker的定义、如何检测浏览器支持、创建Worker文件和对象、运行Web Worker页面、处理跨域限制、异常及终止，以及使用importScripts和Blob URL的应用。通过学习，可以掌握在JavaScript中实现多线程的基本方法。

摘要由CSDN通过智能技术生成

1.什么是Web Worker?

在web worker规范产生之前，dom渲染和javascript代码执行是在同一个浏览器线程中执行的。也就是说：渲染dom的时候不能执行javascript代码，执行javascript代码的时候，UI界面会暂停响应。如果javascript代码执行时间很长，那么UI就会无响应，这就是所谓的页面卡死。Web Workers是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些耗时的javascript代码交由web Worker运行而不冻结用户界面。也就是说web worker和UI界面是运行在不同线程中的。

2.检测浏览器对Web Worker支持

web worker是HTML5中新增的特性，一般的主流浏览器都是支持的，但不是所有的浏览器都支持。我用的是chrome 46，是支持web worker的。我们可以使用下面这段代码，来检测浏览器是否支持web worker。

if(typeof(window.Worker)!=="undefined")
{
	// Yes! Web worker support!
}
else
{
	// Sorry! No Web Worker support..
}

3.创建web worker文件

web worker一般是存放在一个单独的js文件中，由使用它的html页面来加载。

//my_worker.js

//这里this并不是传统意义上的window对象,而是一个WorkGlobalScope对象
var self = this;


// worker入口,类似于Thread的run方法
self.onmessage = function(evt){
	
	// 接收传递过来的参数
	var millSeconds = evt.data;
	
	wait(millSeconds);
	
	console.log("work time is: " + new Date());
	
	// 返回数据给调用者
	postMessage("from worker's message.");
}


function wait(millSeconds)
{
	var begin = new Date().getTime();
	var end = new Date().getTime();
	while(end - begin < millSeconds)
	{
		end = new Date().getTime();
	}
}

worker新线程使用通过postMessage和onmessage方法：