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实现考察团组成
考察团组成某饭店招待国外考察团.按照标准,对领导是400元/人,随团职员200元/人,对司机50元/人. 考察团共36人,招待费结算为3600元,请问领导.职员.司机各几人. 答案是三个整数,用逗号 ...
java实现第六届蓝桥杯机器人数目
机器人数目少年宫新近邮购了小机器人配件,共有3类,其中, A类含有:8个轮子,1个传感器 B类含有: 6个轮子,3个传感器 C类含有:4个轮子,4个传感器他们一共订购了100套机器人,收到了轮子6 ...
云服务器部署Web项目
接着上一篇整好MySQL数据库了,部署Web项目的重要一步就完成了,接下来就是整Tomcat发布项目了,这个博主用的是宝塔面板,所以,也很简单,直接在宝塔面板软件商店选择对应的Tomcat版本安装就行 ...
温故知新-多线程-深入刨析CAS
文章目录摘要 CAS是什么? CAS是如何实现的? CAS存在的问题? 你的鼓励也是我创作的动力 Posted by 微博@Yangsc_o 原创文章,版权声明:自由转载-非商用-非衍生-保持署名 ...
对Activity启动模式的理解
对Activity启动模式的理解应用场景在已打开多个Activity应用B的前提下,应用A调用应用B后点击返回按钮,需要直接返回到A应用,而不是打开B应用的上一个Activity 一个Task可以 ...
【Flutter实战】移动技术发展史
老孟导读:大家好,这是[Flutter实战]系列文章的第一篇,这并不是一篇Flutter技术文章,而是介绍智能手机操作系统.跨平台技术的演进以及我对各种跨平台技术看法的文章. 智能手机操作系统塞班( ...
vue踩过的坑（'url' is assigned a value but never used no-unused-vars）
1.代码编写 2.遇见错误 3.解决方案在错误代码后加入注释:(// eslint-disable-line no-unused-vars) 之后页面上就不会出现该错误信息了
@codeforces - 506C@ Mr. Kitayuta vs. Bamboos
目录 @description@ @solution@ @accepted code@ @details@ @description@ n 个竹子,第 i 个竹子初始高度 hi,在每天结束时将长高 a ...
@codeforces - 575E@ Spectator Riots
目录 @description@ @solution@ @accepted code@ @details@ @description@ 一个以 (0, 0) 为左下角,(10^5, 10^5) 为右上 ...
Clumsy Keke【模拟+三维数组】
Clumsy Keke 题目链接(点击) Problem Description Keke is currently studying engineering drawing courses, and ...

HTML5（八）Web Workers