1. As the “most popular” cross-platform and cross-terminal (hardware) development language, HTML5 has been paid more and more attention by front-end developers. Whether it is PC terminal or the current “hot” mobile terminal, the proportion of front-end developers is getting higher and higher. The increase in HTML5 developers naturally leads to a decrease in the number of front-end developers such as WPF/Flex/QT. In order to solve the “cross-platform” problem of the front end and cope with the scarcity of developers, we urgently need to choose or change the technology route, and HTML5 should be the first choice. The purpose of this test is to verify whether the use of HTML5 as a front-end technology route can meet the requirements of large screen (high resolution, more than 8K) visual display. As WPF technology becomes more and more marginalized, there are fewer and fewer developers and higher and higher costs. In order to upgrade and upgrade products in the future, we urgently need to find alternatives to mainstream front-end technologies. At present, HTML5 technology may be the mainstream of the future front-end technology, it has good compatibility for mobile, desktop, and 3D aspects. 1.3. Test target saliently, testing all major browsers to see if they can display a WEB page and smooth animation when the output resolution of the GRAPHICS workstation exceeds 8K. Anyway, they test the ability of major browsers to parse a scripting language (JAVASCRIPT). Anyway, they test the HTML5 features supported by major browsers. Anyway, they take all these factors into account, testing the best browser, and decide whether it’s good enough for a large screen. 1.4. Technical terms

  1. Test environment In order to ensure the validity of the test results, combined with the existing hardware resources, three machines were selected as the hardware environment for this test, including a laptop, a desktop, and a graphics workstation. 2.1. Laptop Configuration Type Specifications Memory 16GB graphics card NVIDIA GTX1050 4GB CPU INTEL i7-7700HQ 2.8GHZ 4 Core resolution 1920 x 1080(2K) Operating system Windows 10 Professional

2.2. Desktop Configuration Type Specifications Memory 32GB Graphics card AMD WX5100 8GB CPU INTEL i7-7700 3.6GHZ 4 Core resolution 3840 x 2160(4K) Operating system Windows 10 Professional

2.3. Graphics workstation configuration

Type specifications memory 64GB graphics card AMD FirePro W9000 6 gb CPU e5-2643 V4 3.4GHZ 6 core resolution 7680 x 3240(8K) operating system Windows 8.1 professional

  1. When choosing a browser, it is important to select the browser kernel, which is usually referred to as the Rendering Engine. In addition, the browser kernel contains a very important part — the scripting (JS) parsing Engine, which together determines the performance of loading and displaying web pages. Currently, there are four major browser kernels :Trident, Webkit, Gecko, and Presto. The typical browsers are Microsoft Edge/Internet Explorer, Safari/Chrome, Firefox, and Opera. Domestic browsers are based on the above browser kernel development, this browser selection does not consider domestic browsers. In addition, the test did not include the Microsoft Edge browser because Windows10 is not widely used. Note: The browser used in this test is the latest version. 3.1.1. Html5 Compatibility Test The following are the test results of major mainstream browsers by authoritative Html5 testing websites. The score represents the degree of support of browsers for Html5 features. Website address :http://html5test.com. According to the authoritative website, Chrome57 is the most compatible with Html5 features. This is followed by Opera, Firefox, Edge, and Ssfari. IE11, the final version of Internet Explorer, scored 312 for Html5 compatibility, and many new Html5 features are not supported in IE11. In order to maximize the performance and visual effects of the large-screen display system, the more Html5 features the browser supports, the better it will help development and save time. According to the authoritative website’s ratings of major browsers, support for Html5 features is getting better and better over time, so it’s reasonable to expect that Html5 will become the standard for all browsers in the next few years, and that all Html5 specifications will be supported by all browsers. They’ve compiled a survey of Html5 compatibility ratings for various browsers, and we come to the conclusion that they anyway Chrome57: they’re the most compatible for Html5 anyway. Anyway Opera45: Html5 compatibility comes second. Anyway FireFox53: Html5 compatibility number three. Anyway Edge15: Html5 compatibility number four. Anyway Safari10.1: Html5 compatibility number five. Anyway IE11: The worst Html5 compatibility. Bottom line: Chrome is preferred for Html5 compatibility, followed by Opera. 3.1.2. Canvas Drawing Performance Test It was found that Chrome, Opera, Firefox, Safari and IE could not draw pages with 7680 x 3240 resolution when hardware acceleration was disabled, and the browser showed the phenomenon of incomplete page display. Pure software rendering CPU utilization is very high, reaching more than 80%. According to the configuration of the on-site graphics workstation, graphics cards are equipped with hardware acceleration function. Therefore, this test is performed under the condition that hardware acceleration is enabled. Conclusion: When hardware acceleration is not enabled, all browsers cannot use Canvas to draw 7680 x 3240 resolution page, and the CPU utilization of software drawing is as high as 80%.

