让效果说话 8款主流浏览器网页特效实测

来源:网络整理更新时间:2012-08-26 16:17点击:

源代码调试

评测背景及参评软件下载    如果现在还有哪款浏览器不支持HTML5，那真的可以说是弱爆了！HTML5作为当前最热门的网页技术，已经成为多数网页开发人员的首选，各大浏览器厂商也都对HTML5相当重视。虽然现在大部分浏览器都已经支持HTML5，但由于所使用的内核引擎不同，所以每款产品对HTML5的支持程度也会有所不同。     除HTML5之外，CSS3同样是网页制作中非常重要的一项技术，虽然可以实现的功能不及HTML5那么丰富，但CSS样式表是最基本的网页CSS3的应用范围更广、使用率更高。因此，对CSS3的支持程度，同样可以看出一款浏览器的性能优劣。 <img src="http://localhost/uploads/allimg/120826/161J260b_0.jpg" alt="让效果说话 8款主流浏览器网页特效实测 " /> 让效果说话 8款主流浏览器网页特效实测     为了让大家更直观的了解到究竟哪款浏览器对HTML5和CSS3有更好的支持，本次测试我们除了使用传统的测试工具进行跑分对比之外，还会通过两个网页实例，对当前主流的8款PC浏览器进行测试，效果好不好，一看就知道！ ●参评软件下载

浏览器名称
版本号
下载地址


Google Chrome浏览器
20.0.1132.57
官方下载        ZOL高速下载


IE9浏览器
9.0.8112.16421
        ZOL高速下载


Firefox浏览器
14.0.1
官方下载        ZOL高速下载


Opera浏览器
12.01
官方下载        ZOL高速下载


Safari浏览器
5.1.7
官方下载        ZOL高速下载


搜狗浏览器
3.2.0.4716
官方下载        ZOL高速下载


QQ浏览器
6.14
官方下载        ZOL高速下载


傲游浏览器
3.4.2.1000
官方下载        ZOL高速下载

 ●评测环境

评测环境


操作系统
Windows 7 专业版


CPU型号
英特尔 奔腾 B940 2.00GHz


内存容量
2GB DDR3


硬盘容量
500GB


显卡类型
NVIDIA GeForce GT 520M, 1GB独立显存

 ●测试项目说明 什么是HTML5     HTML5是用于取代1999年所制定的HTML4.01和XHTML 1.0标准的HTML标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。 什么是CSS3     CSS即层叠样式表（Cascading Stylesheet）。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。HTML5工具测试：QQ浏览器胜出HTML5工具测试：QQ浏览器胜出     html5test是被业界承认的一款浏览器HTML5性能测试工具，通过它可以测试出浏览器对各种HTML5标记的支持程度，包括文字、视频、音频、元素、表单、用户交互等等，并对每个项目进行打分，最后给出浏览器整体得分。 <img src="http://localhost/uploads/allimg/120826/161J260b_1.jpg" alt="让效果说话 8款PC浏览器页面特效实测 " /> HTML5测试工具打分     8款浏览器HTML5工具测试结果（满分500）：

浏览器名称
得分


Google Chrome浏览器
414


IE9浏览器
138


Firefox浏览器
345


Opera浏览器
400


Safari浏览器
278


搜狗浏览器
393


QQ浏览器
476


傲游浏览器
419

     从HTML5工具测试的得分结果可以看出，在满分为500的测试中，IE和Safari都没能突破及格线，Firefox和搜狗勉强过关，Chrome、Opera和傲游实力相当，QQ浏览器比较意外地获得了最好成绩476分。    那么，在接下来的实例测试中，这8款浏览器又会有怎样的表现？是否与测试工具中的得分情况一致呢？HTML5实例测试：Chrome和IE9完胜HTML5实例测试：Chrome和IE9完胜    HTML5实例测试我们选择的是一个Web版钢琴应用，主要测试浏览器对HTML5声音、动态效果、用户交互的处理情况。用户可以从下拉列表中选择曲目播放，在播放的同时下方会有像劲乐团等弹奏游戏那样的条形音符向上滚动，也可以用鼠标点击钢琴键盘自己弹奏。 <img alt="让网页说话 8款PC浏览器页面效果实测 " src="http://localhost/uploads/allimg/120826/161J260b_2.jpg" /> HTML5钢琴实例    需要说明的是，在钢琴实例中测试交互能力时，我们采用的方法是用鼠标先从左到右，再从右到左从钢琴键盘上快速滑过，检查鼠标滑过时琴键动作是否流畅，是否每个音阶都能来得及发出声音。因为如果浏览器处理得不好，就会出现琴键动作的速度赶不上鼠标操作速度，从而出现动作和声音滞后的问题。    为了保证测试结果的公平性，在测试过程中所有浏览器选择的都是第64首曲目。    8款浏览器HTML5实例测试结果：浏览器名称声音动态效果交互Google Chrome浏览器有流畅流畅IE9浏览器有流畅流畅Firefox浏览器有略卡动作和声音比操作滞后Opera浏览器有卡动作和声音比操作滞后Safari浏览器无法打开页面搜狗浏览器无略卡操作流畅，没有声音QQ浏览器无略卡操作流畅，没有声音傲游浏览器有略卡动作和声音比操作稍有滞后    经测试，除了Safari一直处于读取状态，无法打开页面之外，其余7款浏览器都可以正常打开，但搜狗和QQ浏览器播放音乐时没有声音。在动态效果方面，Chrome和IE9的音符滚动最流畅，其余6款浏览器都会有不同程度的卡顿现象。而在进行交互时，Chrome、IE9、搜狗和QQ浏览器的操作都很流畅，只可惜搜狗和QQ浏览器没有声音；而Firefox、Opera和傲游浏览器，鼠标滑过琴键时的动作和声音就不够连续。

