HTML5 Web Worker的介绍（附示例）-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于HTML5 Web Worker的介绍（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

浏览器中的Web Worker

背景介绍

我们都知道JavaScript这个语言在执行的时候是采用单线程进行执行的，也就是说在同一时间只能做一件事，这也和这门语言有很大的关系，采用同步执行的方式进行运行，如果出现阻塞，那么后面的代码将不会执行，HTML5则提出了web Worker标准，表示JavaScript允许有多个线程，但是子线程完全受主线程的控制，子线程不能操作DOM，只有主线程可以操作DOM，所以以主线程为主的单线程执行原理成了JavaScript这门语言的核心。

进程与线程的区别

根本区别：进程是操作系统资源分配的基本单位，而线程是任务调度和执行的基本单位。
在操作系统中能同时运行多个进程（程序）；而在同一个进程（程序）中有多个线程同时执行。

兼容性

web worker是什么？

简单来说，其实就是在Javascript单线程执行的基础上，开启一个子线程，进行程序处理，而不影响主线程的执行，当子线程执行完毕之后再回到主线程上，在这个过程中并不影响主线程的执行过程。

举个栗子

传统情况下，执行下面的代码后，整个页面都会被冻结，由于javascript是单线程处理，如下代码已经完全组塞了后续的执行

1	`while(1){}`

如果换一种方式，我们通过开启一个新的线程来执行这段代码，将他放在一个单独的worker.js文件中,在主线程执行以下代码，则可以避免这种情况。

1	`var` `worker =` `new` `Worker("worker.js")`

Web Worker的用法

判断当前浏览器是否支持web worker

if (typeof (Worker) != "undefined") { //浏览器支持web worker  
    if (typeof (w) == "undefined") { //w是未定义的,还没有开始计数        
        w = new Worker("webworker.js"); //创建一个Worker对象,利用Worker的构造函数  
    }
    //onmessage是Worker对象的properties  
    w.onmessage = function (event) { //事件处理函数,用来处理后端的web worker传递过来的消息  
        // do something
    };
} 
else { // 浏览器不支持web worker
    // do something
}