In order to test the drawing performance of the browser, the performance test web page developed by Microsoft was used to test the web page, which can guarantee full screen refresh, and real-time statistics of the FPS of the web page rendering, comparing the number of objects that can be supported by all major browsers in the same FPS condition, the more objects rendered, the better the drawing performance of the browser. Website address :https://testdrive-archive.azu… Giving a guaranteed refresh rate of 60FPS, the test results are as follows: slim Firefox: 3300-3500 objects, 8%-9% CPU utilization, and 150MB memory. Slim Chrome:2300-2500 objects, 10%-12% CPU utilization, and 150MB memory. Anyway Opera: 2000-2100, 10%-11% CPU usage, 200MB memory. Anyway Safari: Windows fails to render a page, causing it to lag and display something incomplete. Anyway IE11:650-700 objects, CPU utilization of 3%-3.5%, and memory of 160MB. Conclusion: For drawing performance, Firefox is preferred, followed by Chrome. 3.1.3. JAVASCRIPT Script parsing Performance Test The browser parses JAVASCRIPT scripts regardless of resolution. To prevent resolution from affecting the parsing results, the browser resolution is set to 7680 x 3240 during the actual test. Testing principle is to perform more complex algorithm, each algorithm lines of code, test the website address: http://chrome.360.cn/test/v8/… In the actual test process, the test was repeated for several times and the browser was restarted for several times. The test results on the same machine had no significant difference. The higher the final score, the better the script parsing performance. Anyway Firefox browser: THE CPU continues at 8-10% for the test.



Anyway Chrome: the CPU keeps on running at 8-10% anyway during the test.



Anyway Opera browser: CPU continued at 8-10% during the test.



Anyway, Internet Explorer: THE CPU persisted at 9% to 11% during the test.



Anyway Safari: CPU continues at 8-10% during the test.

Bottom line: For script parsing performance, Firefox is preferred, followed by Chrome. Considering the performance of browsers in all aspects, Firefox has the highest performance in drawing rendering and script parsing. Considering the compatibility of Html5, two browsers, Firefox and Chrome, were selected for the test. The test results later in this article are for the latest versions of Firefox and Chrome.

  1. CHART selection In this test, the most popular three charts are selected for comparison, which are Anychart, Highcharts and Echarts respectively. 4.1.CHART function and ease of use comparison

4.2.CHART Performance comparison

Since it is impossible to accurately calculate the time consumed by the chart control to render graphics, only a timer or stopwatch can be used to roughly estimate the rendering time. In order to ensure the rigor of the test, the test results are compared using “estimated time”.

4.2.1 CHART plotting performance at 8K resolution

The figure above shows the estimated time of the three charts for different data volumes at the same resolution. The horizontal axis shows the amount of data and the vertical axis shows the estimated time of rendering in milliseconds. As can be seen from the figure, when the amount of data is larger, Echart has the best performance, Anychart cannot be displayed when there are 10,000 data pieces, and Hightchart takes 25 seconds to be displayed when there are 1W data pieces. Although it is rare to see 10,000 levels of data in actual use, we have to consider it.

Conclusion: At 8K resolution, when the data amount is less than 10,000, the performance of Highchart plotting is the best, and the performance of Anychart plotting is the worst. When the data volume is higher than 10,000, EChart mapping performance is the best.

The figure above is a comparison of the estimated time for the three charts to draw different numbers of graphs at the same resolution. The horizontal axis represents the number of graphs and the vertical axis represents the rendering time (in milliseconds). As can be seen from the figure, the number of graphs has a certain impact on the rendering time. When more than 10 graphs are used in the page, Highchart has the best performance, followed by EChart.

Conclusion: Under the resolution of 8K, when the number of graphs is more than 10, the performance of Highchart plotting is the best, and the performance of Anychart plotting is the worst.

4.2.2 CHART plotting performance at 4K resolution



The figure above shows the comparison of the estimated time of the three charts to draw different data volumes at 4K resolution. The horizontal axis represents the data volume and the vertical axis represents the rendering time.

Conclusion: Under 4K resolution, when the data amount is less than 10,000, Highchart has the best performance, followed by EChart. When the data volume exceeds 10,000, Highchart and Anychart cannot be displayed.



The figure above is the comparison of the estimated time for the three charts to draw different numbers of graphs at 4K resolution. The horizontal axis represents the number of graphs and the vertical axis represents the rendering time.

Conclusion: In 4K resolution, when the number of graphics is more than 10, EChart graphics performance is the best; Highchart secondly; Anychart has the worst performance.

4.3.CHART selection conclusion

According to the comparison of the chart performance under 8K and 4K resolutions and other factors (ease of use, whether to charge, etc.)

