性能報告之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 兼容性測試

 

以下是 Html5 權威測試網站對各大主流瀏覽器的測試結果，評分的分值代表了瀏覽器 對 Html5 特性的支持程度，分值越高兼容性越好，網站地址:http://html5test.com。

 

根據該權威網站的測試結果: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%以上。

 

 

為了測試瀏覽器的繪圖性能，使用微軟開發的性能測試網頁進行測試，該網頁能保證全 屏刷新，並能實時統計網頁渲染的 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系統下無法正常的渲染頁面，表現出卡頓，頁面顯示不全的現象。

•   IE11:650-700個對象，CPU利用率3%-3.5%，內存160MB。

• 結論:從繪圖性能角度考慮，首選 Firefox 瀏覽器，其次是 Chrome 瀏覽器。

   

  3.1.3. JA V ASCRIPT 腳本解析性能測試

   

  瀏覽器對腳本(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 瀏覽器。

 

3.2. 瀏覽器選型結論

 

綜合考慮瀏覽器在各方面的性能，Firefox 在繪圖渲染和腳本解析方面性能最高，結合 對 Html5 的兼容性考慮，本次測試過程選擇 Firefox 和 Chrome 兩種瀏覽器進行測試。本文 后面的測試結果均表示在 Firefox 和 Chrome 的最新版本下的測試結果。

 

4. CHART 選型

本次測試選取當前最流行的三種 CHART 進行對比，它們分別是 Anychart，Highcharts，Echarts。

 

4.1.CHART 功能和易用性對比

 

 

 

	易用性	社區活躍性	功能特性	費用
Echarts	 由中國人開發  有完善的中文文檔  使用方便	146000	 功能豐富  自帶三維特效  圖表種類多	免費、開 源

 

Anychart	 外國人開發  良好	767000	 功能豐富  支持flash  動效豐富	收費
Highcharts	 有中文網站  提供很多示例	258000	 功能豐富、強大  性能高	商業收費

 

 

 

4.2.CHART 性能對比

因無法精確計算出圖表控件渲染圖形所消耗的時間，只能使用計時器或者秒表大致估算出渲染時間，為保證測試的嚴謹性，測試結果統一使用“估算時間”進行比較。

 

4.2.1 8K 分辨率下的 CHART 繪圖性能

 

 

 

上圖是在相同分辨率下，三種圖表繪制不同數據量時的估算時間對比，橫軸表示數據量， 縱軸表示渲染的估算時間(單位:毫秒)。從圖中可以看出，當數據量越多時，echart 的 性能最好，Anychart 在 1 萬條數據時無法顯示，hightchart 在 1w 條數據時用時 25 秒顯示 出來。雖然實際使用時出現萬級數據量的情況較為少見，但我們也不得不考慮。

 

結論:在 8K 分辨率下，當數據量低於 1 萬時，Highchart 繪圖性能最好，Anychart 繪圖性 能最差;當數據量高於 1 萬時，EChart 繪圖性能最好。

 

 上圖是在相同分辨率下，三種圖表繪制不同的圖形個數的估算時間對比，橫軸表示圖形 個數，縱軸表示渲染時間(單位:毫秒)。從圖中可以看出，圖形個數對渲染時間有一定的 影響，當頁面中使用 10 個以上的圖形時，Highchart 性能最好，EChart 其次。

結論:在 8K 分辨率下，當圖形數量大於 10 個時，Highchart 繪圖性能最好，Anychart 繪圖 性能最差。

 

4.2.2 4K 分辨率下的 CHART 繪圖性能

 

 

上圖是在 4K 分辨率下，三種圖表繪制不同數據量的估算時間對比，橫軸表示數據量， 縱軸表示渲染時間。
結論:在 4K 分辨率下，當數據量低於 1 萬時，Highchart 繪圖性能最好，EChart 其次;當數據量超過 1 萬時，Highchart 和 Anychart 無法顯示。

 

 

上圖是在 4K 分辨率下，三種圖表繪制不同的圖形個數的估算時間對比，橫軸表示圖形 個數，縱軸表示渲染時間。
結論:在 4K 分辨率下，當圖形個數超過 10 個時，EChart 繪圖性能最好;Highchart 其次; Anychart 性能最差。

 

4.3.CHART 選型結論

 

根據 8K、4K 兩種分辨率下的圖表性能對比，綜合其他因素(易用性，是否收費等)考

 

慮，選擇 EChart 作為本次圖表測試控件。本次測試使用 EChart 的最新版本 3.7.2。

 

5. EChart 數據量測試

 

5.1  8K 分辨率下的數據量測試

 

  本測試在圖形工作站上進行，配置信息如下:

•   總分辨率:7680 x 3240

•   拼接屏:3x4，共12塊屏

•   單屏分辨率:1920 x 1080

•   EChart 圖表大小:1920 x 1080

 

 

5.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的分辨率下，單屏(1920x1080)的刷新時間隨EChart點數的增加而增加，呈 正相關趨勢。

 

 當單個EChart圖表的點數大於10000時，單屏頁面的刷新時間大於1.5秒。 在相同的點數下，EChart使用的曲線越多，性能越高，單屏刷新時間越短。

 

5.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.7183.46.4- ---
8條曲線 0.816 3.6 7.8 - - - -
9 條曲線	0.9163.98.5- ---
10條曲線 1.1 4.6 9.5 - - - -

 

 

 

以上測試時間為程序自動計算得到，實際全屏刷新時間應加上瀏覽器的渲染時間，渲染 時間隨 EChart 點數的增加而增加，當單個 EChart 圖表的點數大於 5000 點時，渲染時間在 1秒左右，因此上述時間加上瀏覽器的實際渲染時間才為最終的全屏刷新時間。

 

多次測試后發現，當EChart單個圖表的數據大於1萬時，整個頁面的加載速度非常慢， 因此當單個圖表的曲線數量大於 6 條，且單條曲線的點數大於 2000 時，未計算單屏的刷新 時間。
結論:

 

 在8K分辨率下，全屏(7680x3240)的刷新時間隨EChart點數的增加而增加，呈正 相關趨勢。

 

 當EChart單個圖表的的點數大於5000點時，全屏頁面的刷新時間大於5秒。 在相同的點數下，EChart使用的曲線越多，性能越高，全屏刷新的時間越短。

 

6. 動效測試

6.1  8K 分辨率下的動畫測試

 

當單個 EChart 圖表(1920 x 1080)的點數大於 2000 點時，在 8K 的分辨率下刷新單屏 無法顯示動畫效果。

 

當單個 EChart 圖表(1920 x 1080)的點數大於 500 點時，在 8K 的分辨率下刷新全屏， 無法顯示動畫效果。

 

 

 

 

 

7. 測試結論匯總

 

本次測試過程中所使用的程序框架均為當前最新版本，版本清單如下:

•   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點時，無法顯示動畫效果。

   

  8. 風險評估

   

  本次測試過程中未測試圖片資源，網絡請求等對WEB頁面的性能影響，當WEB頁面中使 用大量的圖片時，是否會對頁面刷新或圖表的重繪造成性能影響，不得而知。

   

  當前的硬件配置支持瀏覽器顯示 8K 的頁面較為勉強，頁面的開發者需要對 WEB 頁面的 性能點非常了解，否則對 WEB 頁面的性能優化將會耗費大量的開發時間。

   

  當整屏畫面的數據量大於 10 萬點時，頁面加載或刷新過程可能非常慢(大於 10 秒)， 對性能要求較高的項目需要慎重考慮。

• 可能遇到無法突破的性能瓶頸，尤其在動畫特效方面。

 

 

9. 參考資料

 

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