浏览器与HTML5小谈.docx

资源描述

浏览器与HTML5小谈.docx

《浏览器与HTML5小谈.docx》由会员分享，可在线阅读，更多相关《浏览器与HTML5小谈.docx（11页珍藏版）》请在冰点文库上搜索。

浏览器与HTML5小谈.docx

浏览器与HTML5小谈

金怡爱

提^纲

•浏览器介绍

•Webkit介绍

•HTML5

>HTML5历史与设计原理

>HTML5的新特性

>HTML5的发展状况

弓刘览器的价值…

•抢占桌面->用户习惯养成->抢占用户->产生效益

•实现业务定制

•作为云的接入或展现

弓对览器的分类—

•代理模式

由后端服务器负责对互联网内容进行重排版、适配、压缩，然后再组织成特殊的格式发送给浏览器客户端，浏览器客户端向用户展示。

•直连模式

终端直接访问源站点

■UCWEB

■3GGo

■星际浏览器

■OperaMini

■马赫浏览器

■skyfire

■Chrome/Safari/FireFox/IE

■在嵌入式浏览器领域，对内核有较强研发能力的，国外也就是Opera,Ant,Enreach等几家。

国内主要是茁壮和飞漫

■国内不少浏览器都是采用“套壳”方式来实现的，即直接调用平台自身的浏览器内核

四大浏览器内核

•Trident（IE,Maxthon）•Gecko（MozillaFirefox,Netscape,MozillaSuite,SeaMonkey,MozillaThunderbird）

•WebKit（Safari,Chrome,chromium）•Presto（Opera）

噸J览器的测试集…

•HTML兼容性测试

AcidX

•JavaScript性能测试

SunSpider/jsTimeTest

GoogleV8Benchmark/MozillaKraken

CelticKane测试组件

•综合性能测试

3DMark公司的Peacekeeper

•TML5组件测试

GUIMark2（绘图，游戏，文本）/微软的Mr.PotatoGun,MozillaHardwareStressTest/AsteroidsCanvas2Do

提^纲

•浏览器介绍

•Webkit介绍

•HTML5

>HTML5历史与设计原理

>HTML5的新特性

>HTML5的发展状况

WebKit的历史

•浏览器介绍

•基于早期KDE项目的KHTML组件发展而来

.2005年AppIe成立开源项gWebKit

•Apple基于WebKit建立自己的浏览器Safari•2008年Google发布自己基于WebKit的浏览器Chrome

•后续Google发展了安卓系统,浏览器核心也是WebKit

•国内外很多杂牌浏览器发展了基于Trident核心和WebKit核心的多核心浏览器

WebKit分枝

•Safari（http:

〃www.webkit•org/）

•Android/Chrome（chromium）

•Qtwebkit

Windows下编译Safari版本

■安装VS2005teamsuite（建议英文版）

■安装VS2005TeamSuiteServicePack1

■如果是VistaAVindow7安装SP1updateforvista

■安装vs2005的4个升级包：

KB918559/KB935225/KB943969/KB947315

■安装DirectXSDK和quicktimeSDK

■安装cgwin

■下载WebKitS叩portLibrary.zip,放到WebKit根目录下（无需解压）

■设置环境变量WEBKITLIBRARIESDIR和

WEBKITOUTPUTDIR

■运行update-webkit和update-webkit-support-libs两个脚本■编译整个解决方案

WebKit组成

•Webcore

•jscore•Webkit/webkit2

提^纲

•浏览器介绍

•Webkit介绍

•HTML5

>HTML5历史与设计原理

>HTML5的新特性

>HTML5的发展状况

HTML5的历或

■草案Q993/6）

■HTML2.0（1995/ll）

■HTML3.2（1996/1/14）

■HTML4.0（1997/12/18）

■HTML4.01（1999/12/24）

■XHTML1.0（2000）sXHTML1.1（2OO1）

■XHTML2.0:

未完成时就胎死腹中

■HTML5

•WHATWG（2004）[Opera->Google:

伊恩•希克森]->HTML5工作组

•W3C->HTML5

XHTML2.0美竅

因为它违反了著名的伯斯塔尔法则（Posters

Law）:

发送时要保守；接收时要开放。

g总部原鲤

•支持已有的内容•解决现实的问题

HTML5致力于解决过去HTML不支持而又为用户所接纳的习惯。

HTML5设计原鲤

•求真务实

HTML5中新的语义元素就是遵循求真务实原理的反映。

•平衡退化

渐进增强的另一面就是平稳退化，HTML5确保新增的元素在不能被识别时，仍然可以为浏览器所正确处理。

•最终用户优先