[ 可先修改部分代码再运行查看效果 ]

评测背景及参评软件下载

如果现在还有哪款浏览器不支持HTML5，那真的可以说是弱爆了！HTML5作为当前最热门的网页技术，已经成为多数网页开发人员的首选，各大浏览器厂商也都对HTML5相当重视。虽然现在大部分浏览器都已经支持HTML5，但由于所使用的内核引擎不同，所以每款产品对HTML5的支持程度也会有所不同。

除HTML5之外，CSS3同样是网页制作中非常重要的一项技术，虽然可以实现的功能不及HTML5那么丰富，但CSS样式表是最基本的网页CSS3的应用范围更广、使用率更高。因此，对CSS3的支持程度，同样可以看出一款浏览器的性能优劣。

让效果说话 8款主流浏览器网页特效实测

为了让大家更直观的了解到究竟哪款浏览器对HTML5和CSS3有更好的支持，本次测试我们除了使用传统的测试工具进行跑分对比之外，还会通过两个网页实例，对当前主流的8款PC浏览器进行测试，效果好不好，一看就知道！

●参评软件下载

浏览器名称版本号下载地址

Google Chrome浏览器 20.0.1132.57 官方下载 ZOL高速下载

IE9浏览器 9.0.8112.16421 ZOL高速下载

Firefox浏览器 14.0.1 官方下载 ZOL高速下载

Opera浏览器 12.01 官方下载 ZOL高速下载

Safari浏览器 5.1.7 官方下载 ZOL高速下载

搜狗浏览器 3.2.0.4716 官方下载 ZOL高速下载

QQ浏览器 6.14 官方下载 ZOL高速下载

傲游浏览器 3.4.2.1000 官方下载 ZOL高速下载

●评测环境

评测环境

操作系统 Windows 7 专业版

CPU型号英特尔奔腾 B940 2.00GHz

内存容量 2GB DDR3

硬盘容量 500GB

显卡类型 NVIDIA GeForce GT 520M, 1GB独立显存

●测试项目说明

什么是HTML5

HTML5是用于取代1999年所制定的HTML4.01和XHTML 1.0标准的HTML标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。

什么是CSS3

CSS即层叠样式表（Cascading Stylesheet）。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。

HTML5工具测试：QQ浏览器胜出

html5test是被业界承认的一款浏览器HTML5性能测试工具，通过它可以测试出浏览器对各种HTML5标记的支持程度，包括文字、视频、音频、元素、表单、用户交互等等，并对每个项目进行打分，最后给出浏览器整体得分。

让效果说话 8款PC浏览器页面特效实测

HTML5测试工具打分

8款浏览器HTML5工具测试结果（满分500）：

浏览器名称得分

Google Chrome浏览器 414

IE9浏览器 138

Firefox浏览器 345

Opera浏览器 400

Safari浏览器 278

搜狗浏览器 393

QQ浏览器 476

傲游浏览器 419

从HTML5工具测试的得分结果可以看出，在满分为500的测试中，IE和Safari都没能突破及格线，Firefox和搜狗勉强过关，Chrome、Opera和傲游实力相当，QQ浏览器比较意外地获得了最好成绩476分。

那么，在接下来的实例测试中，这8款浏览器又会有怎样的表现？是否与测试工具中的得分情况一致呢？

HTML5实例测试：Chrome和IE9完胜

HTML5实例测试我们选择的是一个Web版钢琴应用，主要测试浏览器对HTML5声音、动态效果、用户交互的处理情况。用户可以从下拉列表中选择曲目播放，在播放的同时下方会有像劲乐团等弹奏游戏那样的条形音符向上滚动，也可以用鼠标点击钢琴键盘自己弹奏。

让网页说话 8款PC浏览器页面效果实测

HTML5钢琴实例

需要说明的是，在钢琴实例中测试交互能力时，我们采用的方法是用鼠标先从左到右，再从右到左从钢琴键盘上快速滑过，检查鼠标滑过时琴键动作是否流畅，是否每个音阶都能来得及发出声音。因为如果浏览器处理得不好，就会出现琴键动作的速度赶不上鼠标操作速度，从而出现动作和声音滞后的问题。

为了保证测试结果的公平性，在测试过程中所有浏览器选择的都是第64首曲目。

8款浏览器HTML5实例测试结果：

浏览器名称声音动态效果交互

Google Chrome浏览器有流畅流畅

IE9浏览器有流畅流畅

Firefox浏览器有略卡动作和声音比操作滞后

Opera浏览器有卡动作和声音比操作滞后

Safari浏览器无法打开页面

搜狗浏览器无略卡操作流畅，没有声音

QQ浏览器无略卡操作流畅，没有声音

傲游浏览器有略卡动作和声音比操作稍有滞后

经测试，除了Safari一直处于读取状态，无法打开页面之外，其余7款浏览器都可以正常打开，但搜狗和QQ浏览器播放音乐时没有声音。在动态效果方面，Chrome和IE9的音符滚动最流畅，其余6款浏览器都会有不同程度的卡顿现象。而在进行交互时，Chrome、IE9、搜狗和QQ浏览器的操作都很流畅，只可惜搜狗和QQ浏览器没有声音；而Firefox、Opera和傲游浏览器，鼠标滑过琴键时的动作和声音就不够连续。

让效果说话 8款主流浏览器网页特效实测

推荐特效