Web Worker简单工作原理

JavaScript是单线程的。因此，持续时间较长的计算会阻塞UI线程，HTML5 Web Workers可以让Web应用程序具备后台处理能力。

Web Workers的限制：

    Web Workers不能访问window.document。即不能直接访问Web页面和DOM API。

用途：

1. 执行一些后台数据处理
2. 监听由后台服务器广播的新闻信息，收到后台服务器的消息后，将其显示在Web页面上。

用到的数据：

self对象： 指向全局worker对象

importScripts() 用来加载Worker所用到的外部JavaScript文件

close()方法 立即停止Worker运行

使用案例：解析一个很大的JSON字符串，假设数据量很大，至少需要500ms才能解析完成。很明显时间太长，超出了客户端允许JS运行的时间，因此会干扰用户体验。而此任务很难分解成若干个使用定时器的小任务，因此Worker成为最理想的解决方案。

页面JS脚本：

//处理worker传过来的信息
function messageHandler(e) {
    //在控制台输出数据
    console.log(e.data);
}
function errorHandler(e) {
    console.warn(e.message, e);
}
//终止worker运行
function stopWorker() {
    worker.terminate();
}
function loadDome() {
    //检查是否存在Woker对象
    if(typeof Worker === 'undefined') {
        document.getElementById('support').innerHTML = 'no support web worker';
    }else {
        worker = new Worker('worker.js');
        worker.addEventListener('message', messageHandler, false);
        worker.addEventListener('error', errorHandler, false);
        
        //为post按钮添加事件
        document.getElementById('post').onclick = function() {
            worker.postMessage('Here is a message for you');
        }
        document.getElementById('stop').onclick = stopWorker;
    }
}
window.addEventListener('load', loadDome, false);
worker.js文件：
function messageHandler(e) {
    postMessage("Worker say: "+e.data+" too");
}
addEventListener('message', messageHandler, false);