热门关键字:
产品动态
当前位置 : 首页 > 产品动态

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

来源:本站 作者: 时间:2018-10-22 06:31:17 点击:

  新闻股票基金期货期指黄金外汇债券理财银行保险信托房产汽车科技股吧论坛博客微博视频专栏看点问达培训

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

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

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

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

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

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

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

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

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

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

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

  CSS3 Selectors Test是一款专业的CSS3测试工具,启动它会自动运行一个小的测试,共包含574个测试项。点击结果中列出的每个项目,可以查看相应代码。另外,由于CSS3 Selectors Test不能模拟用户操作,所以测试项目中不包括选择、悬停等需要交互的项目。

  CSS3实例测试我们选择的是多啦A梦测试,页面左侧看到的多啦A梦并不是一张图片,而是用纯CSS代码构建的图形,没有一张图片,专门用于测试各浏览器对CSS3的支持效果。在这项测试中,如果浏览器对CSS3的处理效果好,页面上就会出现一个有立体效果,且眼球每隔10秒会动一下的多啦A梦。

  总体来说,Google Chrome浏览器无论跑数据还是测实例,在HTML5和CSS3这两方面都有不错的表现;IE9在HTML5的数据测试中分数较低,但实例测试效果很好,在CSS3测试中则正好相反;Firefox、Opera和Safari浏览器在两项测试中都没有表现出太多优势;搜狗和QQ浏览器对HTML5声音标记处理有所缺失,因此在HTML5实例测试中表现不佳,但在CSS3实例测试中的表现不错,图形显示和动态效果都能很好的表现出来;傲游浏览器在这次测试中的成绩则处于中等水平。

  本次测试虽然项目不多,但摆脱了以往单纯“堆数据”的测试方法,通过两个实例对8款主流浏览器的HTML5和CSS3支持效果进行了最直观的对比。从测试结果中可以看出,实例测试的效果与数据测试之间还是存在较大差异的,这除了与浏览器自身性能有关之外,与网页本身的代码编写也有一定关系,因为网页开发者并不一定会在所有浏览器中进行测试。

  第1页:评测背景及参评软件下载如果现在还有哪款浏览器不支持HTML5,那真的可以说是弱爆了!HTML5作为当前最热门的网页技术,已经成为多数网页开发人员的首选,各大浏览器厂商也都对HTML5相当重视。虽然现在大部分浏览器都已经支持HTML5,但由于所使用的内核引擎不同,所以每款产品对HTML5的支持程度也会有所不同。除HTML5之外,CSS3同样是网页制作中非常重要的一项技术,虽然可以......

最新评论共有 0 位网友发表了评论
推荐文章