性能报告之HTML5性能测试报告
1. 引⾔
1.1. 编写⽬的
HTML5 作为当前“最⽕”的跨平台、跨终端(硬件)开发语⾔，越来越受到前端开发者的重视，⽆论是 PC 端还是当前“⽕热”的移动端，其前端开发⼈员的占⽐均越来越⾼。此消彼长，HTML5 开发者的增加⾃然导致 WPF / Flex / QT 等前端技术开发⼈员的缩减。为了解决前端“跨平台”的问题，并应对开发⼈员稀缺的窘境，我们迫切的需要选择或更换新的技术路线，⽽ HTML5 当为⾸选。本次测试⽬的是为了验证使⽤HTML5 作为前端技术路线，能否满⾜⼤屏(⾼分辨率，超过 8K)可视化的展⽰需求。
1.2. 测试背景
由于 WPF 技术越来越边缘化，开发⼈员越来越少，成本越来越⾼，为了以后产品的升级换代，我们迫切需要寻主流前端技术的替代品。⽬前来看HTML5技术可能是未来前端技术的主流，其对于移动端、桌⾯端、还有三维⽅⾯都具有良好的兼容性。
1.3. 测试⽬标
测试各⼤主流浏览器，当图形⼯作站的输出分辨率超过8K时能否正常的显⽰WEB页⾯，并流畅的显⽰动画效果。
测试各⼤主流浏览器对脚本语⾔(JAVASCRIPT)的解析性能。
测试各⼤主流浏览器对HTML5特性的⽀持程度。
综合考虑上述因素选择最佳浏览器进⾏测试，得出结论：能否满⾜⼤屏展⽰需求。
1.4. 专业术语
术语具体含义
HTML5超⽂本标记语⾔，以下简称 Html5
FPS
每秒页⾯刷新的帧数，低于 24 帧/秒将⽆法显⽰动画效果
2. 测试环境
为了保证测试结果的有效性，结合现有的硬件资源，选取三台机器作为本次测试的硬件环境，分别包含⼀台笔记本、⼀台台式机、⼀台图形⼯作站。
2.1. 笔记本配置
类型规格
内存 16GB
显卡 NVIDIA GTX1050 4GB
CPU INTEL I7-7700HQ 2.8GHZ 4 核⼼
分辨率 1920 x 1080(2K)
操作系统 Windows 10 专业版
2.2. 台式机配置
类型规格
内存 32GB
显卡 AMD WX5100 8GB
CPU INTEL I7-7700 3.6GHZ 4 核⼼
分辨率3840 x 2160(4K)
操作系统 Windows 10 专业版
2.3. 图形⼯作站配置
类型规格
内存 64GB
显卡 AMD FirePro W9000 6GB
CPU E5-2643 V4 3.4GHZ 6 核⼼
分辨率 7680 x 3240(8K)
操作系统 Windows 8.1 专业版
3. 浏览器选型
选择浏览器最主要的是选择浏览器内核，通常所说的浏览器内核是指渲染引擎 (Rendering Engine)，除此之外，浏览器内核还包含⼀个⾮常重要的部分——脚本(JS) 解析引擎，⼆者共同决定了⽹页加载和显⽰的性能。
⽬前主流的浏览器内核有四种，分别是:Trident、Webkit、Gecko、Presto。其代表浏览器分别为:Microsoft Edge / IE(微软浏览器)、Safari(苹果浏览器) / Chrome(⾕歌浏览器)、Firefox(⽕狐浏览器)、Opera(欧朋浏览器)。国产浏览器均是基于上述浏览器内核开发，本次浏览器选型中不考虑国产浏览器。另外，因 Windows10 操作系统并未普及，本次测试不包含 Microsoft Edge 浏览器。
说明：本次测试使⽤的浏览器均为当前最新版本。
3.1. 专业⽹站测试3.1.1. Html5 兼容性测试
根据该权威⽹站的测试结果:Chrome57 对 Html5 特性的兼容性最好；其后依次是Opera，Firefox，Edge，Ssfari。IE11 作为最后的 IE 版本，对 Html5 的兼容性只有 312 分，⼤量的Html5 新特性在 IE11 中并不⽀持。考虑到尽可能的提升⼤屏展⽰系统的性能和视觉效果，
浏览器对 Html5 特性⽀持的越多对开发帮助越⼤，越能节省⼯时。
根据该权威⽹站对各⼤主流浏览器的评分记录，随着时间的推移，各⼤浏览器对 Html5特性的⽀持越来越完善，因此我们可以合理的预
期:Html5 在未来⼏年可能会成为所有浏览器的⽀持标准，所有的 Html5 规范均会得到各⼤浏览器的⽀持。
根据该⽹站对各⼤浏览器对 Html5 的兼容性统计(评分)，我们可以得出结论:
Chrome57：对Html5的兼容性最好。
Opera45：对Html5的兼容性其次。
FireFox53：对Html5的兼容性第三。
Edge15：对Html5的兼容性第四。
Safari10.1：对Html5的兼容性第五。
IE11：对Html5的兼容性最差。
结论：从 Html5 的兼容性⾓度考虑，⾸选 Chrome 浏览器，其次是 Opera 浏览器。
3.1.2. Canvas 绘图性能测试
测试发现在禁⽤硬件加速的情况下，Chrome、Opera、Firefox、Safari、IE 均⽆法绘
制 7680 x 3240 分辨率的页⾯，浏览器表现出页⾯显⽰不全的现象，纯软件绘制时 CPU 利⽤率⾮常⾼，达到 80%以上。根据现场的图形⼯作站配置，显卡都具备硬件加速功能，所以本次测试均在启⽤硬件加速的条件下进⾏。
结论：未启⽤硬件加速时，所有浏览器均⽆法使⽤ Canvas 绘制 7680 x 3240 分辨率的页⾯，使⽤软件绘制时 CPU 利⽤率⾼达 80%以上。
保证刷新频率为 60FPS，测试结果如下:
Firefox:3300–3500个对象，CPU利⽤率8%-9%，内存150MB。
Chrome:2300-2500个对象，CPU利⽤率10%-12%，内存150MB。
Opera:2000–2100，CPU利⽤率10%-11%，内存200MB。
Safari：在Windows系统下⽆法正常的渲染页⾯，表现出卡顿，页⾯显⽰不全的现象。
IE11:650-700个对象，CPU利⽤率3%-3.5%，内存160MB。
结论：从绘图性能⾓度考虑，⾸选 Firefox 浏览器，其次是 Chrome 浏览器。
3.1.3. JA V ASCRIPT 脚本解析性能测试
Firefox浏览器：测试过程中CPU持续在8%-10%。
Chrome浏览器：测试过程中CPU持续在8%-10%。
Opera浏览器：测试过程中CPU持续在8%-10%。
IE浏览器：测试过程中CPU持续在9%-11%。
Safari：测试过程中CPU持续在8%-10%。
结论：从脚本解析性能⾓度考虑，⾸选 Firefox 浏览器，其次是 Chrome 浏览器。
3.2. 浏览器选型结论
综合考虑浏览器在各⽅⾯的性能，Firefox 在绘图渲染和脚本解析⽅⾯性能最⾼，结合对 Html5 的兼容性考虑，本次测试过程选择 Firefox 和Chrome 两种浏览器进⾏测试。本⽂后⾯的测试结果均表⽰在 Firefox 和 Chrome 的最新版本下的测试结果。
4. CHART 选型
本次测试选取当前最流⾏的三种 CHART 进⾏对⽐，它们分别是 Anychart，Highcharts，Echarts。
4.1.CHART 功能和易⽤性对⽐chrome浏览器最新版
易⽤性社区活跃性功能特性费⽤
Echarts  由中国⼈开发
有完善的中⽂⽂档
使⽤⽅便
146000
功能丰富
⾃带三维特效
图表种类多
免费、开源
Anychart
外国⼈开发
良好767000
功能丰富
⽀持flash
动效丰富
收费
Highcharts  有中⽂⽹站
提供很多⽰例
258000
功能丰富、强⼤
性能⾼
商业收费
4.2.CHART 性能对⽐
因⽆法精确计算出图表控件渲染图形所消耗的时间，只能使⽤计时器或者秒表⼤致估算出渲染时间，为保证测试的严谨性，测试结果统⼀使⽤“估算时间”进⾏⽐较。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。