使用WebWorkers提高web应用程序可用性资源-CSDN文库

57 浏览量 2021-02-20 22:01:15 上传评论收藏 211KB PDF 举报

资源推荐

资源详情

资源评论

使用使用WebWorkers提高提高web应用程序可用性应用程序可用性

Web Workers，一个新的 JavaScript 编程模型，可以提高您 web 应用程序的交互性。有了它您就可以以一种多线程方

法运行 JavaScript，而且可以在后台运行脚本而不依赖任何用户界面脚本。本文介绍了 Web Workers，并引导您了解

一个实践示例，向您展示如何将 Web Workers 运用到您的 web 应用程序中。

简介

随着 Ajax 和 Web 2.0 应用程序的出现，终端用户被快速响应的 web 应用程序宠坏了。要让 web 应用程序响应得更

快，瓶颈一定要解决。瓶颈包括 JavaScript 和后台 I/O 庞大的计算量，这需要从主 UI 显示流程中移除，交给 Web

Workers 处理。

Web Workers 规范提供不依赖任何用户界面脚本在后台运行脚本的能力。长期运行脚本不会被响应单击或其他用户交

互的脚本中断。Web Workers 允许执行长期任务，同时也不影响页面响应。

Web Workers 出现之前，JavaScript 是现代 web 应用程序的核心。JavaScript 和 DOM 本质上都是单线程的：在任何

时间都只能执行一个 JavaScript 方法。即使您的计算机有 4 个内核，在进行长期计算时，也只有一个内核比较繁忙。

例如，您在计算到达月球的最佳轨道时，您的浏览器不能渲染一个显示轨迹的动画，以及 — 同时 — 对用户事件作出

响应（比如鼠标单击或键盘输入）。

Web Workers 打破了传统 JavaScript 的单线程模式，引入了多线程编程模式。一个 worker 是一个独立的线程。有多

个任务需要处理的 web 应用程序不再需要逐个处理任务。反之，应用程序可以将任务分配给不同的 workers。

在本文中，您将学习 Web Workers API。一个实例引导您逐步使用 Web Workers 来构建一个 web 页面。

从下面的下载表格下载本文示例的源代码。

基本概念

Web Workers 的基本组成：

Worker

一个新线程，在后台运行，不会阻塞任何主用户界面脚本（作为后台脚本被调用）。Workers 是相对重量级的，不要

大规模使用。

一个 worker 可以执行不少任务，包括并行计算、后台 I/O、以及客户端数据库操作。worker 不应该中断主 UI 或直接

操作 DOM；它应该向主线程返回一个消息，并让主线程更新主 UI。

Subworker

在一个 worker 中创建的 worker。Subworkers 必须与父页面同根同源。subworkers 的 URI 是根据父 worker 的地址而

不是自己页面地址确定的。

Shared worker

一个可以被多个页面通过多个连接所使用的 worker，共享 worker 和普通 worker 的工作方式略有不同，只有一小部分

浏览器支持这一特性。

Web Workers API

本小节介绍 Web Workers API 的基本概念.

创建一个 worker

要创建一个新 worker，您只需要调用 worker 构造函数，worker 脚本 URL 是惟一参数。worker 创建完成的同时启动一

个新线程（或者可能是一个新进程，根据您浏览的实现而定）。

worker 完成工作或者遇到一个错误时，您可以使用作业实例的 onmessage 和 onerror 属性从 worker 获取通知。清单

1 是一个样例 worker。

清单 1. 样例 worker myWorker.js

// receive a message from the main JavaScript thread

onmessage = function(event) {

// do something in this worker

var info = event.data;

postMessage(info + “ from worker!”);

};

如果您运行清单 2 中的 JavaScript 代码，您将得到 “Hello World from worker” 。

清单 2. 主 JavaScript 线程中的 Worker

// create a new worker

var myWorker = new Worker("myWorker.js");

// send a message to start the worker

var info = “Hello World”;

myWorker.postMessage(info);

