交流评审会即将开始

跨浏览器客户端技术预研

国网电力科学研究院 / 南瑞集团信息技术研究所 / 信息系统分公司开 发 部

李 昕

今日议题 主 流 跨 平 台 客 户 端 技 术 主 流 Web 浏 览 器 客 户 端 技 术 路 线 服 务 端 技 术 路 线 评 审 与 讨 论

跨浏览器客户端技术2009 年 Web 小组技术预研之——

第一章 主流跨浏览器客户端技术介绍 AJAX 、 Flash 、 Silverlight 等主流 RIA 客户端技术

主流跨浏览器客户端技术

W3C AJAX 技术• 应用范围最广，学习成本低，具有领先优势，但效率偏低

Adobe Flash 与 AIR 技术• 执行效率高，但变成模型较差，学习成本较高

Microsoft Silverlight 技术• Flash 的竞争者，但更新过于平凡，技术路线不明确

Sun JavaFX 技术• 应用范围最小，执行效率不高，编程模型更加接近于 C/S 模

式

当前 AJAX 技术的优势

最老牌、最成熟的技术

唯一具有 W3C 组织承认的标准通用技术

最高的关注度，各大厂商、社区都贡献大

量的开源代码

浏览器的性能比起 3年前，已经大大提高

较低的开发成本 较低的学习成本

第二章 主流 Web 浏览器简单介绍当前主流浏览器现状，并讨论它们之间的兼容性

主流 Web 浏览器Microsoft Internet Explorer （仅 Windows 平台）• 对 XHTML 的兼容性已达到较高水准，但性能最低，对 CSS3 和 HTML5 的兼容性

较差

Mozilla FireFox• 历史最悠久的浏览器之一，兼容性最好，是所有浏览器的标准

Google Chrome• 最新的浏览器品牌，有较高的支持率，采用 WebKit 引擎（支持

HTML5 、 CSS 3 ）Apple Safari• 最快、最先进的浏览器，同样采用 WebKit 引擎，但在 Windows

上运行不是非常稳定Opera• 小众的浏览器，兼容性不是非常出色，但拥有世界第一的移动用户拥

护者

浏览器兼容性

IE8.0 对 XHTML 的兼容性已大大提升，但此前版本由于大量存在兼容性问题，所以只能忽略除 IE 系列浏览器以外，其他的浏览器与 FireFox 之间一直保持着良好的兼容性Chrome 和 Safari 的核心都是 WebKit ，所以几乎不存在兼容性问题Opera 的兼容性较差，很多情况下不能兼顾开发时，只需保证 IE8.0 和 FireFox 、 WebKit 的兼容性即可

解决浏览器兼容性冲突问题

遵循 W3C 标准，不一定需要做到每一款浏览器显示的效果都相同HTML 的差异十分细微CSS 的差异，可以通过尽量少用 IE 不兼容的 CSS 属性解决可通过 CSS-Hack 等手段，解决 IE 兼容性问题可通过 JavaScript 对 HTML DOM 进行扩展，解决 HTML DOM 不兼容的问题可通过 JQuery 框架解决 HTML DOM 不兼容的问题XML 、 XSLT 可通过在 AJAX 框架级，通过包装工具类解决

第三章 客户端技术路线介绍当今最流行的 AJAX 主流核心技术

客户端核心技术

W3C 标准

W3C 标准

多厂商参与的，开放的，唯一的业界标准XHTML 1.0 语言CSS 2.1 和部分 CSS 3.0 特性JavaScript(EMC) 脚本PNG ， JPG 图片格式以 FireFox 为首的非 IE 浏览器，对 W3C 保持最良好一致的支持力度和忠诚度IE 正试图在每一次更新中，增加对 W3C 更多的支持HTML 5.0 + CSS 3.0 拥有更加美好的前景

客户端核心技术

XHTML 语言

XHTML 语言目前兼容性最好的 Web 标准严格遵守 XML 格式，所有标签都必须封闭，所有属性都必须放在引号中必须具有 DocType 声明推荐使用具有含义的 HTML 标签推荐使用 DIV 的布局方式

客户端核心技术

CSS 样式表单

CSS 样式表单CSS 2.0 拥有最公认的浏览器支持HTML表“意”， CSS表“形”使用 CSS样式表单，可以在将来实现Theme功能使用类，可以增加 CSS 的可复用性使用伪类，可以精确的筛选元素，减少大量的 DHTML 代码使用高级选择器，可以减少大量的JavaScript 代码

