HTML5简单入门系列(四)

前言

今天这篇内容主要讲述HTML 5 Web Worker(一种支持前端js多线程的技术)。

工作线程(Web Worker)

web worker介绍

W3C 在 HTML5 的规范中提出了工作线程(Web Worker)的概念,工作线程允许开发人员编写能够长时间运行而不被用户所中断的后台程序, 去执行事务或者逻辑,并同时保证页面对用户的及时响应。
工作线程的出现使得在 Web 页面中进行多线程编程成为可能。众所周知,传统页面中(HTML5 之前)的 JavaScript 的运行都是以单线程的方式工作的,虽然有多种方式实现了对多线程的模拟(例如:JavaScript 中的 setinterval 方法,setTimeout 方法等),但是在本质上程序的运行仍然是由 JavaScript 引擎以单线程调度的方式进行的。在 HTML5 中引入的工作线程使得浏览器端的 JavaScript 引擎可以并发地执行 JavaScript 代码,从而实现了对浏览器端多线程编程的良好支持。

Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage。

Web Worker使用

Web Worker 可以分为两种不同线程类型,一个是专用线程 Dedicated Worker,一个是共享线程 Shared Worker。两种类型的线程各有不同的用途。下面仅仅对专用工作线程做简要描述。
Web worker的运行原理和两种线程的详细说明请查看这里

  • 创建外部javascript文件。

    它是专用线程的执行文件,即复杂的运算都在这里执行,onmessage接收主线程发送来的消息(参数),并将运行结果postMessage回主线程。

  • 在创建 web worker 对象之前,请检测用户的浏览器是否支持它。
if(typeof(Worker)!=="undefined")
  • 主线程中创建专用线程

    在创建专用线程的时候,需要给 Worker 的构造函数提供一个指向 JavaScript 文件资源的 URL,这也是创建专用线程时 Worker 构造函数所需要的唯一参数。当这个构造函数被调用之后,一个工作线程的实例便会被创建出来。下面是创建专用线程代码示例:

var worker = new Worker(jsrefurl);
  • 主线程接收专用线程发来的消息
worker.onmessage = function (event) { ... };
  • 主线程向专用线程发送消息
worker.postMessage();
  • 终止 Web Worker

    当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。
    如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:

worker.terminate();

示例

下面我们使用一个示例说明上述过程。

新建外部web worker 的js文件,命名为webworker.js

onmessage = function (event) {
var msg = event.data;
for (var i = 0 ; i < msg; i++) {
if (!!console && i % 500 == 0) {
console.info(i);
}
}
var d = new Date();
postMessage(d);
}

新建主线程页面,命名为webworker.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    web worker实时时间:<div id="workerTime"></div>
    <br />
    主线程获取当前时间:<div id="curTime"></div>
    <button onclick="mainthread()">主线程获取时间</button>
    <script>
        var interval;
        if (typeof Worker != undefined) {
            var worker = new Worker("webworker1.js");
            worker.onmessage = function (event)
            {
                document.getElementById("workerTime").textContent = event.data;
            }
            interval = setInterval(‘worker.postMessage("1000000")‘, 1000);
        }

        function mainthread() {
            document.getElementById("curTime").textContent = new Date();
        }
        function stop() {
            clearInterval(interval);       worker.terminate();
        }
        setTimeout(stop, 60000);//60秒之后清理interval
    </script>
</body>
</html>

代码很简单,只是为了说明webworker线程不会阻塞主线程(即实现前端多线程)。

示例中我们将webworker线程设置interval不断发起请求,使用一个循环在模仿复杂操作,或者你也可以在js中加入其他操作来模拟耗时操作。

定义了一个按钮,在主线程中获取当前时间。我们可以随时点击该按钮调用主线程的方法,而其不会受到web worker线程的影响。

运行效果我就不贴图了,各园友粘贴代码即可运行查看效果。

Web Workers 和 DOM

由于 web worker 位于外部文件中,它们无法访问下列 JavaScript 对象:

  • window 对象
  • document 对象
  • parent 对象

小结

本文示例很简单,但是麻雀虽小五脏俱全。

主线程新建web worker,发送消息及接收消息,web worker 接收及反馈消息,主线程主动停止web worker线程等全都使用到了。

相信看完这个简介和示例,对web worker也有了一定掌握。

参考

