HTM L5 Web WOrker技术及应用研究

荣艳冬

摘要：文章主要讨论网页前端多线程技术，首先分析了传统多线程技术原理和应用场景，然后分析了HTML5规范中WebWorker的技术原理、产生的必要性和具体应用场景，通过对比分析得出了以下结论：网页前端的工作线程和传统的多线程本质上有很大差别，它更适合由于服务器或者客户端长时间计算导致网页前端处于阻塞状态的工作场景。

关键词：HTML5；Web Worker；多线程；工作线程

1引言

多线程技术已经被普遍地应用到软件开发之中，它是非常成熟的技术。多线程技术是指在一个进程中包含多个可并行执行的控制流，这些控制流切换时不必通过进程调度，通信时可以借助于共享的内存区。多线程的优势非常明显，它能高效的利用系统资源，提高用户体验，缩短完成任务的时间。当然其缺点也非常明显，例如：增加了程序设计和实现的复杂度、需要更多的计算机资源等。

HTML5是由W3C组织2014年完成的新网页规范，它融入了非常多的新技术，其中Web Worker是HTML5提出的工作线程技术，工作线程允许web页面中进行多线程编程。本文主要讨论工作线程与传统多线程的差别、工作线程的技术原理、必要性和应用场景。

2传统多线程技术

2.1技术概述

传统多线程技术主要应用到软件编程中，线程相当于一个小的进程，由操作系统进行调度，多个线程可以由一个进程进行管理，当前几乎所有的高级语言都提供了多线程支持，例如：Java和.net等程序设计语言提供了专门的多线程接口，用户可以更加方便的进行多线程编程。

2.2技术应用场景

多线程技术应用已经非常成熟，以下是两个比较典型的应用场景：

（1）软件多任务执行，用户可以在一个软件上启动多个任务，这能够提高了软件的利用率；另外，软件在执行安装、计算等操作时也可以同时启动多任务，这可以有效地利用CPU等计算机资源，从而提高工作效率。

（2）网络编程，在网络编程中服务器端需要使用多线程技术，一个新的用户和服务器进行连接，需要启动一个新的线程，这可以让每个用户和服务器的交互是独立的，从而保证用户能够单独完成业务逻辑和数据通信，服务器资源充分被利用。

3 HTML5 Web Worker技术

在HTML5中，多线程技术被称为工作线程（Web Worker），HTML5规范出Web Worker的3大主要特征：能够长时间运行（响应），理想的启动性能和内存消耗。

3.1 Web Worker技术原理

Web Worker技术本质是Web程序中可以并发执行多个Javascript脚本，每一个被执行的脚本称为一个线程，彼此相互独立，统一由浏览器的Javascript引擎进行管理，它和传统的线程在线程管理、应用场景等诸多方面还是有很大差别的，其最主要的特点是在页面端实现，这是网页技术的一个创新内容。

HTML5中的Web Worker可以分为2种不同线程类型，一个是专用线程（Dedicated Worker），一个是共享线程（Shared Worker）。专用线程是指只能在单一客户端上实现多线程，与其他客户端不发生交互；共享线程更适合多个浏览器窗口、iframe或者Worker并发访问，适应多个客户端之间进行数据的交互和控制，它允许同域中的多个应用程序使用同一个提供公共服务的共享线程。共享线程的通信和专用线程稍有不同，需要通过port属性进行通信。以下是专用线程的创建、通信和终止操作：

（1）线程的创建，HTML5通过“new Worker（url）”语句建立一个新的工作线程，参数“url”是Javascript文件资源，它不可以跨域，这个文件中的Javascript代码在一个单独的工作线程中运行，工作线程如果需要加载其他的Javascript文件，可以使用“importScript”函数。

（2）线程的通信，页面主程序通过onMessage事件接收专用线程传递的数据，使用postMessage事件给页面主程序发送数据。

（3）线程的终止，通过调用“terminate（）”方法立刻终止当前线程，线程没有完成的操作不会被继续执行。

3.2工作线程的必要性

Javascript语言是单线程的，所以页面端程序设计不能是并行的，这给许多页面程序设计带来了技术瓶颈，页面端如果一个Javascript程序没有完成，其他的Javascript将被阻塞，如果用户通过Javascript语言向服务器端发送请求，而服务器端计算时间较长，不能及时给客户端响应，页面将处于无响应状态。虽然可以通过setInterval和setTimeout函数模拟多线程工作，但是其本质是单线程，不能有效的利用客户端资源，无法彻底的解决多线程问题。

Web Worker技术从本质上弥补了Javascript的单线程缺陷，无论是对于服务器端计算时间较长的Javaseript请求，还是前端Javascript语言长时间的运算，都可以单独创建工作线程，不影响其他线程工作。

3.3应用场景

（1）服务器端长响应，服务器端有可能进行长时间的计算，不能够给客户端及时响应，客户端会处于阻塞状态，解决这种问题通常有2种方案：一是优化服务器端，缩短计算时间；二是客户端采用轮询获得服务器端计算结果。显然第1种方案没有彻底解决问题，第2种方案使程序设计更加复杂，更加浪费服务器端资源。HTML5的工作线程适应这种场景，对于服务器端长响应的请求可以使用Ajax进行实现，为发送请求的Javascript代码单独建立一个工作线程，这样，服务器端长响应的请求和页面其他内容处于两个线程，阻塞只发生在长响应的线程中，页面其他工作不受影响。

（2）客户端计算，通常Web编程中客户端的长时间计算是不被允许的，因为长时间的计算会阻塞页面，降低用户浏览网页的体验度。在实际工作过程中客户端的复杂计算是很普遍的，例如3D网页技术、在线游戏技术等都需要客户端进行长时间的计算。工作线程适合这个场景，长时间的客户端计算可以由一个单独的工作线程进行处理，不影响页面的其他工作，用户甚至可以设置加载动画等待计算结果。

4结语

HTML5的工作线程在本质上和传统多线程是不同的，这也决定了他们适应的场景有所不同。网页前端多线程技术当前并没有被广泛的应用，Web Worker规范虽然已经制定完成，但并没有很多成熟的应用。但是，它所提出的理念让客户端编程更加丰富，这也可以更加有效的利用客户端资源，在提高工作效率的同时，也减轻了服务器端的压力。