HTML5 API:
1、文件 API (规范与本地文件进行交互的标准方法)
2、拖放 API (提供了直接支持拖放操作的API)
3、地理定位 (获取地理位置信息)
4、web 存储 (在本地存储用户的浏览数据)
5、Web SQL (在浏览器上模拟数据库,可以使用JS来操作SQL完成对数据的读写)
6、应用程序缓存 (创建 web 应用的离线版本。可以在没有网络连接的情况下进行访问。)
7、Web Sockets (在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。)
8、SSE (网页自动获取来自服务器的更新)
9、Web Workers (web worker 是运行在后台的 JavaScript,不会影响页面的性能)
......
9、Web Workers (使用Web Workers处理线程)
- 基础知识
- 与线程进行数据的交互
- 线程嵌套
- 线程中可用的变量、函数与类
本章介绍HTML5新增的与线程有关的一个功能—使用Web Workers来实现Web平台上的多线程处理功能。通过Web Workers,你可以创建一个不会影响前台处理的后台线程,并且在这个后台线程中创建多个子线程。通过Web Workers,你可以将耗时较长的处理交给后台线程去运行,从而解决了HTML5之前因为某个处理耗时过长而跳出一个提示用户脚本运行时间过长,导致用户不得不结束这个处理的尴尬状况。
学习内容:
- 掌握Web Workers的基本知识,能够使用Web Workers在Web网站或应用程序中创建一个后台线程。
- 掌握在前台页面与后台线程进行数据交互时所使用到的方法与事件,能够在JavaScript脚本中实现前台页面与后台线程之间的数据交互。
- 掌握在主线程之间嵌套子线程的方法,能够利用JavaScript脚本在主线程之中创建一个或多个子线程,能够实现主线程与子线程,子线程与子线程之间的数据传递。
- 了解在后台线程中可以使用的JavaScript 脚本中的对象、方法与事件。
基础知识
Web Workers是在HTML5中新增的,用来在Web应用程序中实现后台处理的一项技术。
在使用HTML4与JavaScript创建出来的web应用程序中,因为所有的处理都是在单线程内执行的所以如果花费的时间比较长的话,程序界面会处于长时间没有响应的状态。最恶劣的是,当时间长到一定程度的话,浏览器还会跳出一个提示脚本运行时间过长的提示框,使用户不得不中断正在执行的处理。
为了解决这个问题,HTML5新增了一个Web Workers API。使用这个API,用户可以很容易地创建在后台运行的线程(在HTML5中被称为worker),如果将可能耗费较长时间的处理交给后台去做的话,对用户在前台页面中执行的操作就完全没有影响了。
创建后台线程的步骤十分简单。只要在Worker类的构造器中,将需要在后台线程中执行的脚本文件的URL地址作为参数,饭后创建Workers对象就可以了,如下所示:
var worker = new Worker(“worker.js”);
但是,要注意在后台线程中是不能访问页面面或窗口对象的。如果在后台线程的脚本文件使用到window对象或document对象,则会引起错误的发生。
另外,可以通过发送和接收消息来与后台线程互相传递数据。通过对Worker对象的onmessage事件句柄的获取可以在后台线程之中接收消息,如下所示:
worker.onmessage = function(event){
//处理收到的消息
}
使用worker对象的postMessage方法来对后台线程发送消息,如下例所示。发送的消息是文本数据,但也可以是任何JavaScript对象(需要通过JSON对象的stringify方法将其转换成文本数据
)。
worker.postMessage(message);
另外,同样可以通过Worker对象的onmessage事件句柄及Worker对像的postMessage方法在后台线程内部进行消息的接收和发送。
接下来,让我们看一个使用后台线程的示例。在该示例中放置了一个文本框,用户在该文本框输入数字,然后点击旁边的计算按钮,在后台计算从1到给定的合计值,虽然对于从1到给定值得求和计算只需要一个求和公式就可以了,但是本示例中为了展示后台线程的使用方法,采用循环计算的方法。
首先给出HTML4中的关于这个求和运算的示例代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>workers</title>
</head>
<body>
<h1>从1到给定数值的求和:</h1>
输入数值:<input type="text" id="num">
<button