深入 HTML5 Web Worker 应用实践:多线程编程

HTML5 Web Worker的使用

时间: 2024-11-09 00:54:11

HTML5简单入门系列(四)的相关文章

HTML5简单入门系列(五)

前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的做法是网页不断的询问(向服务器发送请求)是否有可用的更新.通过服务器反馈之后,获得更新. 轮训方案 我们使用上篇HTML5简单入门系列(四)web worker的技术简单实现一下该轮训方案,主动向服务器询问是否有更新. 由于web worker不能访问document等对象,是不能和jQuery连用

HTML5简单入门系列(六)

前言 之前几篇已经将HTML5的主要新增元素和特性简单介绍完毕,LZ一直在犹豫还要不要把其他元素也写出来,因为其实没什么东西可以写,就是自己用到时看一下就行.不过为了入门系列的完整,犹豫再三,还是决定简单写一下其他元素(看到其他深入的HTML5,LZ就不写到这里了,因为LZ也没掌握,这里有篇深入剖析HTML5,各位可以看看). HTML5 新增元素介绍 input类型 新增的输入类型元素有: email url number range Date pickers (date, month, we

HTML5简单入门系列

前言 本篇详细介绍canvas画布的API.说是详细介绍,也只是一些常用的API及简单实例和说明.LZ本人也还没有看完全部,下篇会介绍剩余的一些内容. 本篇的示例中,LZ加入了注释,为的是只简单介绍API确实挺无聊,也不那么容易理解,看代码看效果才最直接. canvas APIs canvas 基础api 介绍 在初始化Javascript函数中,用canvas标签的id获得canvas的DOM对象,并用getContext() 方法获得这个canvas的“2d”上下文对象,之后使用上下文对象调

HTML5简单入门系列(九)

前言 上篇本来应该就是最后一篇了,但是楼主总觉得没有写上一个简单应用,不算是完整的学习系列.所以增加一篇关于动画的应用,对一个开源动画的介绍(很基础,非楼主原创). 本篇介绍一个基于Canvas的发光加载动画(这里可下载源码).算是对之前系列的各个知识点的一个总结吧. 我们先看看最终的效果截图: 新建一个html和一个js文件 html文件引入该js,并加了一个背景黑色,大体如下这样: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <

HTML5简单入门系列(三)

前言 本篇介绍HTML5支持的Web存储(Web Storage)和HTML 5 应用程序缓存. 客户端存储数据介绍 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 sessionStorage存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储. localStorag

HTML5简单入门系列(一)

前言 随着HTML5的流行,LZ作为一个web开发者,也决定学习一下前端前沿技术. HTML5 是下一代的HTML,它将成为 HTML.XHTML 以及 HTML DOM 的新标准.它是W3C( World Wide Web Consortium)和WHATWG(Web Hypertext Application Technology Working Group)合作的结果,在2014年10月29日宣布完成.他们为 HTML5 建立的一些规则:1.新特性应该基于 HTML.CSS.DOM 以及

03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(section)的标题进行组合 2.figure <figure> 标签规定独立的流内容(图像.图表.照片.代码等等). figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响. Figcaption figure的标题 一般格式: <figure> <figcap

RxJava入门系列四,Android中的响应式编程

RxJava入门系列四,Android中的响应式编程 在入门系列1,2,3中,我基本介绍了RxJava是如何使用的.但是作为一名Android开发人员,你怎么让RxJava能为你所用呢?这篇博客我将针对Android开发来介绍一下RxJava的使用场景. RxAndroid RxAndroid是为Android打造的RxJava扩展.通过RxAndroid可以让你的Android开发变得更轻松. 首先,RxAndroid中提供了AndroidSchedulers,你可以用它来切换Android线

[转]C# 互操作性入门系列(四):在C# 中调用COM组件

传送门 C#互操作系列文章: C#互操作性入门系列(一):C#中互操作性介绍 C#互操作性入门系列(二):使用平台调用调用Win32 函数 C# 互操作性入门系列(三):平台调用中的数据封送处理 C#互操作性入门系列(四):在C# 中调用COM组件 本专题概要: 引言 如何在C#中调用COM组件--访问Office 互操作对象 在C# 中调用COM组件的实现原理剖析 错误处理 小结 一.引言 COM(Component Object Modele,组件对象模型)是微软以前推崇的一个开发技术,所以