[转]Windows8的WPF技术与HTML5的比较

Windows8风格程序支持使用WPF和HTML两种方式进行编程。本人之前曾使用WPF开发过概念版QQ，现在又在使用HTML5。两种技术都略懂，略懂。所以将两者做了个比较。虽然WPF的命运多舛，应用不太广泛，但技术本身还是有很多亮点的。值得我们学习一下，开阔眼界。

 

严格说WPF与Silverlight都属于.Net技术体系下新一代的界面技术，都使用标记语言XAML搭建界面，程序语可以选择C#等.Net体系的语言。

 

本文为了方面将WPF与Silverlight统一称作WPF，用XAML专门表示标记语言。用HTML5表示技术、HTML表示语言。

 

 

1. XAML与HTML

 

     都是标记语言，客户端在运行时进行渲染。

 

     XAML的程序虽然需要编译，但是XAML的处理是从文本格式转换为二进制格式，节省空间。

     HTML一般在服务器端进行压缩，如GZIP，在浏览器解压缩。目的也是节省空间。

 

2. 页面布局

     XAML提供的布局类型较多，有Table布局，有横向或纵向的堆栈式，wrap的流式布局，绝对位，还有windows特有的dock和anchor。

 

     HTML5中，大量用Div，布局方式有绝对的，float的，inline，chrome等浏览器对DIV的display方式进行了扩展，可以实现横向或纵向的顺序排列。Table方式就不用说了。HTML5中的多列方式是独有的。

 

     两者都可以在运行时动态修改界面元素。WPF还有原生的控件模版和数据绑定模版Template，但是HTML5的innerHTML更灵活更方便。

 

 

3. 渲染逻辑

     两者类似，都有逻辑树、视觉树（显示树）的概念。同样也有reflow和redraw的概念。同样reflow也是最耗资源的。

 

4. 图形绘制

     位图方面两者都支持很多图片格式。不过浏览器可以天然支持GIF，WPF不行，但可以自行实现。微软好像一直和GIF有仇。

 

     矢量图方面，WPF支持的形状种类更丰富。不过HTML5可以利用DIV的boader、圆角的设置实现很多基本图形。两者都支持Path。都支持Canvas.

 

     渐变色，两者都支持，不过WPF一开始就很完善看，HTML5在逐渐完善，毕竟浏览器不是一家的。

 

5. 样式

     HTML5的style，CCS3什么的到家都很熟悉了。不多说了。

     WPF中也有style，style可以有内建、外链和元素内的，外链的方式引用一个资源文件和CSS类似。不过CSS的选择器做得比较好，可以通过id、class、元素类型、伪类、还有各种组合方式。毕竟HTML用的人更多，CSS有机会发展的更完善。

     WPF中对于资源可以实现完全的编程控制，HTML5中可以用变成控制内联的CSS，外联的就不行了。

 

6. 事件

     元素的事件都支持事件前的捕获与事件后的冒泡。

     都可以自定义事件。两者没有太大差别。

 

     WPF有一个特有的机制叫触发器trigger。trigger与CSS3的hover伪类有些类似，但功能要多得多。trigger的实现是基于事件模式的，只不过是将常用的场景进行了包装，从而达到了不用写C#代码就可以处理简单事件逻辑的功能。

 

 

7. 数据绑定

     WPF所独有的。与触发器配合，可以打打减少编码量，很多功能不需要用C#，只需要XAML就可以实现。

 

 

8. 3D支持

     WPF可以支持3D。HTML5标准中支持，但是目前支持的还不完善处于实验状态。WPF中操作3D的编程界面比较友好，有高级API。WebGL提供的是底层API，难度较高，不过也有很多JS类库进行了封装。

 

 

9. Transform

     WPF只支持2D的translate，rotate，skew，scale。HTML5可以支持3D的rotate和translate。但正如第八点提到的，WPF有专门的3DAPI，操作也不复杂。

 

10. 编程语言

     WPF支持C#、C++、VB等多种.Net语言。HTML5支持JavaScript。个人感觉.Net的功能更强大，毕竟是客户端，几乎无所不能。但是脚本语言更灵活，可以在运行动态添加修改代码。

 

11. 数据

     WPF中可以将数据作作为资源以文本形式放在XAML内。

     最新的Chromium也支持DataList了。http://blog.chromium.org/2012/11/a-web-developers-guide-to-latest-chrome.html

 

12. 多媒体

     视频、声音理论上两者都支持。WPF支持更好，毕竟是客户端可以支持自己编写视频解码。HTML5这方面比较慢。视频方面由于H264的专利问题几大浏览器互相博弈。声音方面更是缓慢，没有一种音频格式能够通吃所有浏览器，在声音播放时还有诸多问题。不过前景是光明的，只是时间问题。

 

 

13. WPF中的特色

     依赖对象（DependcyObject ）一套非常强大、霸气的面向对象模型。初期接触会觉得很晕，用熟了非常方便、非常爽。

 

 

14. HTML5的特色

     MathML算是一个特色。

 

15. 其他

     地理信息呀、WebWorker呀、WebSockets呀什么的可比较性不强。这里就不说。

 

 

 

                                           --------转自alloyteam