使用jQueryMobile与HTML5开发WebApp-HTML5WebWorkers.docxVIP

泽思网络 – 上海APP开发商 使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 Web Workers 本文要介绍的是 HTML5 的 Web Workers 特性，它解决了 JavaScript 开发中一个重大的问题 —— 在后台运行 JavaScript 。与本系列前两篇文章介绍的特性相似，Web Wordkers 似乎也是为了 Web Apps 而设计的，可以想象，Web Apps 乃至原生 Apps 受移动设备性能的限制比在桌面环境中要大很多，尽管现在的移动设备性能已经不断的提高，这对于发展 Web Apps 的确是个很好的机遇，但是其性能表现始终受限，因此，对 Web Apps 开发来说 Web Workers 无疑是个十分实用的技术，使到 Web Apps 可以在移动设备上更好的运行。 一. 什么是 Web Workers ? 在介绍 Web Workers 的具体使用时，Kayo 首先正式说明一下 Web Workers 。当 HTML 页面中执行 JavaScript 时，都是单线程执行的，这时页面的状态是不可响应的，即页面的 UI 会被锁定，若执行需要的时间过长，页面甚至会出现假死状态。这样对于用户来说是个很不好的体验，他们只能等待 UI 恢复过来才能继续操作，对于开发者来说，这也很无奈。Web Workers 则使到 JavaScript 能在后台运行 ，即在后台创建相应的线程，把费时的处理交给后台，前台便能继续响应用户的操作，这样既不会影响页面的性能，又使到用户可以继续做想做的事。 可以看出，Web Workers 确实是个很棒的特性，但它仍有一些限制： Web Workers 会完全独立于它们的执行页面，即在独立线程中工作，因此不能在 Web Workers 内访问 DOM 对象，window 对象，document 对象和 parent 对象。但 Web Workers 仍可以直接访问 navigator ，因此开发者可以访问 navigator 对象中如 appName , appVersion 和 userAgent 等一些属性。 由于这个限制的存在，我们无法直接利用 Web Workers 进行 DOM 操作，因此 Web Workers 更适合用于复杂的计算等耗费 CPU 的处理，这样可以尽量减轻 CPU 的负担，提升应用的性能。另外，需要开发者虽然无法直接在 Web Workers 内进行 DOM 操作，但可以在 Web Workers 的 message 事件的回调函数中进行 DOM 操作（关于 message 事件 Kayo 会在下面详细介绍），而把计算处理交给 Web Workers 在后台计算。 另外，也是由于 Web Workers 在独立线程中工作的原因，因此它也不能使用主线程中的变量和函数，也不能使用 alert 等会使到页面状态暂停的操作。 以上就是 Web Workers 的基本情况了，虽然仍有限制，但 Web Workers 已经有很实用的开发价值了。 二. 浏览器支持 Web Workers 在现代浏览器中都已经实现完整的支持，IE 则完全不支持。具体如下（以下版本号表明从该版本开始支持 Web Workers ，但并不一定完全支持 Web Workers 的完整功能，并且早期的具体表现在各浏览器之间有较大差异）： Chrome 3+ , Firefox 3.5+ , Safari 4+ 和 Opera 10.6+ 三. 使用 Web Workers 下面开始介绍如何利用 Web Workers 在后台运行 JavaScript 脚本。 1. 创建 Web Workers 对象 使用 Web Workers 运行 JavaScript 必须创建一个相应的 Web Workers 对象，例如，把需要执行的 JavaScript 都放在 demo_workers.js 中，而 demo_workers.js 与主页文档 index.html 处于同级目录，可以在 index.html 中使用以下语句创建相应的 Web Workers 对象： 1 var w = new Worker(demo_workers.js) 这样创建 Web Workers 对象之后，可以使用 w 引用这个 Web Workers 进行其他的操作了。 为了避免无效的操作，开发者还可以在创建及使用 Web Workers 之前判断浏览器是否支持 Web Wokers 。具体的代码如下： 1 2 3 4 5 6 7 if( typeof(Work