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实现完美洗牌算法
1 问题描述有一个长度为2n的数组{a1,a2,a3,-,an,b1,b2,b3,-,bn},希望排序后变成{a1,b1,a2,b2,a3,b3,-,an,bn},请考虑有没有时间复杂度为O(n)而 ...
数据的存储结构浅析LSM-Tree和B-tree
目录顺序存储与哈希索引 SSTable和LSM tree B-Tree 存储结构的比对小结本篇主要讨论的是不同存储结构(主要是LSM-tree和B-tree),它们应对的不同场景,所采用的底层存 ...
如何拿到阿里P8 Offer-候选人视角谈面试
自我介绍首先简单自我介绍一下,我叫陈映平,花名叫做小卡,2011年校招进入腾讯,是腾讯课堂B侧的前端技术负责人.2015年响应总理的号召,跟朋友一起出来创业,跟前面一位讲师的经历有点像,然后2018 ...
System.PlatformNotSupportedException:“Operation is not supported on this platform.”
vs2019创建.net core3.1 的控制台应用程序执行以下代码: using System; using System.Diagnostics; using System.Threading ...
android在service中stopself遇到的问题
在service的oncreate中直接调用stopservice停止自己,依然会执行onstartcommand方法后,最后才调用ondestory方法
C# ASP.NET递归循环生成嵌套json结构树
1. 建立用来保存树结构数据的目标对象 public class TreeObject { public string name { get; set; } public string value { ...
使用 UniApp 实现小程序的微信登录
微信登录思路: 在main.js 中封装公共函数,用于判断用户是否登录在main.js 中分定义全局变量,用于存储接口地址如果没有登录.则跳转至登录页面进入登录页面通过 wx.login 获取 ...
如何解决flutter中gradle慢的问题
初学flutter的时候,flutter run运行到有gradle的时候就停住不动了,研究后解决方法如下: 打开项目目录中的 ...\myapp\android\gradle\wrapper\gr ...
spring源码解读-aop
aop是指面向切面编程,ProxyFactoryBean是spring aop的底层实现与源头,为什么这么说呢?首先我们看一段配置: 1.target是目标对象,需要对其进行切面增强 2.proxyI ...
Js中Array 函数使用方法
遇到数组有关操作,脑子第一反应不要再是嵌套 for 循环了,Array 类型提供了一些遍历有关的函数. Array.prototype.forEach() : 把数组每个元素丢到一个处理 functi ...

HTML5（八）Web Workers