1. 交流评审会即将开始 跨浏览器客户端技术预研

2. 2009年Web小组技术预研之—— 跨浏览器客户端技术 今日议题 国网电力科学研究院 / 南瑞集团 信息技术研究所 / 信息系统分公司 开发部 李 昕 主流跨平台客户端技术 主流 Web 浏览器 客户端技术路线 服务端技术路线 评审与讨论

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

4. 主流跨浏览器客户端技术

5. 当前 AJAX 技术的优势

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

7. 主流 Web 浏览器

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

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

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

11. 客户端核心技术 W3C 标准

12. 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拥有更加美好的前景

13. 客户端核心技术 XHTML 语言

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

15. 客户端核心技术 CSS 样式表单

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

17. 客户端核心技术 XML 语言

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

19. 客户端核心技术 XSLT 语言

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

21. 客户端核心技术 JQuery 框架

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

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

24. 客户端核心技术 实时加载技术

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

26. 客户端核心技术 其他客户端技术

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

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

29. 服务端核心技术 ServiceFaçade层

30. ServiceFaçade层 不再像PI3000那样从客户端直接调用远程服务，而是通过网站服务端的ServiceFacade间接调用 优点 可以针对网站运行时的实际需求，设计服务方法的参数和返回值 减少各服务向外暴露的方法，使服务方法更加纯粹 服务被隐藏在后台，只需网站穿透防火墙即可，安全性得到提升 不再有跨域访问的问题 潜在的缺点 效率可能会变低 服务接口变化时，可能ServiceFacade层也需做相应修改

31. 服务端核心技术 REST 风格服务

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

33. 核心技术 JSON 技术

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

35. 交流与讨论 大家畅所欲言

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