05月09, 2018

震惊!JS可以多线程执行!

地球前端都知道,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);

本文链接:http://guchongxi.com/post/web-worker.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。