To consider, select EChart as the chart test control. The latest version of EChart, 3.7.2, was used for this test.

  1. EChart Data volume test 5.1. Data volume test at 8K resolution This test is performed on the graphics workstation, and the configuration information is as follows:  total resolution: 7680 x 3240  splicing screen: 3 x4, a total of 12 pieces of screen  single resolution: 1920 x 1080  every chart size: 1920 x 1080 5.1.1. Single screen refresh test The following is the test time to refresh single screen (1920 x 1080)EChart chart data at 8K resolution, time single bit: ms. The above test time is automatically calculated by the program, and the average of the test results is taken as the final record result. The actual single screen refresh time should be added to the browser’s rendering time, which increases with the number of points. When the number of points in a single EChart chart is greater than 5000, the rendering time is around 1 second, so the above time plus the browser’s actual rendering time is the final single screen refresh time. After several tests, it was found that when EChart’s single chart data was greater than 10,000, the entire page load was very slow, so when the number of curves in a single chart was greater than six and the number of points in a single curve was greater than 2000, the single screen refresh time was not calculated. Conclusion: at 8K resolution, the refresh time of a single screen (1920×1080) increases with the number of EChart points, showing a positive correlation. Anyway, when a single EChart chart’s points are greater than 10,000, the single-screen page takes more than 1.5 seconds to refresh. Anyway, the more curves EChart uses, the better the performance, and the shorter the single-screen refresh time for the same number of points. 5.1.2. Full Screen Refresh Test The following is the test time to refresh all EChart charts in full screen (7680 x 3240) at 8K resolution, time single bit: second. The above test time is automatically calculated by the program. The actual full-screen refresh time should be added with the browser’s rendering time. The rendering time increases with the increase of EChart points. This time plus the browser’s actual render time is therefore the final full screen refresh time. After several tests, it was found that when EChart’s single chart data was greater than 10,000, the entire page load was very slow, so when the number of curves in a single chart was greater than six and the number of points in a single curve was greater than 2000, the single screen refresh time was not calculated. Conclusion: at 8K resolution, the update time of a full-screen (7680×3240) increases with the number of EChart points, showing a positive correlation. Anyway, EChart’s full-screen page refreshes in more than five seconds when the points on a single chart exceed 5,000 points. Anyway, the more curves EChart uses, the better the performance, and the shorter the full-screen refresh time for the same number of points.
  2. Animation test at 6.1.8K Resolution When the number of points in a single EChart chart (1920 x 1080) is greater than 2000 points, refresh single screen at 8K resolution cannot display animation effect. When the number of points in a single EChart chart (1920 x 1080) is greater than 500, refresh full screen at 8K resolution and no animation will be displayed.
  3. All the program frameworks used in this test are of the latest version. The version list is as follows: Anyway jquery:3.2.1 anyway echart:3.7.2 anyway Firefox :56.0.1 anyway Chrome :62.0.3202.62 anyway 48.0 The test concluded the following: Anyway, WEB pages developed using Html5 will display at 8K resolution on current hardware capabilities. Anyway, to use Html5 as the language for developing WEB pages, the browser you’re using must support hardware acceleration, and the graphics workstation must have a graphics card that supports acceleration. Anyway, when using EChart as the main chart control for a WEB page, the data volume of a single chart control should be limited to 5,000 points, and animation should be disabled if a chart reaches 2,000 points. Anyway the WEB page should be updated with a local refresh rather than a full-screen refresh. Anyway, you should avoid doing full-screen animations when there are too many elements on your page. The smaller the area affected by the footed animation effect, the smoother the animation. Anyway, a single EChart chart fails to be animated when it passes 2,000 points.
  4. Risk Assessment The impact of image resources and network requests on the performance of WEB pages is not tested in this test. It is unknown whether the performance of page refresh or chart redrawing will be affected when a large number of images are used in WEB pages. The current hardware configuration supports the browser display of 8K pages is reluctant, page developers need to understand the WEB page performance points, otherwise the WEB page performance optimization will consume a lot of development time. When the amount of data on the whole screen is greater than 100,000 points, the page loading or refreshing process can be very slow (more than 10 seconds), which requires careful consideration for high performance projects. There may be performance bottlenecks that cannot be broken, especially when it comes to animation.
  5. References 1, SVG and Canvas how to choose: https://msdn.microsoft.com/zh…

How to choose between Canvas and SVG for your website:https://msdn.microsoft.com/zh…

3, introduce the Chrome hardware acceleration mechanism: http://www.chromium.org/devel… – in – chrome. 4, from the birth of GPU: AMD unified rendering architecture review and outlook: http://news.mydrivers.com/1/1… 5, graphics emperor, a graphics card all parameters: http://vga.zol.com.cn/227/227…