介绍1.1．编写HTML5的目的，作为当前“最火”的跨平台、跨终端（硬件）开发语言，越来越受到前端开发者的重视，无论是PC端还是当前前端开发者所占的比例“热”的移动端越来越高。HTML5开发人员的增加自然导致WPF/Flex/QT等前端技术开发人员的减少。为了解决前端“跨平台”问题，应对开发者稀缺的困境，我们迫切需要选择或更换新的技术路线，而HTML5应该是首选。本次测试的目的是验证使用HTML5作为前端技术路线是否能够满足大屏（高分辨率，8K以上）的视觉显示要求。1.2.测试背景随着WPF技术越来越边缘化，开发人员越来越少，成本越来越高。为了未来的产品升级，我们迫切需要找到主流前端技术的替代方案。目前HTML5技术可能是未来前端技术的主流，对移动端、桌面端、三维方面都有很好的兼容性。1.3.测试目标?测试各大主流浏览器，当图形工作站输出分辨率超过8K时，能否正常显示WEB页面，流畅显示动画效果。?测试各大主流浏览器对脚本语言（JAVASCRIPT）的解析性能。?测试各大主流浏览器对HTML5特性的支持情况。?综合考虑以上因素选择最佳浏览器进行测试，得出结论：是否能满足大屏显示的需要。1.4.术语测试环境为了保证测试结果的有效性，结合现有的硬件资源，选择了三台机器作为本次测试的硬件环境，分别是笔记本、台式机和图形工作站。2.1.笔记本配置类型规格内存16GB显卡NVIDIAGTX10504GBCPUINTELI7-7700HQ2.8GHZ4核分辨率1920x1080(2K)操作系统Windows10专业版2.2。台式机配置类型规格内存32GB显卡AMDWX51008GBCPUINTELI7-77003.6GHZ4核分辨率3840x2160(4K)操作系统Windows10专业版2.3。图形工作站配置类型规格内存64GB显卡AMDFireProW90006GBCPUE5-2643V43.4GHZ6核分辨率7680x3240(8K)操作系统Windows8.1专业版浏览器选择选择浏览器最重要的是选择浏览器核心。浏览器内核通常被称为渲染引擎（RenderingEngine）。此外，浏览器内核还包含一个非常重要的部分——脚本（JS）解析引擎，两者共同决定了网页加载和显示的性能。目前主流的浏览器内核有四种，分别是：Trident、Webkit、Gecko、Presto。代表浏览器有：MicrosoftEdge/IE（微软浏览器）、Safari（苹果浏览器）/Chrome（谷歌浏览器）、Firefox（火狐浏览器）、Opera（欧鹏浏览器）。国产浏览器都是基于上述浏览器内核开发的，本次浏览器选型不考虑国产浏览器。另外，由于Windows10操作系统并不普及，本次测试不包含MicrosoftEdge浏览器。注：本次测试使用的浏览器均为最新版本。3.1.专业网站测试3.1.1。Html5兼容性测试以下是Html5权威测试网站对各大主流浏览器的测试结果。分数代表浏览器对Html5特性的支持程度。分数越高，兼容性越好，网址：http://html5test.com。根据本权威网站的测试结果：Chrome57对Html5特性的兼容性最好；其次是Opera、Firefox、Edge和Ssfari。作为IE的最后一个版本，IE11对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×3240的页面，浏览器出现页面显示不完整。纯软件绘图时CPU使用率很高，达到80%以上。根据现场图形工作站配置，显卡具有硬件加速功能，因此本次测试是在开启硬件加速的情况下进行的。结论：在不开启硬件加速的情况下，所有浏览器都无法使用Canvas绘制分辨率为7680x3240的页面，使用软件绘制时CPU使用率高达80%。为了测试浏览器的绘图性能，使用微软开发的性能测试网页进行测试。网页可以保证全屏刷新，可以实时统计网页渲染的FPS，比较主流浏览器在同等FPS条件下可以支持的对象数量，渲染的对象越多，浏览器的绘图性能就越好。网址：https://testdrive-archive.azu...保证刷新率为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.JAVASCRIPT脚本解析性能测试浏览器对脚本（JAVASCRIPT）的解析与解析无关。为了避免分辨率对解析结果的影响，实际测试时浏览器分辨率设置为：7680x3240。测试原理是执行多个复杂的算法，每个算法的代码行数为不同的。测试网址：http://chrome.360.cn/test/v8/...测试结果截图，在实际测试过程中，多次重复测试，多次重启浏览器测试。在同一台机器上的测试结果相差不大。最终得分越高，脚本解析性能越好。?火狐浏览器：测试过程中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下的测试结果。CHART选择本次测试选择了Anychart、Highcharts、Echarts这三种最流行的CHART进行对比。4.1.图表功能和可用性比较4.2。CHART性能比较由于无法准确计算出图表控件渲染图形所消耗的时间，只能通过定时器或秒表来粗略估计渲染时间。为保证测试的严谨性，测试结果统一采用“预估时间”进行比较。4.2.18K分辨率下CHART绘制性能上图是三种图表在相同分辨率下绘制不同数据量时的预估时间对比。横轴代表数据量，纵轴代表预估渲染时间（单位：毫秒）。从图中可以看出，当数据量较大时，echart的性能最好。anychart无法显示10000条数据，hightchart显示10000条数据需要25秒。虽然在实际使用中很少会出现上万的数据量，但是我们不得不考虑一下。结论：8K分辨率下，数据量小于10000时，Highchart绘图性能最好，Anychart最差；当数据量高于10000条时，EChart的绘图性能最佳。上图是三个图表在相同分辨率下绘制不同数量图形的预估时间对比。横轴代表图形数量，纵轴代表渲染时间（单位：毫秒）。从图中可以看出，图形数量对渲染时间有一定的影响。当页面使用超过10个图形时，Highchart表现最好，EChart次之。结论：8K分辨率下，当图形数量大于10时，Highchart绘图性能最好，Anychart绘图性能最差。4.2.24K分辨率下CHART绘制性能上图是三种图表在4K分辨率下绘制不同数据量的预估时间对比。横轴代表数据量，纵轴代表渲染时间。结论：4K分辨率下，数据量小于10000条时，Highchart绘图性能最好，EChart次之；当数据量超过10,000时，Highchart和Anychart无法显示。上图是三张图表在4K分辨率下绘制不同数量图形的预估时间对比。横轴表示图形数量，纵轴表示渲染时间。结论：4K分辨率下，当图形数量超过10个时，EChart绘图性能最佳；Highchart位居第二；Anychart的表现最差。4.3.CHART选择结论基于图表在8K和4K分辨率下的性能对比，并综合考虑其他因素（易用性、是否收费等），选择EChart作为本次图表测试的对照。本次测试使用最新的EChart3.7.2版本。EChart数据量测试5.1.8K分辨率数据量测试本次测试在图形工作站上进行，配置信息如下：?总分辨率：7680x3240?拼接屏：3x4，共12屏?单屏分辨率：1920x1080?EChart图表尺寸：1920x10805.1.1。单屏刷新测试以下为8K分辨率下单屏（1920x1080）EChart图表数据刷新测试时间，时间单位：毫秒。以上测试时间由程序自动计算，取多次测试结果的平均值作为最终记录结果。实际的单屏刷新时间应该加上浏览器的渲染时间。渲染时间随着点数的增加而增加。当单张EChart图表点数大于5000点时，渲染时间约为1秒。因此，上述时间加上浏览器实际渲染时间就是最终的单屏刷新时间。经过多次测试发现，当单个EChart图表的数据大于10000条时，整个页面的加载速度非常慢。因此，当单张图表的曲线数大于6，且单张曲线的点数大于2000时，不计算单屏数据。刷新时间。结论：?8K分辨率下，单屏（1920x1080）的刷新时间随着EChart点数的增加而增加，呈正相关趋势。?当单张EChart图表点数大于10000时，单屏页面刷新时间大于1.5秒。?相同点数下，EChart使用的曲线越多，性能越高，单屏刷新时间越短。5.1.2.全屏刷新测试下面是在8K分辨率下全屏（7680x3240）刷新所有EChart图表的测试时间，时间单位：秒。以上测试时间由程序自动计算。实际的全屏刷新时间应该加上浏览器的渲染时间。渲染时间随着EChart点数的增加而增加。当单张EChart图表点数大于5000点时，渲染时间约为1秒。所以上述时间加上浏览器实际渲染时间就是最终的全屏刷新时间。经过多次测试发现，当单个EChart图表的数据大于10000条时，整个页面的加载速度非常慢。因此，当单张图表的曲线数大于6，且单张曲线的点数大于2000时，不计算单屏数据。刷新时间。结论：?8K分辨率下，全屏（7680x3240）刷新时间随着EChart点数的增加而增加，呈正相关趋势。?EChart单张图表点数大于5000点时，全屏页面刷新时间大于5秒。?相同点数下，EChart使用的曲线越多，性能越高，全屏刷新时间越短。运动测试6.1。8K分辨率下动画测试当单张EChart图表（1920*1080）点数大于2000点时，8K分辨率单屏刷新时无法显示动画效果。当单张EChart图表（1920*1080）点数大于500点时，8K分辨率全屏刷新时无法显示动画效果。测试结论总结本次测试使用的程序框架均为最新版本，版本列表如下：?jquery:3.2.1?echart:3.7.2?firefox:56.0.1?chrome:62.0.3202.62?48.0版本本次测试得出以下结论：?在当前硬件性能下，使用Html5开发的WEB页面在8K分辨率下可以正常显示。?使用Html5作为WEB页面的开发语言时，使用的浏览器必须支持硬件加速，图形工作站必须配备支持加速的显卡。?在WEB页面使用EChart作为主图表控件时，单个图表控件的数据量最好不要超过5000点。当单个图表的点数超过2000点时，应关闭动画效果。?WEB页面应该使用局部刷新来更新数据，避免全屏刷新。?当页面元素较多时，应避免全屏动画。?受动画效果影响的区域越小，动画效果越流畅。?单张EChart图表点数超过2000点时，无法显示动画效果。风险评估本次测试未测试图片资源和网络请求对WEB页面性能的影响。当WEB页面使用大量图片时，是否会影响页面刷新或图表重绘的性能未知。目前的硬件配置支持浏览器显示8K页面。页面开发者相对难以对WEB页面的性能点有很好的了解，否则WEB页面的性能优化会消耗大量的开发时间。当整屏数据量大于10万点时，页面加载或刷新过程可能会很慢（10秒以上），对性能要求高的项目慎重考虑。你可能会遇到无法突破的性能瓶颈，尤其是在动画特效方面。参考资料1.如何在SVG和Canvas之间进行选择：https://msdn.microsoft.com/zh...2.如何为您的网站在Canvas和SVG之间进行选择：https://msdn.microsoft.com/zh。..3。介绍Chrome的硬件加速机制：http://www.chromium.org/devel...-in-chrome。4、从GPU的诞生说起：AMD统一渲染架构的回顾与展望：http://news.mydrivers.com/1/1...5、显卡全参数详解：http://vga.zol.com.cn/227/227...
