C#163课的主要内容

今天主要学习了一下知识点：

html Web Workers

  Web worker是运行在后台的JavaScript,不会影响页面的性能。

什么是Web Worker?

当在HTML页面中执行脚本时，页面是不可相应的，直到脚本以完成。

 Web worker是运行在后台的JavaScript，独立于其他脚本不会影响页面的性能，你可以继续做任何愿意做的事情：点击，选取内容等等，而此时web worker 运行在后台。

 浏览器支持

表格中的数字指示完全支持Web Worker的首个浏览器版本。

HTMLWeb Workers实例

 下面的例子创建了一个简单的Web worker, 在后台计数：

计数：

 检测Web Worker支持

在创建web worker之前，请检测用户浏览器是否支持它：

创建WebWorker文件

现在，让我们在一个外部JavaScript文件中创建我们的web worker.

在此处，我们创建了计数脚本，该脚本存储于”demo_workers.js“文件中：

 以上代码中重要的部分是postMessage()方法-它用于向HTML页面传回一段消息。

注释：web worker通常不用于如此简单的脚本，而是用于更耗费cpu资源的任务。

创建Web Worker对象

 现在我们已经有了web worker文件，我们需要从HTML页面调用它。

下面的代码行检测是否存在worker，如果不存在，他会创建一个新的web worker对象，然后运行”demo_workers,js“中的代码：

然后我们就可以从web worker 发生和接受消息了。

向web worker添加一个”onmessage“事件监听器：

 当web worker传送消息时，会执行事件监听器中的代码。来自web worker的数据会存储于event，data中。

  终止Web Worker

当创建Web worker后，它会继续监听消息直到其被终止为止。

如需终止web worker,并释放浏览器/计算机资源，请使用terminate()方法：

复用Web Worker

如果你把worker变量设置为undefined,在其被终止后，可以重复使用该代码

完整的Web Worker实例代码

我们已经看到了。js文件中的worker代码，下面是HTML页面的代码;

Web Worker 和DOM

由于web worker 位于外部文件中，他们无法访问下例JavaScript对象：

window对象

document对象

 parent对象