»—旦遇到冲突，最终用户优先，其次是作者，其次是实现者,其次标准制定者,最后才是理论上南完满。

A首先为人类设计，其次为机器设计。

，简化最常见的任务，让不常见的任务不至于太麻烦。

只为80%设计。

给内容创建者最大的权利。

默认设置智能化。

提^纲

•浏览器介绍

•Webkit介绍

•HTML5

>HTML5历史与设计原理

>HTML5的新特性

>HTML5的发展状况

■Canvas以及3D显示效果（WebGL）、SVG

■多媒体（Video/audio）

■CSS3样式

■离线及本地存储（AppCache,本地存储,IndexedDB

等等）■通信相关（WebSockets/WebWorkers等）■语义性（Microdata微数据等等）■特征检测

■设备功能（取得地理位置信息等等）

canvas

■HTML5canvas提供了通过JavaScript绘制图形的方法

■通过webGL接口在canvas元素当中产生交互的3D图形

svC与动茴

•采用SVG规范中定义的动画元素（〈animate〉，,,,）。

•采用SVGDOMo

•采用SMIL

•HTML5对于音视频分别定义了新的元素：

vvideo>,

•HTML5支持不需要插件的视频'音频业务，可以同时指定多个音视频文件，其中第一个可以作为推荐性的文件，•由于不同浏览器提供不同的外观控制栏，HTML5提供一种公共的、集成的、以及基于脚本的多媒体处理机制。

Video

videowidth="320〃

height=〃240”controls="controls">

II•II

download

•WebStorage>localStorage>sessionStorage

•WebSQLDatabase

•IndexedDBo

•webworkers•websockei•N2.一f-ca-ons

而ML5的特征检颈厂

检测了浏览器是否在支持一个特定的HTML5特性有四种基本的技术，由简入繁依次是：

1、检测全局对象（诸如window或者nagivator）是否支持题特定的属性

2、创建一个元素，然后检测该元素是否存在特定的一些属性

3、创建一个元素，然后检测这个元素上是否存在

特定的方法，同时调用这个方法了检查它的返回值

4、创建一个元素，给这个元素设定HTML5特有的

属性，然后检査浏览器是否保留了该属性值

二W备功能一—

HTML5提供了一组API用来获取用户的地理位置

Geolocation是GeolocationWorkGroup制定的标准,

用户可以接受或者拒绝为Web应用提供自己位置信息的获取和访问

WebVTT一个简单的文件格式正在WHATWG开发，名为WebVTT（网络视频文字频道），被考虑纳入HTML5的标准和实施，作为Web浏览器本身的一个HTML5元素。

该文件格式可根据章导航和元数据为HTML5视频提供标题，字幕和脚本说明,它还能利用国际标准（il8n）,支持各种格式的选项。

WOFFWeb开放字体格式WOFF（WebOpenFontFormat）的出现，使精排版可以真正将文字作为网页来使用，而不是图像。

提^纲

•浏览器介绍

•Webkit介绍

•HTML5

>HTML5历史与设计原理

>HTML5的新特性

AHTML5的发展状况

芽客厂家对印nvrig

•Opera/Firefox

•Google

•Apple

•Facebook•Adobe

•微软

■开发工具

>IBMMaqetta

A微软Visualstudio/ExpressionWeb4

>AdobeCS以及HTML5Pack、Wallaby

>Gordon>Swiffy

>OnlineCSS3Maker>TumulthypeAnimation）■开发框架

SenchaTouch、iUI、jQTouch、jQueryMobile>

iWebKit（主要针对Apple设备）、SproutCore>Joshfireo■其它工具

NitobiPhoneGap>Appcelerator的Titanium、

Rhodes

■硬件加速能力有待提咼

■终端浏览器支持的成熟度有待提高

■开发工具太少

■对多媒体支持不够

■音视频编码格式不统一

■硬件加速能力有待提咼

■终端浏览器支持的成熟度有待提高

■开发工具太少

■对多媒体支持不够

■音视频编码格式不统一

提^纲

•浏览器介绍

•Webkit介绍

•HTML5

>HTML5历史与设计原理

>HTML5的新特性

>HTML5的发展状况

>HTML5与flash的一些对比

Flash成功的原因

■内部原因：

＞把握住了RIA这一正确的方向

»提供了完善的开发工具

»上层开发接口统一，跨浏览器平台好（只要支持flash插件都能运行）

■外部原因：

AW3C选择了错误的XHTML方向，导致标准长期停滞不前。

»浏览器厂商没有把握住RIA这一正确方向

A浏览器厂商对标准支持不好，导致跨平台存在障碍，也无法提供友好的开发工具。

•Open的统一是有代价的

•封闭私有未必一无是处

•JavaScript诟病甚多