HTML5 web workers[HTML5教程 - 第十四篇】

2019-03-18 10:01|来源: 未知

什么是web worker?

当在HTML页面中执行脚本的时候,页面将会没有任何反馈直到脚本结束运行。

web worker是一段javascript的脚本,将会在后台独立于其它脚本执行, 不影响页面的性能。你可以继续的执行你想执行的任何操作,点击,选择等等,而web worker将继续在后台执行,非常类似多进程的操作。


浏览器支持

iefirefoxchromeoperasafari

除了IE,Firefox,Chrome,Opera和Safari 5都支持这个特性。


HTML5 web workers演示

以下这个演示将创建一个简单的web worker应用,在后台计算数字:


在线演示


检查浏览器是否支持web worker

在使用web worker前,我们需要检查浏览器是否支持:

if(typeof(Worker)!=="undefined"){
  // Yes! Web worker support!
  // Some code.....
}else{
  // Sorry! No Web Worker support..
}

创建一个web worker文件

首先,我们这里创建一个外部的js文件。这个文件用来计算数字,保存在demo_worker.js文件中:

var i=0;
function timedCount(){
  i=i+1;
  postMessage(i);
  setTimeout("timedCount()",500);
}
timedCount();

以上代码中最重要的部分是postMessage()方法 - 用来发送一个消息到HTML页面。

注意:正常情况下web worker不用来执行这么简单的应用,主要执行更加密集复杂的CPU任务。

创建一个web worker对象

现在我们有了一个web worker文件,我们需要从HTML文件中调用。

下面代码检测是否web worker已经存在,如果没有,则创建一个新的web worker对象,并且调用demo_workers.js脚本。

if(typeof(w)=="undefined"){
  w=new Worker("demo_workers.js"); 
}

然后我们发送并且接收web worker的信息。

添加一个onmessage事件监听方法到web worker。

w.onmessage=function(event){
  document.getElementById("result").innerHTML=event.data;
};

当web worker发布一个消息,事件监听的代码就会被执行。web worker中的数据将会保存在event.data中。

终止一个web workers

当web worker创建后,我们将持续的监听消息(甚至是外部脚本结束),除非我们终止它。

为了终止一个web worker,并且释放资源,需要使用ternmiate()方法:

w.terminate();

完整的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, your browser does not 
                                    support Web Workers...";
            }
        }
        function stopWorker(){
            w.terminate();
        }
    </script>
</body>
</html>

web worker 和 DOM

因为web worker是外部文件,他们没有权限访问javascript的对象:

  • window对象

  • document对象

  • parent对象


本文链接:HTML5教程 - 第十四篇:HTML5 web workers,转自:http://www.gbin1.com/tutorials/html5-tutorial/html5-web-works/

相关问答

更多
  • HTML5是HTML标准的下一个版本 平时说的HTML应该是实现HTML4的版本 HTML5没有完全颠覆HTML4 做到完全兼容 相对于4 新加入了一些标签 比如 对某些标签添加了大量新的属性 HTML5和 CSS3.0都是 W3C最新的两个规范 没有 直接联系 但是为了做到最兼容新标准 这俩好基友会经常一起被提及 HTML5只是一种标准 可以用到所有用到html技术的地方 of course 可以用到WEB项目上 而且我觉得用到HTML5的项目都是很流行的项目
  • 嗯。 不.HTML5 Web套接字是客户端功能,这意味着您可以通过WebSocket对象将其与JavaScript代码一起使用。 因此,从您在ASP.NET WebForms / MVC项目中编写的客户端代码,您就可以使用它。 如果您尝试通过ASP.NET支持Web套接字协议, 那么可以使用非常新版本的ASP.NET 。 这是你想要做的吗? 你的问题有点模糊。 Uhm. No. HTML5 web sockets are a client-side feature, meaning you can use ...
  • 是的你可以。 这个Cordova插件可以做到这一点: https : //github.com/petermetz/cordova-plugin-ibeacon这不是最直接的工作,但在回购中有一个例子。 您还可以查看可以处理iBeacon功能的http://evothings.com/ 。 祝你好运,詹姆斯 Important note: The following answer was written with reference to the technologies the OP mentioned ...
  • 微软始终认为HTML5尚未完全完成。 然后,ASP.NET不能完全重写以遵循它。 有些道理,但... 你可以自己做: http : //stephenwalther.com/blog/archive/2011/01/11/building-an-html5-app-with-asp-net.aspx 。 但我真的相信ASP.NET MVC对它的任务更加灵活。 Microsoft always argument that HTML5 isn't fully finished. Then ASP.NET can ...
  • 来自Android 2.2的config.h 。 提交68698168e7547cc10660828f1fb82be7a8efa845 作者:Steve Block 日期:Wed Mar 17 14:37:19 2010 +0000 禁止工作人员 这是因为Android上的V8没有必要的锁定。 还禁用频道消息传递,仅与工作人员一起使用。 错误:2522239 Change-Id:I6cb91b4048c7e1a0351e422561625397a2e98986 通过http://code.google.co ...
  • 听起来你应该在
    标签中的文章中的
    标签和条目中包装每个“部分”(你称之为)。 HTML5规范说(Section): section元素表示文档或应用程序的一般部分。 在这方面,一个部分是内容的主题分组,通常包含标题。 [...] 章节的示例将是章节,选项卡对话框中的各个选项卡页面或论文的编号部分。 网站的主页可以分为几个部分,用于介绍,新闻项目和联系信息。 注意 :如果合并元素的内容是有意义的,则鼓励作者使用article元素而不是section元素。 和 ...
  • Chrome和Safari都有数据库GUI和命令行界面。 正如您所发现的,它们位于Developer Tools的“Resources> Databases”选项卡下(在Safari中称为Web Inspector)。 两者都非常相似,因为两种浏览器都基于Webkit。 您可以通过选择数据库的名称来获取临时查询的命令行界面。 在能够查看数据库之前,您必须在控制台或代码中调用openDatabase() 。 该数据库基于SQLite,因此您可以使用SQLite在此接受的几乎所有命令,除了帮助程序命令,例如'. ...
  • 框架集和框架元素在HTML5中已过时 。 请参见http://www.w3.org/TR/html5/obsolete.html#non-conforming-features iframe元素有效。 请注意,HTML5仍然要求浏览器根据Oded的链接支持框架和框架集,但它们对于在网页上使用的作者无效。 The frameset and frame elements are obsolete in HTML5. See http://www.w3.org/TR/html5/obsolete.html#non ...
  • 如果我理解正确,那么您正在寻找某种前端Java框架,例如JSF。 我最近遇到了类似的问题,经过广泛的搜索,我的公司决定选择Primefaces JSF。 Primefaces是一个JSF框架,具有惊人的社区和支持,允许您非常快速有效地构建html5: http://www.primefaces.org/ 它们具有非常积极的发布周期,并且可以继续添加您可以在Web应用程序中轻松使用的组件。 If I understand you correctly, you are looking for some sort ...
  • Web工作者的生命周期是限于单个页面还是跨域的页面? 专用工作者仅限于一个页面,而共享工作者可以与许多网页相关联 加载页面后,Web worker的生命周期是否持续存在? 如果它定义了onmessage(),它可以是持久的,如果我理解正确,它也可以在执行后返回。 在规范中它说:让它运行,直到它返回,未能捕获异常,或由于“杀死工人”或“终止工人”而过早中止...... 在setInterval中,Web worker是否比使用ajax调用更好? 这取决于。 你不能简单地说它是好还是坏。 目前,Web work ...