HTML 5 Web Workers

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

什么是 Web Worker？

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。

您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

想了解更多可以学习JavaScript同步异步的运行机制。

检测 Web Worker 支持

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

if (typeof (Worker) !== "undefined") {

	console.log('支持Web worker 功能')

}

else {

	console.log('Sorry')

}

创建 web worker 文件

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

在这里，我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中：

demo_workers.js源码：

var i=0;

function timedCount()

{

    i=i+1;

    postMessage(i);

    setTimeout("timedCount()",500);

}

timedCount();

postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

web worker 通常用于更耗费 CPU 资源的任务。

Web Worker 实例代码

<!DOCTYPE html>

<html>

<body>

    <p>Count numbers: <output id="result"></output></p>

    <button onclick="startWorker()">Start Worker</button>

    <button onclick="stopWorker()">Stop Worker</button>

    <br /><br />

    <script>

        var w;

        function startWorker() {

            if (typeof (Worker) !== "undefined") {

                if (typeof (w) == "undefined") {

                    w = new Worker("demo_workers.js");//同一目录下

                }

                w.onmessage = function (event) {

                    document.getElementById("result").innerHTML = event.data;

                };

            }

            else {

                document.getElementById("result").innerHTML = "Sorry";

            }

        }

        function stopWorker() {

            w.terminate();

        }

    </script>

</body>

</html>

效果截图

遇到问题

谷歌和火狐浏览器出现

谷歌抛出异常cannot be accessed from origin 'null'. 无法从原点“null”访问

查找了一些资料原因大概就是谷歌浏览器安全机制导致的，不允许在本地直接运行，它会当作跨域访问了。

换IE浏览器就可以。

Web Workers 和 DOM

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

window 对象
document 对象
parent 对象

HTML5（八）Web Workers的更多相关文章

【HTML5】Web Workers
什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性 ...
Html5之web workers多线程
Web Workers 是 HTML5 提供的一个javascript多线程解决方式,我们能够将一些大计算量的代码交由web Worker执行而不冻结用户界面. 1.首先看一个实例: 1)js文件(t ...
html5 Web Workers
虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...
HTML5学习(十)---Web Workers
参考教程:http://www.w3school.com.cn/html5/html_5_webworkers.asp web worker 是运行在后台的 JavaScript,不会影响页面的性能. ...
html5 Web Workers.RP
虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...
HTML5中的Web Workers
https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...
HTML5: HTML5 Web Workers
ylbtech-HTML5: HTML5 Web Workers 1.返回顶部 1. HTML5 Web Workers web worker 是运行在后台的 JavaScript,不会影响页面的性能 ...
HTML5 Web Workers来加速您的移动Web应用
一直以来,Web 应用程序被局限在一个单线程世界中.这的确限制了开发人员在他们的代码中的作为,因为任何太复杂的东西都存在冻结应用程序 UI 的风险.通过将多线程引入 Web 应用程… 在本文中,您将使 ...
HTML5——web存储 Web SQL 数据库应用程序缓存 Web Workers 服务器发送事件 WebSocket
web存储比cookie更好的本地存储方式 localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. sessionStorage - 用于临时保存同一窗口( ...

随机推荐

java实现滑动解锁
滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图案.方向上都一致 ...
Jenkins job docker 没有权限
问题描述基于docker使用jenkins 构建cicd,在执行docker build 的时候出现了权限的问题.具体报错如下 + REPOSITORY=10.0.0.100/library/wen ...
nacos部署注意点
官方Naming Configuration Service https://nacos.io/zh-cn/docs/deployment.html 划重点单机部署单机部署默认嵌入式存储数据支持 ...
2019-02-05 Linux的一些常用命令学习2
黑马程序员python课的笔记 ls -l 显示文件详细信息 ls -l -h 以k形式显示大小 ls -a 显示指定目录下的所有子目录和文件,包括隐藏文件 ls匹配符 *代表任意个数的字符 ?代表任 ...
Mysq数据库索引（B-Tree索引）
一.B-Tree索引的底层结构所有的值都是按顺序存储的,并且每一个叶子页到根的距离相同,如图所示,B-Tree索引的底层数据结构一般是B+树,反应了MyISAM索引是如何工作的. 二.B-T ...
java中int和Integer的区别？为什么有了int还要有设计Integer？
参考https://blog.csdn.net/chenliguan/article/details/53888018 https://blog.csdn.net/myme95/article/det ...
jenkins构建报错 Error fetching remote repo 'origin'
ERROR: Error fetching remote repo 'origin' Finished: FAILURE // 原因如下原因一:可能是配置的git分支的权限问题,检查一下配置里面的源 ...
Java字符串类型详解
Java 字符串类主要有String.StringBuffer.StringBuilder.StringTokenizer 1.字符串类型底层都是使用char数组进行实现. 2.从jdk1.7以后,S ...
下订单更新订单表然后减少库存表中的数据，出现库存超卖，使用数据库和redis坚决库存超卖的问题
上面的代码更新库存的数据,存在多线程的问题,第一种方法使用synchronized关键字修饰的语句块代码,但是性能较低,并且还是存在问题的在分布式的场景下,当前库存系统部署在多个tomcat上,即使 ...
JavaWeb开发之四：servlet技术黑马程序员_轻松掌握JavaWeb开发之四Servlet开发方立勋老师视频教程相当的经典
总结: 记住:servlet对象在应用程序运行的过程中只创建一次,浏览器每次访问的时候,创建reponse对象 request对象,然后调用servlet的service方法,reponse对象和re ...

HTML5（八）Web Workers