1、Mobile Software Expert,Html5培训,什么是Html5? Html5的前景 Html5 新特性 JavaScript 基础 Node.js Html5视频音频 Html5 WebRTC,HTML5,目录,Html5 Canvas特性 Html5 表单元素 Html5 Css3 Html5 Svg Html5 Web存储 Html5 离线存储 Html5 cache,HTML5,Html5 web workers Html5 webSocket Html5 拖拽 Html5常见的API Html5 存在的局限 Html5与phoneGap,HTML5,什么是HTML5？,
2、HTML5,官方概念：HTML5草案的前身名为Web Applications 1.0，是HTML4的更新加强版本。它增加了新的标签和属性，强化了网页的标准（w3c等）、语义化、图像表达能力和交互效果。广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，这些技术包括：HTML5，DOM3，CSS3，JS API，SVG，WebGL（3D）等简单概括：hmt5其实就是html,css以及js APIs的整合。也即Html5=html+css+js Apis 。=HTML+CSS+JS APIs,它是如何起步的？ HTML5 是下一代的HTM
3、L。 HTML5 将成为HTML、XHTML 以及HTML DOM 的新标准。 HTML 的上一个版本诞生于1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5 支持。,HTML5,HTML5,HTML5,HTML5 建立的一些规则： 新特性应该基于HTML、CSS、DOM 以及JavaScript。 减少对外部插件的需求（比如Flash） 更优秀的错误处理 更多取代脚本的标记 HTML5 应该独立于设备 开发进程应对公众透明,HTML5,HTML5 前景： 1.将会被广泛运用于商业应用 2.将会被普及于各大平台（w
4、indows,mac，ios,android等） 3.各种HTML5游戏的开发层出不穷 4.互联网产品的更新换代的技术依托 5.可扩展性强，浏览器支持,HTML5,HTML5的新特性,HTML5,媒体支持：Video和Audio 画布元素-Canvas以及WebGL视频加速 增强的表单Form 更炫的平面动画-CSS3页面渲染及 CSS3 3D 矢量支持-SVG HTML5的图形机制比较-SVG vs Canvas 离线应用 原生的拖拽 其他HTML5特性,JS基础,JavaScript 简介概括地说，JavaScript就是一种基于对象和事件驱动，并具有安全性能的脚本语言，脚本语言简单理解就
5、是在客户端的浏览器就可以互动响应处理程序的语言，而不需要服务器的处理和响应，当然JavaScript也可以做到与服务器的交互响应，而且功能也很强大。对象和事件是JavaScript的两个核心。 将JavaScript 插入网页的方法JavaScript可以被嵌入到HTML文件中，不需要经过Web服务器就可以对用户操作作出响应。使用标签在网页中插入Javascript代码。.,JS基础,JavaScript使用document.write来输出内容。将会输出在网页上输出：Hello World!,代码如下：document.write(“ Hello World!“);将js代码嵌入到html页
6、面：,JS基础,JavaScript运算下面举例讲述c=a+b的例子/ 计算a + b的和var a = 5;/给变量a赋值var b = 5;/给变量b赋值 var c = a + b;/c 为 a + b 的和document.write(c);/输出c的值执行结果：10,JS基础,JavaScript 弹出框 JavaScript中有三种弹出框:警告(alert)、确认(confirm)以及提问(prompt)1）警告(alert)，下面的代码是一段使用alert的实例：alert(“我是菜鸟我怕谁“);2）确认(confirm)，下面代码为例：var r=confirm(“你是菜鸟吗“
7、);if (r=true) document.write(“彼此彼此“); ,JS基础,3）提问(prompt)prompt和confirm类似，不过它允许访客随意输入回答。function judge() var score;/分数var degree;/分数等级score = prompt(“你的分数是多少？“)if (score 100)degree = 耍我？100分满！;,JS基础,JavaScript 函数 函数举例：function add2()sum = 1 + 1;alert(sum); 那么这个函数怎么调用呢？,JS基础,function add2() sum = 1 +
8、1;alert(sum); ,JS基础,JavaScript事件* 点击事件：onclick调用函数* 鼠标经过、移出事件：鼠标滑过调用函数鼠标移出调用函数*更多事件.,JS基础,JavaScript 对象化编程1.常见的基本对象有String 字符串对象, Array 数组对象, Math “数学”对象, Date 对象,这些对象会有各自的方法。2.全局对象：全局对象就是一些全局函数，他们可以直接用，这里对它们进行简要的介绍。3.文档对象文档对象是指在网页文档里划分出来的对象。在 JavaScript 能够涉及的范围内有如下几个“大”对象：window, document, location
9、, navigator, screen, history 等。下面是一个文档对象树。var name = document.getElementById(“UserName“);/通过id获取值,JS基础,（1）navigatornavigator 浏览器对象 反映了当前使用的浏览器的资料。 （2）screenscreen 屏幕对象 反映了当前用户的屏幕设置。 （3）windowwindow 窗口对象是最大的对象，它描述的是一个浏览器窗口。一般要引用它的属性和方法时，不需要用“window.xxx”这种形式，而直接使用“xxx”。一个框架页面也是一个窗口。如window.location.hr
10、ef= “”, window.open,window.close （4）historyhistory 历史对象指浏览器的浏览历史。,（1）navigator 。,JS基础,（5）locationlocation 地址对象描述的是某一个窗口对象所打开的地址。要表示当前窗口的地址，只需要使用“location”就行了；若要表示某一个窗口的地址，就使用“.location”。如window.location（6）documentdocument 文档对象 描述当前窗口或指定窗口对象的文档。它包含了文档从到的内容。 用法：document （当前窗口） 或 .document （指定窗口）如docum
11、ent.write, document.open, document.close（7）anchors; links; Link anchors; links; Link 连接对象。用法：document.anchorsx; document.linksx; ; ,（1。,Node.js,它是什么？Node.js事实上就是另外一种上下文，它允许在后端（脱离浏览器环境）运行JavaScript代码。要实现在后台运行JavaScript代码，代码需要先被解释然后正确的执行。Node.js的原理正是如此，它使用了Google的V8虚拟机（Google的Chrome浏览器使用的JavaScript执行环
12、境），来解释和执行JavaScript代码。要使用Node.js,首先需要进行安装。关于如何安装Node.js，这里就不赘述了，可以直接参考官方的安装指南。,Node.js,Hello world 实例打开编辑器，创建一个helloworld.js文件。我们要做就是向STDOUT输出“Hello World”，如下是实现该功能的代码：console.log(“Hello World“);保存该文件，并通过Node.js来执行（命令行）：node helloworld.js在终端输出 Hello World。node机制的根本原理是多利用CPU、高速缓存处理相应访问，减少比如像硬盘到内存，或到高
13、速缓存中的检索读取的等待时间。,Node.js,一个基础的HTTP服务器我们从服务器模块开始。在你的项目的根目录下创建一个叫server.js的文件，并写入以下代码：var http = require(“http“); http.createServer(function(request, response) response.writeHead(200, “Content-Type“: “text/plain“); response.write(“Hello World“); response.end(); ).listen(8888);我们来运行并且测试这段代码。首先，用Node.js执
14、行你的脚本： node server.js接下来，打开浏览器访问http:/localhost:8888/，你会看到一个写着“Hello World”的网页。,Node.js,Node.js采用事件驱动、异步编程，为网络服务而设计Node.js的另一个特点是它支持的编程语言是Javascript。关于动态语言和静态语言的优缺点比较在这里不再展开讨论。只说三点：Javascript作为前端工程师的主力语言，在技术社区中有相当的号召力。而且，随着Web技术的不断发展，特别是前端的重要性增加，不少前端工程师开始试水”后台应用“，在许多采用Node.js的企业中，工程师都表示因为习惯了Javascri
15、pt，所以选择Node.js。Javascript的匿名函数和闭包特性非常适合事件驱动、异步编程，从helloworld例子中我们可以看到回调函数采用了匿名函数的形式来实现，很方便。闭包的作用则更大，看下面的代码示例：var hostRequest = http.request(requestOptions,function(response) var responseHTML =; response.on(data, function (chunk) responseHTML = responseHTML + chunk; ); response.on(end,function() cons
16、ole.log(responseHTML); / do something useful ); );在上面的代码中，我们需要在end事件中处理responseHTML变量，由于Javascript的闭包特性，我们可以在两个回调函数之外定义responseHTML变量，然后在data事件对应的回调函数中不断修改其值，并最终在end事件中访问处理。,HTML5视频音频,我们来看一个应用场景,视频聊天- Google html5视频聊天功能,视频聊天- Google html5视频聊天采用了html5中的视频和音频技术，依托于webRTC网络视频音频服务,HTML5视频音频,Audio Video
17、& WebRTC标签定义视频，比如电影片段或其他视频流。标签定义声音，比如音乐或其他音频流。 WebRTC（Web Real-Time Communication） 是应用在视频会议、实时广播、多方会谈、点对点应用程序等等的新的协议与 API（用 navigator.getUserMedia 启动用户计算机的摄影机，用 PeerConnection 进行点对点传输等等）,HTML5视频音频,video如何工作 video 元素允许多个source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。 实例：Your browser does not support
18、the video tag.,HTML5视频音频,audio如何工作 audio 元素允许多个source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式。 实例：Your browser does not support the audio tag.,HTML5视频音频,效果：,Page 31,Video播放视频,Audio播放声音,HTML5 WebRTC,关于WebRTC *来由：WebRTC（Web Real Time Communication）并不是Google原来自己的技术。在2010年，Google收购了VoIP软件开发商Global IP So
19、lutions公司，并因此获得了该公司拥有的WebRTC技术。 *意义：WebRTC实现了基于网页的视频会议，标准是WHATWG 协议，目的是通过浏览器提供简单的JavaScript就可以达到实时通讯（Real-Time Communications (RTC)）能力。主要是让Web开发者能够基于浏览器（ChromeFireFox.）轻易快捷开发出丰富的实时多媒体应用，而无需下载安装任何插件，Web开发者也无需关注多媒体的数字信号处理过程，只需编写简单的Javascript程序即可实现，W3C等组织正在制定Javascript 标准API来完善WebRTC项目。 *兼容性：WebRTC提供了视
20、频会议的核心技术，包括音视频的采集、编解码、网络传输、显示等功能，并且还支持跨平台：windows，linux，mac，android。,Page 32,HTML5 WebRTC,使用WebRTC的四大理由：1.HTML、HTTP和TCP/IP是开放和免费实现的。浏览器通信领域提供免费、高质量、完整的解决方案2.集成了最佳的音频、视频引擎，并被部署到数以百万级的终端中。3.使用STUN、ICE、TURN、RTP-over-TCP的关键NAT和防火墙穿越技术，并支持代理。4. WebRTC通过提供直接映射到PeerConnection的信号状态机来抽象信号处理。,Page 33,HTML5 We
21、bRTC,Page 34,WebRTC构架图,HTML5 WebRTC,Page 35,WebRTC构架组件介绍,(1) Your Web AppWeb开发者开发的程序，Web开发者可以基于集成WebRTC的浏览器提供的web API开发基于视频、音频的实时通信应用。 (2) Web API面向第三方开发者的WebRTC标准API（Javascript），使开发者能够容易地开发出类似于网络视频聊天的web应用，最新的标准化进程可以查看这里。 (3) WebRTC Native C+ API本地C+ API层，使浏览器厂商容易实现WebRTC标准的Web API，抽象地对数字信号过程进行处理。,
22、HTML5 WebRTC,Page 36,(4) Transport / Session传输/会话层会话层组件采用了libjingle库的部分组件实现，无须使用xmpp/jingle协议. (5) VoiceEngine音频引擎是包含一系列音频多媒体处理的框架，包括从视频采集卡到网络传输端等整个解决方案。 (6) VideoEngineWebRTC视频处理引擎VideoEngine是包含一系列视频处理的整体框架，从摄像头采集视频到视频信息网络传输再到视频显示整个完整过程的解决方案。,HTML5 WebRTC,Page 37,WebRTC应用举例,网络在线钢琴弹奏,HTML5 canvas,画布
23、元素-Canvas以及WebGL视频加速 首先还是来看一个场景,构建3D虚拟拓扑图-某3D网管,HTML5 canvas,Canvas简介什么是Canvas？ HTML5 的canvas 元素使用JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。,HTML5 canvas,Canvas APIcanvas ，HTML5最期待元素之一，可以通过脚本可以任意创建图形，编辑图形，导入图片，导出图片。其中分2D与3D： 2D context API：基本线条、路径、插入图像、像素级操作、文字、阴影、
24、颜色渐变等提供图形绘制功能。 3D context API（WebGL）： WebGl 定义了一套API, 能够允许在网页中使用类似于Open GL，实际上是一套基于OpenGL ES 2.0的3d图形API。这些API是通过HTML 5的canvas标签来使用的。,HTML5 canvas,创建Canvas 元素 向HTML5 页面添加canvas 元素。规定元素的id、宽度和高度：通过JavaScript 来绘制canvas 元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript 内部完成：var c=document.getElementById(“myCanvas“);va
25、r cxt=c.getContext(“2d“);cxt.fillStyle=“#FF0000“;cxt.fillRect(0,0,150,75);,HTML5 canvas,JavaScript 使用id 来寻找canvas 元素：var c=document.getElementById(“myCanvas“);然后，创建context 对象：var cxt=c.getContext(“2d“);getContext(“2d”) 对象是内建的HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。在此就不一一例举了。下面的两行代码绘制一个红色的矩形：cxt.fillStyl
26、e=“#FF0000“;cxt.fillRect(0,0,150,75);fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。,HTML5 canvas,演示效果,构造一个简单的Canvas 3D物体,Canvas基本作图API之画板,HTML5 FORM,增强的表单Form什么是表单：在Javascript 中，页面html上的每一对 标记都解析为一个对象，即form 对象,为提交数据的对象。,HTML5 FORM,场景,配置页面-增加配置的流畅性和容错性,注册-增加注册的流畅性和无障碍浏览,HTML5 FORM,新的FORM表单 HTML5的表单定义了十几个
27、新的元素和特性，这些新增元素可以代码更为易用、简洁和高效。这些新的东西包括： 1. 新元素：Email、Number、Range，color picker等 2 .新属性：placeholder、pattern、required、autofocus 、multiple等特性 3 .新样式：新的伪类样式，比如:focus,:required,:valid等 4 .新的输入方式-语音输入： x-webkit-speech可以让标签接受语音并转化为数字,HTML5 FORM,Demo E-mail: url: number: 滑动条 ,HTML5 FORM,Datalist，keygen，outpu
28、t,HTML5 FORM,Opera 全部支持chrome支持keygen keygen元素的作用是提供一种验证用户的可靠方法。 keygen元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。 私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。 浏览器对此元素的支持度不足 对比Structstoken 令牌 output 元素用于不同类型的输出，比如计算或脚本输出,HTML5 FORM,演示,HTML5 CSS3,HTM
29、L5之 CSS3,HTML5 CSS3,从上页的场景可以看到 HTML官方logo华丽丽滴诞生了。您可以起官方logo页面（点击这里）其观摩。 它是如此的闪耀，以至于我不得不用手挡住眼前的强光，它的朝气，它的魄力迎面袭来，让人窒息。 就实现而言，使用了不少的CSS3的东东，主要用来实现旋转效果。然后，元素很疯狂地使用绝对元素定位。然后，一点一点，就成了。因为使用了CSS3， 此logo效果使用CSS3的内容大致就是这些： -webkit-transform: skewX(-5deg); -moz-transform: skewX(-5deg); -o-transform: skewX(-5de
30、g); -ms-transform: skewX(-5deg); transform: skewX(-5deg); -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -o-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0;,HTML5 CSS3,CSS3新特性 选择器 RGBA和透明度 多栏布局：弹性布局（水平布局、垂直布局） 多背景图 Word Wrap 文字阴影 font-face属性 盒阴影：阴影，
31、文本阴影 盒模型：，多背景，圆角(边框半径)，边框图片 2D：旋转，缩放，倾斜，请参考：CSS基础变换 3D：透视，transform 3D，等等 媒体查询 语音,HTML5 CSS3,CSS3 选择器奇偶选择器 .row:nth-child(even) background: #dde; .row:nth-child(odd) background: white; 属性选择器 inputtype=“text“ background: #eee;,HTML5 CSS3,HTML5 CSS3,Css3 2D,灰太狼,华为Logo,HTML5 CSS3,Css3 3D,Google 3D box,
32、旋转的立方体,HTML5 SVG,SVG 矢量图形,HTML5 SVG,SVG（Scalable Vector Graphics）：可缩放矢量图形，使用 XML 来描述二维图形和绘图程序的语言。可以在浏览器中构造 矩形、圆形、椭圆、线条、多边形、折线、路径、滤镜效果、渐变效果，和动画等,HTML5 SVG,SVG 形状SVG 有一些预定义的形状元素，可被开发者使用和操作：矩形 圆形 椭圆 线 折线 多边形 路径 ,HTML5 SVG,要理解它的工作原理，请把这些代码拷贝到记事本，然后保存为 “rect1.svg“ 文件。把此文件放入web目录中：代码解释： rect 元素的 width 和 h
33、eight 属性可定义矩形的高度和宽度style 属性用来定义 CSS 属性,CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值） CSS 的 stroke-width 属性定义矩形边框的宽度 CSS 的 stroke 属性定义矩形边框的颜色,HTML5 SVG,运行以上代码得到：,简单的图形元素,复合图表,HTML5 SVG,HTML5的图形机制比较: SVG VS Canvas,HTML5 SVG,相同点,均是HTML5规范的一部分 均能实现图形和动画 均可以通过脚本编程控制显示,HTML5 SVG,不同点,HTML5 SVG,总结,互有所长，均适用不同应用场景
34、： SVG更适合规则图形的绘制和动画，更好管理。典型场景：图表，流程图等高保真度矢量文档。 Canvas更适合不规则或涉及像素级的变化场景，更高效。典型场景：图片编辑和图形数据分析，位图动画，2D游戏，3D虚拟空间等像素操作。,HTML5 离线存储,本地存储解决方案很多，比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。,HTML5 离线存储,Cookiefunction SetCookie(sName, sValue)var date =
35、new Date();document.cookie= sName+ “=“ + escape(sValue) + “; expires=“ + date.toGMTString();function GetCookie(sName)var aCookie= document.cookie.split(“; “);for (vari=0; i aCookie.length; i+)var aCrumb= aCookiei.split(“=“);if (sName= aCrumb0) return unescape(aCrumb1); return null;,HTML5 离线存储,functi
36、on DelCookie(sName)document.cookie= sName+ “=“ + escape(sValue) + “;expires=Fri, 31 Dec 1999 23:59:59 GMT;“; userData1.userData将数据以XML格式保存在客户端计算机上（windows）2.C:Documents and SettingsLimingUserData3.userData行为提供了一个比Cookie更具有动态性和更大容量的数据结构。4.每页的UserData存储区数据大小可以达到64 Kb，每个域名可以达到640 Kb。5.userData行为通过sessi
37、ons为每个对象分配UserData存储区。6.HTML、HEAD、TITLE和STYLE标记上应用了userData行为后将会出错成员expires 设置或取得使用userData行为保存数据的失效日期getAttribute() 取得指定的属性值；load(存储区名) 从userData存储区载入存储的对象数据；removeAttribute() 删除指定的属性值；save(存储区名) 将对象存储到一个userData存储区；setAttribute() 设置指定的属性值；XMLDocument取得存储该对象数据的XML?DOM引用。,HTML5 离线存储,userData Demo1us
38、erDatabehavior:url(#default#userdata);2.3.object.style.behavior=“url(#default#userData)“4.object.addBehavior(“#default#userData“)function fnSaveInput()var oPersist=oPersistForm.oPersistInput;oPersist.setAttribute(“sPersist“,oPersist.value);oPersist.expires=new Date(1980,0,1,7,59,59).toUTCString(); o
39、Persist.save(“oXMLBranch“);function fnLoadInput()var oPersist=oPersistForm.oPersistInput;oPersist.load(“oXMLBranch“);oPersist.value=oPersist.getAttribute(“sPersist“);,HTML5 离线存储,sessionStoragelocalStorage核心方法：sessionStorage.setItem(“key”,”value”);sessionStorage.key= “value”;sessionStorage. removeIte
40、m(“key”); sessionStorage. getItem(“key”);sessionStorage.keysessionStorage.clear();localStorage与sessionStorage方法相同Demoif (!localStorage.pageLoadCount) localStorage.pageLoadCount= 0; localStorage.pageLoadCount= parseInt(localStorage.pageLoadCount) + 1; document.getElementById(count).text= localStorage
41、.pageLoadCount;,HTML5 离线存储,Web SQL Database核心方法：1. openDatabase(“,“,“,“,function(t)/创建数据库，数据库名，版本号，描述，大小(b),匿名函数(可省略)2. transaction(function(tx)/执行查询，匿名函数，tx，事物类型，负责实际的查询。3. executeSql(“,function(tx,result),function(tx,error)/真正执行查询，sql语句，参数，成功函数(事物参数，结果集)，失败函数(事物参数，结果集)Sql语句demoSELECT COUNT(*) FROM
42、 tb CREATE TABLE db (id REAL UNIQUE, label TEXT, timestamp REAL)INSERT INTO db (label, timestamp) values(?, ?)，“text“, new Date().getTime()INSERT INTO db (label, timestamp) values (“Test“, 1265925077487),HTML5 离线存储,查询结果获取： result.rows.item(i) result.rows.item(i)label data.rows0.label data.rows0label
43、 Web SQL Database Demo http:/ http:/ http:/www.w3.org/TR/webdatabase/,HTML5 离线存储,Web SQL Database Demo var db=openDatabase(“DBName“,“1.0“,“Alistoftodoitems.“,5*1024*1024);/5MB If(db) db.transaction(function (tx) tx.executeSql(“SELECTCOUNT(*)FROMTBName“,function(tx,result)for(vari=0;i+result.rows.ite
44、m(i)label+);,function(tx,error) tx.executeSql(“CREATETABLETBName(idREALUNIQUE,labelTEXT,timestampREAL)“,null,null); tx.executeSql(“INSERTINTOToDo(label,timestamp)values(?,?)“,*“test”,newDate().getTime(),null,null);); ),HTML5 离线存储,离线存储使得你的web应用可以在用户离线的状况下进行访问。离线存储的两个特性： 1 离线资源缓存 2 本地数据存储 local storag
45、e 离线存储技术技术显然至少有三个好处： 1 最直接的好处就是用户可以离线访问你的web应用 2 因为文件被缓存在本地使得web页面加载速度提升许多 3 离线应用只加载被修改过的资源，因此大大降低了用户请求对服务器造成的负载压力。,HTML5 Cache,Web Application Cache 用法1.需要在页面的html标签中通过manifest属性引用一个manifest文件使得应用可缓存。2.manifest文件是一个文本文件，它罗列了离线访问应用时所需缓存的文件清单。3.引用该manifest文件的页面，不管你有没有罗列到清单中，都会被缓存。,HTML5 Cache,Web App
46、lication Cache 服务器要求1.配置manifest的文本文件（served astext/cache-manifest ，UTF-8 ）。2.增加服务器MIME类型信息（text/cache-manifest ）3.MIME：多用途Internet 邮件扩展(MIME) 类型说明了Web 浏览器或邮件应用程序如何处理从服务器接收的文件。当Web 浏览器请求服务器上的某一项目时，也会请求此对象的MIME 类型。某些MIME 类型（例如图形）可以在浏览器内部显示。其他的MIME 类型（例如文字处理文档）则需要使用外部帮助应用程序来显示。,HTML5 Cache,Web Applica
47、tion Cache 好处1.最直接的好处就是用户可以离线访问你的web应用2.因为文件被缓存在本地使得web页面加载速度提升许多3.离线应用只加载被修改过的资源，大大降低了用户请求对服务器造成的负载压力,HTML5 Cache,Web Application Cache Manifest语法CACHE MANIFESTCACHEa.Jpgb.CssIndex.aspxNETWORK*Login.aspxRegister.aspxFALLBACK/ /default.aspx/index.aspx /404.html#注释符号 Demo. ,HTML5 Cache,Web Applicatio
48、n Cache 更新1.删除缓存数据2.修改manifest文件3.用js更新var cache = window.applicationCache;Cache.swapCache(); 监听事件 onchecking，onerror，onnoupdate，ondownloading，onprogress，onupdateready，oncached和onobsolete。cache. addEventListener(error, handleCacheError, false);functionhandleCacheError(e) alert(Error: Cache failed to
49、 update!); ;,HTML5 web worker,Web WorkersWeb Workers为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建，Web Workers就可以通过postMessage()向任务池发送任务请求，执行完之后再通过postMessage()返回消息给创建者指定的事件处理程序(通过onmessage进行捕获)。var worker = new Worker(“worker.js”);/并发线程，新线程worker.onmessage= function(message) vara = message.Data; ;/主线程worker.postMessage(“aaa”);/主线程异步函数，run thread Worker.jsvar onmessage= function(message) var m = message.data; /处理数据postMessage(m);/参数可是obj，Json：name:”小明”,message.data.name ,
