HTML5大屏版性能测试报告
1.编写目的
HTML5作为当前“最火”的跨平台、跨终端(硬件)开发语言,越来越受到前端开发者的重视,无论是PC端还是当前“火热”的移动端,其前端开发人员的占比均越来越高。此消彼长,HTML5开发者的增加自然导致WPF / Flex / QT等前端技术开发人员的缩减。为了解决前端“跨平台”的问题,并应对开发人员稀缺的窘境,我们迫切的需要选择或更换新的技术路线,而HTML5当为首选。本次测试目的是为了验证使用HTML5作为前端技术路线,能否满足大屏(高分辨率,超过8K)可视化的展示需求。
2.测试背景
由于WPF技术越来越边缘化,开发人员越来越少,成本越来越高,为了以后产品的升级换代,我们迫切需要寻找主流前端技术的替代品。目前来看HTML5技术可能是未来前端技术的主流,其对于移动端、桌面端、还有三维方面都具有良好的兼容性。
3.测试目标
- 测试各大主流浏览器,当图形工作站的输出分辨率超过8K时能否正常的显示WEB页面,并流畅的显示动画效果。
- 测试各大主流浏览器对脚本语言(JAVASCRIPT)的解析性能。
- 测试各大主流浏览器对HTML5特性的支持程度。
- 综合考虑上述因素选择最佳浏览器进行测试,得出结论:能否满足大屏展示需求。
4.专业术语
术语 |
具体含义 |
HTML5 |
超文本标记语言,以下简称Html5 |
FPS |
每秒页面刷新的帧数,低于24帧/秒将无法显示动画效果 |
5.测试环境
为了保证测试结果的有效性,结合公司的硬件资源,选取三台机器作为本次测试的硬件环境,分别包含一台笔记本、一台台式机、一台图形工作站。
5.1.笔记本配置
类型 |
规格 |
内存 |
16GB |
显卡 |
NVIDIA GTX1050 4GB |
CPU |
INTEL I7-7700HQ 2.8GHZ 4核心 |
分辨率 |
1920 x 1080(2K) |
操作系统 |
Windows 10专业版 |
5.2.台式机配置
类型 |
规格 |
内存 |
32GB |
显卡 |
AMD WX5100 8GB |
CPU |
INTEL I7-7700 3.6GHZ 4核心 |
分辨率 |
3840 x 2160(4K) |
操作系统 |
Windows 10专业版 |
5.3.图形工作站配置
类型 |
规格 |
内存 |
64GB |
显卡 |
AMD FirePro W9000 6GB |
CPU |
E5-2643 V4 3.4GHZ 6核心 |
分辨率 |
7680 x 3240(8K) |
操作系统 |
Windows 8.1专业版 |
6.浏览器选型
选择浏览器最主要的是选择浏览器内核,通常所说的浏览器内核是指渲染引擎(Rendering Engine),除此之外,浏览器内核还包含一个非常重要的部分——脚本(JS)解析引擎,二者共同决定了网页加载和显示的性能。
目前主流的浏览器内核有四种,分别是:Trident、Webkit、Gecko、Presto。其代表浏览器分别为:Microsoft Edge / IE(微软浏览器)、Safari(苹果浏览器) / Chrome(谷歌浏览器)、Firefox(火狐浏览器)、Opera(欧朋浏览器)。国产浏览器均是基于上述浏览器内核开发,本次浏览器选型中不考虑国产浏览器。另外,因Windows10操作系统并未普及,本次测试不包含Microsoft Edge浏览器。
说明:本次测试使用的浏览器均为当前最新版本。
6.1专业网站测试
6.1.1 HTML5兼容性测试
以下是Html5权威测试网站对各大主流浏览器的测试结果,评分的分值代表了浏览器对Html5特性的支持程度,分值越高兼容性越好,网站地址:http://html5test.com。
根据该权威网站的测试结果:Chrome57对Html5特性的兼容性最好;其后依次是Opera,Firefox,Edge,Ssfari。IE11作为最后的IE版本,对Html5的兼容性只有312分,大量的Html5新特性在IE11中并不支持。考虑到尽可能的提升大屏展示系统的性能和视觉效果,浏览器对Html5特性支持的越多对开发帮助越大,越能节省工时。
根据该权威网站对各大主流浏览器的评分记录,随着时间的推移,各大浏览器对Html5特性的支持越来越完善,因此我们可以合理的预期:Html5在未来几年可能会成为所有浏览器的支持标准,所有的Html5规范均会得到各大浏览器的支持。
根据该网站对各大浏览器对Html5的兼容性统计(评分),我们可以得出结论:
- Chrome 57:对Html5的兼容性最好。
- Opera 45:对Html5的兼容性其次。
- FireFox 53:对Html5的兼容性第三。
- Edge 15:对Html5的兼容性第四。
- Safari 10.1:对Html5的兼容性第五。
- IE11:对Html5的兼容性最差。
结论:从Html5的兼容性角度考虑,首选Chrome浏览器,其次是Opera浏览器。
6.1.2 Canvas绘图性能测试
测试发现在禁用硬件加速的情况下,Chrome、Opera、Firefox、Safari、IE均无法绘制7680 x 3240分辨率的页面,浏览器表现出页面显示不全的现象,纯软件绘制时CPU利用率非常高,达到80%以上。根据现场的图形工作站配置,显卡都具备硬件加速功能,所以本次测试均在启用硬件加速的条件下进行。
结论:未启用硬件加速时,所有浏览器均无法使用Canvas绘制7680 x 3240分辨率的页面,使用软件绘制时CPU利用率高达80%以上。
为了测试浏览器的绘图性能,使用微软开发的性能测试网页进行测试,该网页能保证全屏刷新,并能实时统计网页渲染的FPS,对比各大浏览器在相同FPS的条件下能支持的对象数量,渲染的对象越多,浏览器的绘图性能越好。
网站地址:https://testdrive-archive.azurewebsites.net/Performance/FishBowl/。
保证刷新频率为60FPS,测试结果如下:
- Firefox:3300 – 3500个对象,CPU利用率8% - 9%,内存150MB。
- Chrome:2300 - 2500个对象,CPU利用率10% - 12%,内存150MB。
- Opera:2000 – 2100,CPU利用率10% - 11%,内存200MB。
- Safari:在Windows系统下无法正常的渲染页面,表现出卡顿,页面显示不全的现象。
- IE 11:650 - 700个对象,CPU利用率3% - 3.5%,内存160MB。
结论:从绘图性能角度考虑,首选Firefox浏览器,其次是Chrome浏览器。
6.1.3JAVASCRIPT脚本解析性能测试
浏览器对脚本(JAVASCRIPT)的解析与分辨率无关,为避免分辨率对解析结果产生影响,实际测试过程中,浏览器分辨率均被设置为:7680 x 3240。测试原理是执行多个复杂的算法,每个算法代码行数不同,测试网站地址:http://chrome.360.cn/test/v8/run.html。
以下测试结果截图,实际测试过程中,反复测试多次,并多次重启浏览器测试,在同一台机器上测试结果相差不大,最终分值越高,脚本解析性能越好。
- Firefox浏览器:测试过程中CPU持续在8% - 10%
- Chrome浏览器:测试过程中CPU持续在8% - 10%
- Opera浏览器:测试过程中CPU持续在8% - 10%
- IE浏览器:测试过程中CPU持续在9% - 11%
- Safari:测试过程中CPU持续在8% - 10%
结论:从脚本解析性能角度考虑,首选Firefox浏览器,其次是Chrome浏览器
6.1浏览器选型结论
综合考虑浏览器在各方面的性能,Firefox在绘图渲染和脚本解析方面性能最高,结合对Html5的兼容性考虑,本次测试过程选择Firefox和Chrome两种浏览器进行测试。本文后面的测试结果均表示在Firefox和Chrome的最新版本下的测试结果。
7.CHART选型
本次测试选取当前最流行的三种CHART进行对比,它们分别是Anychart,Highcharts,Echarts
7.1 CHART功能和易用性对比
|
易用性 |
社区活跃性 |
功能特性 |
费用 |
Echarts |
|
146000 |
|
免费、开源 |
Anychart |
|
767000 |
|
收费 |
Highcharts |
|
258000 |
|
商业收费 |
7.2 CHART性能对比
因无法精确计算出图表控件渲染图形所消耗的时间,只能使用计时器或者秒表大致估算出渲染时间,为保证测试的严谨性,测试结果统一使用“估算时间”进行比较。
7.2.1 8K分辨率下的CHART绘图性能
上图是在相同分辨率下,三种图表绘制不同数据量时的估算时间对比,横轴表示数据量,纵轴表示渲染的估算时间(单位:毫秒)。从图中可以看出,当数据量越多时,echart的性能最好,Anychart在1万条数据时无法显示,hightchart在1w条数据时用时25秒显示出来。虽然实际使用时出现万级数据量的情况较为少见,但我们也不得不考虑。
结论:在8K分辨率下,当数据量低于1万时,Highchart绘图性能最好,Anychart绘图性能最差;当数据量高于1万时,EChart绘图性能最好。
上图是在相同分辨率下,三种图表绘制不同的图形个数的估算时间对比,横轴表示图形个数,纵轴表示渲染时间(单位:毫秒)。从图中可以看出,图形个数对渲染时间有一定的影响,当页面中使用10个以上的图形时,Highchart性能最好,EChart其次。
结论:在8K分辨率下,当图形数量大于10个时,Highchart绘图性能最好,Anychart绘图性能最差。
7.2.2 4K分辨率下的CHART绘图性能
图是在4K分辨率下,三种图表绘制不同数据量的估算时间对比,横轴表示数据量,纵轴表示渲染时间。
结论:在4K分辨率下,当数据量低于1万时,Highchart绘图性能最好,EChart其次;当数据量超过1万时,Highchart和Anychart无法显示。
上图是在4K分辨率下,三种图表绘制不同的图形个数的估算时间对比,横轴表示图形个数,纵轴表示渲染时间。
结论:在4K分辨率下,当图形个数超过10个时,EChart绘图性能最好;Highchart其次;Anychart性能最差。
7.2 CHART选型结论
根据8K、4K两种分辨率下的图表性能对比,综合其他因素(易用性,是否收费等)考虑,选择EChart作为本次图表测试控件。本次测试使用EChart的最新版本3.7.2。
8.EChart数据量测试
8.1 8K分辨率下的数据量测试
本测试在图形工作站上进行,配置信息如下:
- 总分辨率:7680 x 3240
- 拼接屏:3 x 4,共12块屏
- 单屏分辨率:1920 x 1080
- EChart图表大小:1920 x 1080
8.1.1单屏刷新测试
以下为8K分辨率下,刷新单屏(1920 x 1080)EChart图表数据的测试时间,时间单位:毫秒。
曲线数量 |
100点 |
500点 |
1000点 |
2000点 |
3000点 |
4000点 |
5000点 |
||
1条曲线 |
20 |
30 |
40 |
50 |
90 |
120 |
140 |
||
2条曲线 |
20 |
85 |
130 |
230 |
320 |
390 |
500 |
||
3条曲线 |
30 |
100 |
200 |
360 |
460 |
580 |
710 |
||
4条曲线 |
35 |
130 |
250 |
460 |
700 |
790 |
970 |
||
5条曲线 |
45 |
180 |
330 |
540 |
780 |
970 |
1200 |
||
6条曲线 |
48 |
200 |
360 |
- |
- |
- |
- |
||
7条曲线 |
57 |
230 |
430 |
- |
- |
- |
- |
||
8条曲线 |
68 |
250 |
490 |
- |
- |
- |
- |
||
9条曲线 |
68 |
290 |
560 |
- |
- |
- |
- |
||
10条曲线 |
82 |
330 |
616 |
- |
- |
- |
- |
以上测试时间为程序自动计算得到,取多次测试结果的平均值作为最终记录结果。实际单屏刷新时间应加上浏览器的渲染时间,渲染时间随点数的增加而增加,当单个EChart图表的点数大于5000点时,渲染时间在1秒左右,因此上述时间加上浏览器的实际渲染时间才为最终的单屏刷新时间。
多次测试后发现,当EChart单个图表的数据大于1万时,整个页面的加载速度非常慢,因此当单个图表的曲线数量大于6条,且单条曲线的点数大于2000时,未计算单屏的刷新时间。
结论:
- 在8K的分辨率下,单屏(1920 x 1080)的刷新时间随EChart点数的增加而增加,呈正相关趋势。
- 当单个EChart图表的点数大于10000时,单屏页面的刷新时间大于1.5秒。
- 在相同的点数下,EChart使用的曲线越多,性能越高,单屏刷新时间越短。
8.1.2 全屏刷新测试
以下为8K分辨率下,刷新全屏(7680 x 3240)所有EChart图表的测试时间,时间单位:秒。
曲线数量 |
100点 |
500点 |
1000点 |
2000点 |
3000点 |
4000点 |
5000点 |
||
1条曲线 |
0.15 |
1.2 |
1.8 |
2.6 |
3.8 |
4.3 |
4.6 |
||
2条曲线 |
0.2 |
1.3 |
2.4 |
4.6 |
7.4 |
9.5 |
12 |
||
3条曲线 |
0.36 |
1.5 |
2.8 |
6 |
7.4 |
9.5 |
12 |
||
4条曲线 |
0.45 |
1.9 |
3.7 |
7.1 |
9.75 |
13 |
15.6 |
||
5条曲线 |
0.55 |
2.6 |
4.8 |
9 |
12.9 |
17 |
21.6 |
||
6条曲线 |
0.65 |
2.9 |
5 |
- |
- |
- |
- |
||
7条曲线 |
0.718 |
3.4 |
6.4 |
- |
- |
- |
- |
||
8条曲线 |
0.816 |
3.6 |
7.8 |
- |
- |
- |
- |
||
9条曲线 |
0.916 |
3.9 |
8.5 |
- |
- |
- |
- |
||
10条曲线 |
1.1 |
4.6 |
9.5 |
- |
- |
- |
- |
以上测试时间为程序自动计算得到,实际全屏刷新时间应加上浏览器的渲染时间,渲染时间随EChart点数的增加而增加,当单个EChart图表的点数大于5000点时,渲染时间在1秒左右,因此上述时间加上浏览器的实际渲染时间才为最终的全屏刷新时间。
多次测试后发现,当EChart单个图表的数据大于1万时,整个页面的加载速度非常慢,因此当单个图表的曲线数量大于6条,且单条曲线的点数大于2000时,未计算单屏的刷新时间。
结论:
- 在8K分辨率下,全屏(7680 x 3240)的刷新时间随EChart点数的增加而增加,呈正相关趋势。
- 当EChart单个图表的的点数大于5000点时,全屏页面的刷新时间大于5秒。
- 在相同的点数下,EChart使用的曲线越多,性能越高,全屏刷新的时间越短。
8.1.3 动效测试
8K分辨率下的动画测试
当单个EChart图表(1920 x 1080)的点数大于2000点时,在8K的分辨率下刷新单屏无法显示动画效果。
当单个EChart图表(1920 x 1080)的点数大于500点时,在8K的分辨率下刷新全屏,无法显示动画效果。
9.测试结论汇总
本次测试过程中所使用的程序框架均为当前最新版本,版本清单如下:
- jquery:3.2.1
- echart:3.7.2
- firefox:56.0.1
- chrome:62.0.3202.62
- 48.0
本次测试得到如下结论:
- 在当前的硬件性能下,使用Html5开发的WEB页面能在8K的分辨率下正常显示。
- 使用Html5作为WEB页面的开发语言时,所使用的浏览器必须支持硬件加速,图形工作站必须配备支持加速的显卡。
- 使用EChart作为WEB页面的主要图表控件时,单个图表控件的数据量最好不超过5000点,当单个图表的点数超过2000点时,应禁用动画效果。
- WEB页面应采用局部刷新的方式进行数据更新,避免全屏刷新。
- 当页面元素较多时,应避免执行全屏动画。
- 动画效果所影响的区域面积越小,动画效果越流畅。
- 当单个EChart图表的点数超过2000点时,无法显示动画效果。
10.风险评估
本次测试过程中未测试图片资源,网络请求等对WEB页面的性能影响,当WEB页面中使用大量的图片时,是否会对页面刷新或图表的重绘造成性能影响,不得而知。
当前的硬件配置支持浏览器显示8K的页面较为勉强,页面的开发者需要对WEB页面的性能点非常了解,否则对WEB页面的性能优化将会耗费大量的开发时间。
当整屏画面的数据量大于10万点时,页面加载或刷新过程可能非常慢(大于10秒),对性能要求较高的项目需要慎重考虑。
可能遇到无法突破的性能瓶颈,尤其在动画特效方面。
11.参考资料
1、 SVG与Canvas如何选择:https://msdn.microsoft.com/zh-cn/library/gg193983
2、如何为您的网站在Canvas和SVG之间做出选择:https://msdn.microsoft.com/zh-cn/ie/hh377884/。
3、介绍Chrome的硬件加速机制:http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome。
4、从GPU诞生说起:AMD统一渲染架构回顾及展望:http://news.mydrivers.com/1/197/197710_all.htm
5、显卡帝详解显卡全参数:http://vga.zol.com.cn/227/2278852_all.html#p2279101
HTML5大屏版性能测试报告相关推荐
- 央视影音大屏版apk下载_央视影音大屏版
软件介绍 央视影音大屏版是一款非常好用的电视直播软件,该软件收录了几千个节目频道,播放内容都非常的精彩,还支持时移功能,央视影音大屏版更新的电视节目内容你都能第一时间看到,感兴趣的朋友快来下载吧! 软 ...
- 微博html5版什么手机,搜狐微博推出全新手机HTML5触屏版
近日,搜狐微博全力推出手机微博触屏版(w.sohu.com/m),该版采用最新HTML5技术,全新的视觉设计,让你在网页上享受超越客户端的用户体验. HTML5是一种技术标准,被业界视为未来移动应用的 ...
- 央视影音大屏版apk下载_央视影音下载安装-央视影音 安卓版v7.0.4-PC6安卓网
Cbox央视影音收录了各地方台和央视节目,在这里你能找到你想看到的所有电台,当然除了那些收费的.运行流畅,界面看上去大方,用起来很方便. 功能介绍 1.全新界面 更美观,更简洁,更易用,看法从此大不同 ...
- 搜狐html5,搜狐微博推出全新手机HTML5触屏版
近日,搜狐微博全力推出手机微博触屏版(w.sohu.com/m),该版采用最新HTML5技术,全新的视觉设计,让你在网页上享受超越客户端的用户体验. HTML5是一种技术标准,被业界视为未来移动应用的 ...
- 央视影音大屏版apk下载_央视影音TV版
央视影音TV版是多家卫视直播最全的应用,这里有海量的高清视频,包括cctv5直播等众多受欢迎的视频内容,还可以瞬间回看,预定未开始的节目.方便用户收看各大电视台节目,还有电视剧和电影动画点播等.华军软 ...
- 央视影音大屏版apk下载_cboxtv_2.2.0(央视影音大屏版).apk
文件列表 文件名 校验码 AndroidManifest.xml 0x779a5df0 META-INF/CERT.RSA 0x1ac0014d META-INF/CERT.SF 0x7c116f97 ...
- iPad Pro要大升级!14寸巨屏,性能比肩笔记本,售价起飞...
终于等到你,2022款新iPad Pro! 话说继iPad Pro 2018之后,高端iPad系列很久都没有迎来大幅升级了,虽然iPad Pro 2021用上了自研M1芯片,性能飞速提升,但对许多用户 ...
- 聊一款昨天新发售的大屏笔记本
文章目录 前言 一.配置如下: 二.优缺点如下: 优点! 缺点! 三.升级建议 四.购买建议 屏幕方面 接口方面 续航方面 噪音方面 五.散热分析 总结 前言 不知道有多少人关注了7月5日晚上的荣耀发 ...
- 手机qq2008触屏版_天猫精灵 CC10 电池版体验:只卖 799 元的平板电脑,比 iPad 更适合老人小孩...
现阶段的触屏音箱功能上已经十分丰富,基本不需要再考虑有用无用.值不值的问题. 很多新的产品形态在火爆的时候,会有无数的声音质疑其用处,而当市场上争论的声音销声匿迹的时候,恰恰是它真正走进人们生活的那一 ...
最新文章
- CSS那些事笔记(一入门)
- python文档字符串_结构化的python文档字符串,对IDE友好
- 从字符串中删除所有出现的char
- 1. Leetcode 1. 两数之和 (数组-双向双指针)
- php中source,PHP中source #N问题的解决方法
- 【BZOJ2655】calc,dp+拉格朗日插值法
- 让我们发展纯粹的金钱关系吧,那多美好(转)
- 剑指offer面试题[24]-二插搜索树的后序遍历序列
- Riverbed实现云内外的端到端可视化
- 字符串的迷之算法——KMP,AC自动机,后缀数组
- opencv库函数学习:Rect函数
- matlab设计椭圆低通滤波器,基于MATLAB的椭圆数字低通滤波器设计.doc
- 什么是CPU密集型?什么是IO密集型?
- bzoj4399: 魔法少女LJJ(线段树合并)
- JSR303 数据效验
- android su 程序,android 开发 制作自己的su
- postfix中间件--Amavisd-new--反垃圾和反病毒配置
- 一文教你如何快速实现声音识别
- Day28-Linux入门01
- 在sql执行横表转换过程中,出现特殊字符‘∞’
热门文章
- 拼多多拼团小程序开发
- mvc 截取上传图片做头像,自动生成不同小尺寸缩略图
- 数美科技CEO唐会军获聘中国演出行业协会第二届内容评议委员会专家
- wargame.kr 大部分writeup
- OSError: image file is truncated与PIL.UnidentifiedImageError: cannot identify image file的解决方案
- LeetCode:面试题 17.17. 多次搜索
- Latex 常用数学符号
- 【死磕NIO】— 阻塞、非阻塞、同步、异步,傻傻分不清楚
- 今天看完“玉观音”了
- 四川大学计算机导论考试,四川大学计算机导论期末例题.doc