客户端核心技术

XML 语言

XML 语言最常见的数据格式，拥有良好的 W3C 标准通过 JavaScript 对 XMLDOM 的扩展，可使非 IE 浏览器的 DOM 对象与 IE 兼容XPath查询语句兼容性好XML 语言适用于结构化的数据持久化

客户端核心技术

XSLT 语言

XSLT 语言具有良好的 W3C 标准，被所有主流浏览器支持应用 XSLT模板和 XPath ，可以灵活转换XML数据为 HTML 格式XSLT 可被应用于具有层次感的界面组件展现，效率要比 HTMLDOM绘制或服务端绘制高出很多

客户端核心技术

JQuery 框架

JQuery 框架

当前最流行的展现框架之一，连MicroSoft Ajax Library 中都采用了该框架使用类似 CSS/XPath选择器语言，对 DOM 进行操作它是客户端绘制界面、事件响应、执行 XML HTTP调用、实现特效的好帮手轻量，占用资源小可以轻松实现跨浏览器执行与 PI3000 的 MWFramework互不干扰执行效率不是非常高，不适合用来绘制大型表格

JQuery56%

Prototype43%

XHTML+CSS + XSLT + JQuery = 更高的效率，更少的资源使用更少的标签和更多的 CSS样式，可以极大的优化网页性能和减少占用资源BDGrid 组件的代码量减少 20% ， JS 展现相关代码量减少 30% 以上BDNaviTree 组件的标签量减少 40% 以上， JS展现相关代码减少 40% 以上ContextMenu 、 ToolBar 等控件，标签量减少50% 以上，代码量减少 50% 以上经测试，以上控件在所有主流浏览器中运行效果一致，效率方面非 IE 浏览器占有绝对优势

客户端核心技术

实时加载技术

实时加载网页技术可在运行时从客户端发起对网页的实时加载请求使用 Regular Expression 解析 HTML ，主动发起对 CSS 、 JavaScript 等资源的加载请求自动在首次加载时，初始化客户端 AJAX 组件可实现实时加载的对话框，对于BDSelector 、工作流发送等对话框界面尤其适用

客户端核心技术

其他客户端技术

其他客户端技术通过对非 IE 浏览器 HTMLElement 类的扩展，可以将它们模拟成类似 IE 的 HTML DOM模型通过对 Framework 的重新分解打包，可以减少对客户端资源的消耗通过适当使用异步调用结合等待提示，可以提升用户体验通过减少 JavaScript 与 HTML DOM 的操作（最小化 HTML 标签结构、使用CloneNode 等），可以提升执行效率* 历史记录功能不是十分适用于 PI3000 系统

第三章 服务端技术路线介绍 ServiceFacade 、 JSON 等技术

服务端核心技术

ServiceFaçade 层

Service Façade 层不再像 PI3000那样从客户端直接调用远程服务，而是通过网站服务端的 ServiceFacade 间接调用优点

可以针对网站运行时的实际需求，设计服务方法的参数和返回值减少各服务向外暴露的方法，使服务方法更加纯粹服务被隐藏在后台，只需网站穿透防火墙即可，安全性得到提升不再有跨域访问的问题

潜在的缺点效率可能会变低服务接口变化时，可能 ServiceFacade层也需做相应修改

服务端核心技术

REST 风格服务

REST 风格服务基于 URL 的服务调用请求，方法名和参数都包含在 URL 中在使用 HTTP POST 的时候，参数也可以以XML或 JSON 的形式放在 body 中返回值可以是 JSON或 XML ，具体根据实际情况而定可在 HEADER 中添加各种附加信息可通过 URL 、时间戳、 Hash值等方法，实现客户端缓存和服务端缓存

核心技术

JSON 技术

JSON 技术Java 社区有大量开源 JSON序列化器供选择JavaScript 原生态支持 JSON 的反向序列化在表示 String 、 Number 、 Boolean 、日期及简单对象时，要比 XML短小精悍得多在表示 DataTable 等二维表数据时，序列化效率要比 XML-RPC 高出许多JSON数组的解析效率要比 JSON 对象效率高，因此 DataTable 更适合于使用数组表达式相比 XMLDOM ， JSON 不会出现循环引用也不会出现资源无法回收的情况

交流与讨论大家畅所欲言

感谢观看

© 2006-2009 MagicCube. All rights reserved.This presentation is for informational purposes only. MagicCube makes no warranties, express or implied, in this summary.