地球前端都知道,Javascript是运行在单线程环境中,也就是说同时只能干一件事。现在,用户在你的计算器网站输入一串巨复杂的表达书并点击了“=”号,此时在计算代码执行完毕之前,用户操作其他操作将是无法响应的。但是,如果将这段代码交给Web Worker去运行的话,那就不一样了:浏览器会再招一个苦力(worker)来帮你计算,因此,页面在计算期间依然可以响应用户的其他操作。
Web Worker?
Web Worker 是HTML5标准的一部分,这一规范定义了一套 API,它允许一段JavaScript程序运行在主线程之外的另外一个线程中。
Web Worker 规范中定义了两类工作线程,分别是专用线程Dedicated Worker和共享线程 Shared Worker,其中,Dedicated Worker只能为一个页面所使用,而Shared Worker则可以被多个页面所共享(须遵循同源策略)。
牛刀小试
一般操作
var worker = new Worker("test.js");
worker.onmessage = function(msg) {
console.log(msg); // 1,2,3,4....
}
// test.js
var i = 0;
function counter(){
i++;
postMessage(i);
setTimeout(counter, 1000);
}
timedCount();
骚操作
一般情况下,我们需要一个实体文件来创建worker,但通过URL.createObjectURL()创建URL对象,可以实现创建内嵌的worker
var myTask = `
onmessage = function (e) {
var data = e.data;
data.push('hello');
console.log('worker:', data); // worker: [1, 2, 3, "hello"]
postMessage(data);
};
`;
var blob = new Blob([myTask]);
var myWorker = new Worker(window.URL.createObjectURL(blob));
myWorker.onmessage = function (e) {
var data = e.data;
console.log('page:', data); // page: [1, 2, 3, "hello"]
console.log('arr:', arr); // arr: [1, 2, 3]
};
var arr = [1,2,3];
myWorker.postMessage(arr);
Comments
注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。