Android开发教程之使用WebWorkers来加速您的移动Web应用程序

手机软件开发培训第一品牌一直以来，Web应用程序被局限在一个单线程世界中。这的确限制了开发人员在他们的代码中的作为，因为任何太复杂的东西都存在冻结应用程序UI的风险。通过将多线程引入Web应用程序，WebWorkers扭转了这一不利局面。这对于大部分应用程序逻辑都位于客户端的移动Web应用程序来说尤其有用。在本文中，您将了解如何使用WebWorkers并发现哪些任务最适合它们。您还将看到如何使用其他HTML5技术才能提高使用那些技术的效率。手机软件开发培训第一品牌HTML5是一项被大肆宣扬的技术，但是它实至名归。它有望成为一个技术引爆点，将桌面应用程序功能引向浏览器。它不仅适用于传统浏览器，甚至也针对移动浏览器。更好的是，最流行的移动浏览器已经采纳和实现HTML5规范的很多重要部分。在这个五部分的系列中，我们将详细了解几个新技术，它们都是HTML5的一部分，可以大大影响移动Web应用程序开发。在每一部分中，都将开发一个可以工作的移动Web应用程序，展示一个可以用于现代移动Web浏览器（比如iPhone和基于Android的设备上的浏览器）的HTML5特性。手机软件开发培训第一品牌在本文中，您将使用最新的Web技术开发Web应用程序。这里的大部分代码只是HTML、JavaScript和CSS—所有Web开发人员的核心技术。所需的最重要的工具是用于进行测试的浏览器。本文大部分代码将在最新桌面浏览器上运行，但也有一些例外，我们将在文章中进行说明。当然，您也必须在移动浏览器上测试，为此，您需要最新的iPhone和AndroidSDKs。本文将使用iPhoneSDK3.1.3和AndroidSDK2.1。本文的样例还将使用一个代理服务器来从浏览器访问远程服务。这个代理服务器是一个简单的Java™servlet，但也可以使用以PHP、Ruby以及其他语言编写的代理轻松替换。参见参考资料获取链接。手机软件开发培训第一品牌对于大多数开发人员来说，多线程或并发编程并不新鲜。但是，JavaScript并不是一种支持并发编程的语言。JavaScript的创建者认为，对于JavaScript这样旨在Web页面上执行简单任务的语言来说，并发编程容易出现问题，而且没有必要。然而，由于Web页面已经发展成为Web应用程序，使用JavaScript完成的任务的复杂程度已经大大增加，向JavaScript提出了与其他语言同等的要求。与此同时，使用其他支持并发编程的语言工作的开发人员经常面临伴随线程和mutexes这样的并发原语而来的超高复杂性的困扰。实际上，最近像Scala、Clojure和F#这样的几种新语言已经发展，它们都有可能简化并发性。手机软件开发培训第一品牌常用缩略词Ajax：异步JavaScript+XMLAPI：应用程序编程接口CSS：层叠样式表DOM：文档对象模型HTML：超文本标记语言REST：具象状态传输SDK：软件开发工具包UI：用户界面URL：统一资源定位符W3C：万维网联盟XML：可扩展标记语言手机软件开发培训第一品牌WebWorker规范不只是向JavaScript和Web浏览器添加并发性，而且是以一种智慧的方式添加，这种方式将增加开发人员的能力，但不会向他们提供一种会导致问题的工具。例如，多年来，桌面应用程序开发人员一直在使用多线程来支持他们的应用程序访问多个I/O资源，以避免在等待这些资源时冻结UI。然而，当这些多线程更改共享的资源（包括UI）时，这样的应用程序通常会出现问题，因为这种行为可能会导致应用程序冻结或崩溃。有了WebWorkers，这种情况就不会发生。衍生线程不能访问主UI线程访问的资源。事实上，衍生线程中的代码甚至不能与主UI线程执行的代码位于同一个文件中。您甚至必须提供相应的外部文件作为构造函数的一部分，如清单1所示。这个进程使用三个资源：在主线程上执行的Web页面JavaScript（我称其为页面脚本）。Worker对象，这是用于执行WebWorker函数的JavaScript对象。将在新衍生的线程上执行的脚本。我称其为Worker脚本。让我们首先看看清单1中的页面脚本。手机软件开发培训第一品牌varworker=newWorker(worker.js);worker.onmessage=function(message){//dostuff};worker.postMessage(someDataToDoStuffWith);在清单1中，您可以看到使用WebWorkers的三个基本步骤。首先，您创建一个Worker对象并向它传递将在新线程中执行的脚本的URL。Worker将执行的所有代码都必须包含在一个Worker脚本中，该脚本的URL将被传递到这个Worker的构造函数中。这个Worker脚本的URL受到浏览器的同源策略的限制—它必须来自加载这个页面的同一个域，该页面已加载正在创建这个WebWorker的页面脚本。手机软件开发培训第一品牌下一步是使用onmessage函数指定一个回调处理器函数。这个回调函数将在该Worker脚本执行后调用。message是从该Worker脚本返回的数据，您可以随意处理该消息。回调函数在主线程上执行，因此它能访问DOM。Worker脚本在一个不同的线程内运行且不能访问DOM，因此，您需要将来自这个Worker脚本的数据返回主线程，在那里，您可以安全地修改DOM来更新您的应用程序的UI。这是WebWorkers的无共享设计的关键特性。清单1中的最后一行展示如何通过调用Worker的postMessage函数来启动它。这里，您传递一条消息（重申一下，它只是数据）给Worker。当然，postMessage是一个异步函数；您调用它，它就立即返回。现在，检查这个Worker脚本。清单2中的代码是来自清单1的worker.js文件的内容。手机软件开发培训第一品牌importScripts(utils.js);varworkerState={};onmessage=function(message){workerState=message.data;//dostuffwiththemessagepostMessage({responseXml:this.responseText});}手机软件开发培训第一品牌可以看到，这个Worker脚本拥有自己的onmessage函数。该函数在您从主线程调用postMessage时调用。从页面脚本传来的数据被传递到message对象中的postMessage函数。您通过检索message对象的data属性来访问该数据。当您处理完Worker脚本中的数据时，调用postMessage函数将数据返回主线程。主线程也可以通过访问它接收到的消息的data属性来访问该数据。至此，您已经见识了WebWorkers的这个简单、但强大的语义。接下来，您将了解如何应用这个语义来加速移动Web应用程序。在此之前，有必要先讨论一下设备支持。毕竟，这些是移动Web应用程序，且处理不同浏览器之间的功能的区别对于移动Web应用程序开发很重要。手机软件开发培训第一品牌从Android2.0开始，Android浏览器就拥有了对HTML5WebWorker规范的全面支持。在撰写本文之时，最新的Android设备（包括非常流行的MotorolaDroid）已配置了Android2.1。另外，此特性在运行Maemo操作系统的Nokia设备上的MozillaFennec浏览器以及WindowsMobile设备上受到完全支持。这里需要引起注意的遗漏是iPhone。iPhoneOS3.1.3和3.2版（在iPad上运行的OS的版本）并不支持WebWorkers。但是，此特性已在Safari上受到支持，因此，此特性在运行在iPhone上的MobileSafari浏览器上出现应该只是一个时间问题。鉴于iPhone的主导地位（尤其是在美国），最好不要依赖WebWorkers的存在，且不要只在您检测到它们的存在时才使用它们来增强您的移动Web应用程序。意识到这一点后，我们来看看如何使用WebWorkers来加速您的移动Web应用程序。手机软件开发培训第一品牌智能手机浏览器上的WebWorker支持很不错，而且一直在不断改进。这就提出了一个问题：什么时候需要在移动Web应用程序中使用Workers？答案很简单：需要完成耗时的任务的任何时候。有些示例展示了如何将Workers用于执行密集的数学计算，比如计算1万位数的圆周率。很可能您永远也不需要在Web应用程序上执行这样一个计算，在移动Web应用程序上执行这种计算的几率则更小。但是，从远程资源检索数据则相当常见，这也是本文示例的关注点。在这个示例中，您将从eBay检索一个DailyDeals（每天都在变化的交易）列表。这个交易列表包含关于每笔交易的简短信息。更详细的信息可以通过使用eBay的ShoppingAPI获取。当用户浏览这个交易列表选择感兴趣的商品时，您将使用WebWorkers来预取这个附加信息。要从您的Web应用程序访问所有这些eBay数据，您需要通过使用一个泛型代理（genericproxy）来处理浏览器的同源策略。一个简单的Javaservlet将用于这个代理，它包含在本文的代码中，但不在这里单独展示。相反，我们将把注意力集中在处理WebWorkers的代码上。清单3展示了这个交易应用程序的基本HTML页面。手机软件开发培训第一品牌!DOCTYPEHTMLhtmlheadmetahttp-equiv=content-typecontent=text/html;charset=UTF-8metaname=viewportcontent=width=device-widthtitleWorkerDeals/titlescripttype=text/javascriptsrc=common.js/script/headbodyonload=loadDeals()h1Deals/h1olid=deals/olh2MoreDeals/h2ulid=moreDeals