// receive a message from the worker

myWorker.onmessage = function (event) {

// do something when receiving a message from worker

alert(event.data);

};

终止 worker

一个 worker 是一个线程，是一个高资源消耗的 OS 级对象。当分配给 worker 的任务完成后，或者想要终止时，调用

worker 的 terminate 方法来终止正在运行的 worker。worker 线程或进程即可终止，没有机会完成它的操作以及自身清

理。清单 3 是一个示例。

清单 3. 终止 myWorker

myWorker.terminate();

错误处理

和普通 JavaScript 代码类似，运行时错误也可出现在运行的 worker 中。要处理这些错误，您需要为 worker 建立

onerror 处理程序，如果在脚本运行期间出现错误，将会调用该处理程序。要防止发生默认活动，worker 可以调用

worker 错误事件的 preventDefault() 方法。

清单 4. 为 myWorker 添加错误句柄

myWorker.onerror = function(event){

console.log(event.message);

console.log(event.filename);

console.log(event.lineno);

}

错误事件有以下 3 个字段，可能对调试有帮助：

message：一个人们可读的错误消息

filename：出现错误消息的脚本文件的名称

lineno：出现错误消息的脚本文件的行数

导入脚本和库

Worker 线程可以访问一个全局函数，importScripts()，该函数支持将脚本和数据库导入它们的作用域。它可以不接收

参数，也可以接收多个要导入的资源的 URL 作为参数。

清单 5. 导入脚本

//import nothing

importScripts();

//import just graph.js

importScripts('graph.js');

//import two scripts

importScripts('graph.js', 'controller.js');

使用 Web Workers

本小节简要介绍 Web Workers 的一个实际用例。该示例包括显示一个含有多个基于 Dojo 的 Website Displayer 小部件

的页面。这些小部件过去通常使用 iFrame 来显示一个网站。没有 Web Workers 时，您必须通过 Ajax 请求来获取小部

件定义，然后在一个独立的 JavaScript 线程中显示它们。如果小部件定义含有大量数据，这个过程是非常慢的。

该示例创建一些 workers 来获取小部件定义。每个 worker 的任务是获取一个小部件定义，而且负责通知主 UI

JavaScript 线程来显示它，这是一个较快的解决方案。

该示例用的是 Dojo 1.4。如果您想在您的浏览器中运行该示例，下载本文所使用的 Dojo 库（见参考资料）和源代码

（见下载）。图 1 展示了示例应用程序的结构。

剩余11页未读，继续阅读

评论收藏

内容反馈

weixin_38690545

粉丝: 4
资源: 927

使用WebWorkers提高web应用程序可用性

Html5+WebWorkers定时通讯心跳处理

HTML5移动应用开发入门经典

HTML5移动Web开发指南

HTML5 FOR WEB DESIGNERS

html5离线缓存简单demo

HTML5移动Web开发实战教程

HTML5 移动WEB开发指南

一个基于html5的摇号抽奖程序.zip

个重要的HTML面试题及答案.docx

Html5程序设计基础教程(练习题参考答案).pdf

Laravel开发-workers

HTML5高级程序设计

《HTML5移动Web开发指南》.(唐俊开)

移动端Web页面即常说的H5页面手机页面webview页面等

HTML5 for .NET Developers (英文原版)

写给Web开发人员看的HTML5教程

HTML5高级程序设计 PDF版

Html5开发Android软件

如何在HTML5中创建UI应用程序？

HTML5高级程序设计 PDF

repo-hunt：示例项目展示了如何使用Cloudflare Workers构建全栈无服务器应用程序:woman_construction_worker::cloud:

Web前端程序设计作业-小米商城

Qt 5实现串口调试助手 （源工程文件、0积分下载）

【SystemVerilog】路科验证V2学习笔记（全600页）.pdf

AutoSAR标准协议4.2.2

光伏-储能并网系统仿真.rar

最新资源

Qt 5实现串口调试助手（源工程文件、0积分下载）