HTML5大屏版性能測試報告（瀏覽器性能測試 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特性的支持程度，分值越高兼容性越好，網站地址：HTML5test - How well does your browser support HTML5?。
根據該權威網站的測試結果：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的條件下能支持的對象數量，渲染的對象越多，瀏覽器的繪圖性能越好。
網站地址：HTML5 Fish Bowl
。
保證刷新頻率為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。測試原理是執行多個復雜的算法，每個算法代碼行數不同，測試網站地址：V8基準套件測試。
以下測試結果截圖，實際測試過程中，反復測試多次，并多次重啟瀏覽器測試，在同一臺機器上測試結果相差不大，最終分值越高，腳本解析性能越好。
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
功能豐富
支持flash
動效豐富
收費
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如何選擇：SVG vs canvas: how to choose (Windows) | Microsoft Docs
2、如何為您的網站在Canvas和SVG之間做出選擇：如何為您的網站在 Canvas 和 SVG 之間做出選擇 | Microsoft Docs。
3、介紹Chrome的硬件加速機制：http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
。
4、從GPU誕生說起：AMD統一渲染架構回顧及展望：從GPU誕生說起：AMD統一渲染架構回顧及展望-AMD,ATI,統一渲染,顯卡,架構,回顧,展望-驅動之家
5、顯卡帝詳解顯卡全參數：http://vga.zol.com.cn/227/2278852_all.html#p2279101
HTML HTML5 云性能測試服務 CPTS
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
