本文共 1176 字，大约阅读时间需要 3 分钟。

版权声明

• 本文原创作者：
• 作者博客地址：
• 本文视频教程：

开篇

在设计之初JavaScript出于界面元素访问安全的考虑将JavaScript代码放置在单线程执行。这么做虽然是安全了不少，但是这也意味着我们应尽量避免在JavaScript中执行耗时较长的操作，比如：大量for循环、加载过多js文件、I/O、密集型计算；因为这么做很容易阻塞主线程导致主线程无法再响应其它操，极端情况下甚至造成页面一片空白。

为了解决刚提到的问题，在HTML5中新增了Web Worker

Web Worker简介

Web Worker用于将耗时的任务交给子线程去做从而避免主线程的阻塞。Worker用法非常简单和方便，只需要利用JavaScript脚本的url创建Worker对象，浏览器就会启动一个子线程去执行这段JavaScript脚本。但是，请注意：在子线程中执行的JavaScript脚本不能无法访问window或者document对象。说白了：在子线程中执行的JavaScript脚本不能更改UI。故，Worker提供了postMessage(data)和onmessage来实现子线程和主线程之间的数据交互。嗯哼，说到这里，做Android开发的童鞋可能就会喊出来了：这不和Android里面的Handler一样嘛！！！是的，原理非常类似，我之前也写过一篇，有兴趣的小伙伴可翻开瞅瞅。

Web Worker示例

在这我们来看一个关于Web Worker的小demo

代码解析如下：

• 利用外部js文件的路径构造Worker，请参见代码第9行。
• 利用Worker的onmessage( )处理子线程传递过来的数据，请参见代码第10-13行
• 在onmessage( )更改UI，请参见代码第12行

再来瞅瞅，外部文件中的js代码：

for(var i=0;i<100000;i++){   //模拟耗时任务}var message="finish";postMessage(message);

嗯哼，在此利用for循环模拟了耗时任务。待任务执行完毕后，利用postMessage( )将结果数据传给主线程显示。好了，没啥可再多说的了，直接运行，效果如下图所示：

啥玩意呀，啥东西都没有显示，赶紧打开开发者工具瞅瞅，请参见下图：

谷歌浏览器报了一个错误：

Uncaught DOMException: Failed to construct ‘Worker’: Script at ‘…’ cannot be accessed from origin ‘null’.

这是因为该页面没有部署至服务器，所以谷歌浏览器报错。在这儿，我们就没有功夫再去折腾服务端了。不过也没事儿，我们换IE浏览器试试，运行后效果如下图所示：

OK，搞定！

转载地址：https://it9527.blog.csdn.net/article/details/78544894 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！