HTML5 API --- Web Worker的高级用法

时间:2022-01-24 18:19:43

[本文属原创,如有转载,请注明出处http://blog.csdn.net/yl02520/article/]

Web Worker是HTML5引进的一个重要的API,它让一直受人诟病的单线程运行的JavaScript有了多线程的能力,有了Web Worker,开发者就可以把一些重量级耗时的计算任务单独放在另外一个线程中去运行,这样就可以让多个线程同时运行,最大限度的发挥CPU多核的功能。

Web Worker基本的用法如下:

var worker = new Worker(“background.js”);  // background.js文件是事先准备好的,里面的JavaScript文件运行在后台,一般为重量级或耗时的运算。那么假设开发者需要动态的执行一系列的JavaScript程序该怎么办呢?

下面介绍一下Web Worker的高级用法,如何在不事先创建JS文件的前提下,动态的指定JavaScript程序在Worker中运行?

我们可以创建一个Blob对象,并把JavaScript文本赋值给Blob对象,然后通过window.URL.creatObjectURL方法生成一个URL,最后根据该URL创建Worker对象,那么刚才的JavaScript文本就运行在Worker线程中。这样就完成了把任务动态的分配给Worker线程去执行,而不需要事先创建一个JavaScript文件。

实例代码如下:

<html>
<body>
<script id="worker" type="javascript/worker">
self.postMessage("Message from Web Worker.");
</script>
<script>
var worker_blob = new Blob([document.getElementById("worker").textContent]);
var worker = new Worker(window.URL.createObjectURL(worker_blob));
worker.onmessage = function(event) {
console.log("Received event: " + event.data);
};
</script>
</body>
</html>