兼顧性能和兼容體驗:HTML5時代的瀏覽器全面測試

2020-12-16 中關村在線

  導言:自1981年IBM推出第一臺PC以來,桌面電腦以及隨後不斷湧現的筆記本、平板以及智慧型手機等設備越來越普及,而近20年來網際網路的出現和高速發展,則讓瀏覽器成為這些設備上使用率最高的應用程式之一。

  蒂姆·伯納斯-李(TimBerners-Lee)作為首位使用超文本來分享資訊的人,於1990年在歐洲粒子物理實驗室裡開發出首個網頁瀏覽器WorldWideWeb。1991年3月,蒂姆·伯納斯-李將這項發明介紹給了給他在CERN工作的朋友。從那時起,瀏覽器就和網際網路的發展綁定在了一起。隨著網頁語言、硬體性能的進步,瀏覽器所承擔的角色越來越從簡單的工具向平臺化轉變。

  無論桌面還是行動裝置,瀏覽器越來越成為用戶和數字信息之間的橋梁。儘管也有不少開發者為用戶提供更為垂直和單一化的應用程式作為信息獲取入口,但是作為生產力和信息獲取的綜合性工具,瀏覽器的普及程度、兼容性、便利性以及內容的覆蓋範圍,均超出其他垂直應用。

  目前,主流的瀏覽器主要有基於Trident引擎的IE、基於Gecko引擎的FireFox、基於Webkit引擎的Chrome和Safari,以及基於Presto引擎的Opera幾個大類,而其它瀏覽器多為基於這幾大引擎內核開發。面向眾多瀏覽器,消費者如何選擇?而評判一款瀏覽器優缺點的標準又是什麼?

  從大多數瀏覽器的宣傳語可以看出,瀏覽器的網頁響應速度成為大眾用戶的主要評判標準之一,這也是對瀏覽器性能最通俗的概括。作為數據內容和用戶之間交互的媒介,瀏覽器通過指定的協議將伺服器端特定格式的數據展現給用戶端,主要包括HTML頁面文檔、頁面程序、圖片/視頻等多媒體內容等。能否順應網頁標準的變革,正確高效的支持最新的HTML5技術和CSS3效果,也成為衡量瀏覽器優劣與否的重要指標。

  目前通用的瀏覽器性能測試工具和方法不少,包括蘋果推出的Sunspider、谷歌推出的V8、Mozilla推出的Kraken,以及第三方開發的AsteroidsHTML5、GUIMark2HTML5、GUIMark2Flash和多啦A夢CSS3等。通過這些測試工具和方法,不僅僅能夠測試不同瀏覽器的性能差異,也得以將瀏覽器對HTML5等全新網頁標準的兼容性進行對比,體現瀏覽器的綜合體驗表現。

  JavaScript測試組

  JavaScript是一種能讓網頁更加生動活潑的程式語言,開發者可以利用JavaScript十分容易的做出親切的歡迎訊息、漂亮的數字鐘、有廣告效果的跑馬燈及簡易的投票等多種網頁功能和特效,豐富網頁的用戶體驗。

  Sunspider是蘋果開發的一個JavaScript基準測試,這個測試僅使用JavaScript為核心,不加雜其他諸如DOM或其他瀏覽器API,用於比較不同瀏覽器對基準JavaScript的加載時間。在這個測試中,加載時間越短的瀏覽器越優秀。


 

  在SunSpiderJavaScriptBenchmark測試中,InternetExplorer10的加載速度最快,其次為Firefox16、Chrome24、InternetExplorer9、Safari5.3。

  GoogleV8是一款JavaScript腳本引擎,屬於Chrome的一部分。和其他腳本語言如PHP、Python等一樣,JavaScript也可以內嵌於瀏覽器程序,與編譯性語言如C、C++等交互,通過在瀏覽器程序中引入腳本解析器,可以使得運行效率更高。在GoogleV8測試中,總得分越高的瀏覽器越優秀。


 

  在該測試中,整合GoogleV8腳本引擎的Chrome24分數最高,其次依次為Firefox16、InternetExplorer10、Safari5.3、InternetExplorer9。此結果代表各個瀏覽器對於Google的JavaScript引擎的支持效率及加載速度。

  Kraken是Mozilla發布的JavaScript效率基準測試,Mozilla自家的Firefox瀏覽器針對Kraken進行了一定程度的優化,該測試分數越低越好。


 

  在KrakenJavaScriptBenchmark測試中,Chrome24、Firefox16領先,InternetExplorer10其次,Safari5.3與InternetExplorer9則落後。

  HTML5測試組

  AsteroidsHTML5具體測試瀏覽器使用HTML5編碼的2DCanvas渲染性能、DrawImage縮放、漸變透明度、構成、陰影的渲染,以及文字顯示加載速度等性能。這個測試體現HTML5網頁遊戲的性能,由中立機構開發,實用性和權威性相對較高。在這個測試中,最後總分越高,以及幀數越高的瀏覽器越優秀。


  Asteroids測試得分


  Asteroids測試幀數

  在AsteroidsHTML5測試中,IE10及IE9的分數、幀數排名最為靠前,Firefox16與Chrome24稍稍落後,Safari5.3分數性能較低。

  GUIMarkHTML5和Flash基準測試的目的,是通過模擬一個流動的股票趨勢圖表,測量瀏覽器相關API及大量使用筆畫效果等複雜的透明度填充,用於檢測瀏覽器對於不同形式網頁(HTML5和Flash)的性能,由中立機構開發,測試結果幀數越高的瀏覽器越優秀。


  GUIMarkHTML5


  GUIMarkFlash

  對於傳統Flash網頁,各個瀏覽器都能以較高的幀數呈現,其中Firefox16的幀數相對較低,Safari5.3和IE10則達到近60幀。對於HTML5頁面的表現各瀏覽器則有較明顯差異,IE10性能最好,其次是Chrome24與IE9類似,Firefox16性能相對較差。

  繪製多啦A夢,屬於CSS3兼容性能最常見的一種測試。主要用來測試瀏覽器對CSS3規範的支持情況。在該項測試中,將不同瀏覽器的特效錯誤數據進行統計,錯誤越少則兼容性越好。


 


 


 

  在該項測試中,IE10、Chrome24和Safari5.3對使用CSS3規範支持完全正常,IE9和Firefox16存在部分兼容性錯誤。

  測試總結

  從硬體加速來看,所有涉及播放幀數的測試中IE10、Chrome24和IE9都表現出較高水平,尤其是IE10全部保證在了25幀以上(人眼流暢體驗的最低幀率)。而從對JavaScript的加載速度上看,IE10、Chrome24和Firefox16性能較好。從綜合的JavaScript、CSS渲染加速、DOM渲染的測試來看,IE10和Chrome24性能較高。而在考察CSS3兼容性的多啦A夢測試中,IE10、Chrome24和Safari5.3表現出色。綜合上述測試結果,IE10在性能和兼容性方面的全面能力不容忽視。

  而在性能和兼容性之外,瀏覽器的用戶體驗還包括版本迭代支持。目前瀏覽器主要分為"保證舊版兼容"和"加速版本迭代"兩個主要陣營,其中Firefox和Chrome傾向於頻繁更替版本,版本迭代周期平均為6周,用戶需要不斷更新瀏覽器來適應新的使用環境並獲取最新的功能體驗。而IE和Safari則屬於長期兼容舊版的風格,通過這種方式來保證用戶體驗的穩定性和一致性。微軟IE集團副總裁DeanHachamovitch曾表示:"在IE10發布後,微軟將會提供10年的支持周期,就像Windows一樣。同時,微軟也會發布技術預覽版,開發人員和技術愛好者可以嘗試新的技術並提供反饋,這種方法讓IE技術團隊能夠在任何消費者受到威脅之前,解決安全性問題。"

  而對於全新HTML5標準的支持,微軟除了在IE10中添加原生的HTML5標準架構外,還聯合知名遊戲開發商推出HTML5網頁遊戲,如《切繩子》(CuttheRope:http://www.cuttherope.ie),《黑暗旅行》(ContreJour:http://www.contrejour.ie)等,來為用戶提供更加優質的HTML5豐富網頁體驗。

  附註:測試環境


 

  硬體:

  CPUInteli7930

  內存DDR32000MHz8GB

  主硬碟InterSSD320S80GB

  顯卡ATIHD58301GB

  顯示器解析度1860x1050

news.zol.com.cn true http://news.zol.com.cn/335/3359822.html report 5671   導言:自1981年IBM推出第一臺PC以來,桌面電腦以及隨後不斷湧現的筆記本、平板以及智慧型手機等設備越來越普及,而近20年來網際網路的出現和高速發展,則讓瀏覽器成為這些設備上使用率最高的應用程式之一。  蒂姆·伯納斯-李(TimBerners-Lee)作為首位使用超文本來...

相關焦點

  • 性能和兼容性 五款HTML5瀏覽器全面測試
    通過這些測試工具和方法,不僅僅能夠測試不同瀏覽器的性能差異,也得以將瀏覽器對HTML5等全新網頁標準的兼容性進行對比,體現瀏覽器的綜合體驗表現。  測試基本信息對於HTML5頁面的表現各瀏覽器則有較明顯差異,IE10性能最好,其次是Chrome 24與IE9類似,Firefox 16性能相對較差。  繪製多啦A夢,屬於CSS3兼容性能最常見的一種測試。主要用來測試瀏覽器對CSS3規範的支持情況。在該項測試中,將不同瀏覽器的特效錯誤數據進行統計,錯誤越少則兼容性越好。
  • HTML5的特殊標籤與IE瀏覽器的兼容
    >HTML5 的特殊標籤直接進入正題注釋標籤ruby: 行級元素 橫排顯示 試圖寫多個漢字和注釋IE瀏覽器的兼容問題除了上面提到的常用的標籤,在使用 HTML5 標籤的時候,還要注意瀏覽器的兼容問題。
  • 徹底換內核全面兼容Chrome!傲遊瀏覽器6體驗
    一直堅持使用自研Webkit內核的傲遊瀏覽器,現在終於換內核了!經過幾個月的測試,傲遊瀏覽器正式發布了「傲遊瀏覽器6」,這是一款官網稱為「讓區塊鏈應用和開發使用更簡單、便捷、用戶體驗更流暢的新科技瀏覽器」,並且換用了Chromium內核。那麼新版傲遊給用戶帶來了哪些變化呢?
  • Chrome瀏覽器突破兼容迎接「雲」時代
    Chrome瀏覽器突破兼容迎接「雲」時代 2011年12月08日 00:33作者:陳濤編輯:陳濤文章出處:泡泡網原創     泡泡網軟體頻道12月8日 談到兼容問題,國內用戶通常是以是否能訪問網銀等網站作為瀏覽器兼容性高的評判標準。
  • 怎麼理解Html5?Html5和html4相比有哪些優勢?怎麼學好html5?
    Html5(超文本標記語言)簡單理解是HTML(超文本標記語言)的第五次重大修改的版本,由WHATWG(Web Hypertext Application Technology Working Group中文全稱Web超文本應用技術工作組)和一些公司在html4.0基礎研究下一代html版本,2004年正式提出html5於2007正式被w3c接納
  • 讓IE瀏覽器支持HTML5標準的方法
    HTML5標準能為網頁帶來更高效更潔淨的代碼,只有微軟參與HTML5的設計工作,才能讓IE瀏覽器識別更多的新元素。HTML5標準預計是在2012年向全世界發布,雖然目前距他發布的日期還有三年左右的時間,但是我認為它距離我們並不是那麼遙遠,目前很多網站的設計和開發都是在採用HTML5的標準。
  • 六大雙核瀏覽器HTML5兼容性測試
    【IT168資訊】近日,360瀏覽器HTML5跑分第一的報導成為網民熱議的焦點,不少網民也紛紛使用自己的瀏覽器登陸HTML5Test網站查看測試分數。而HTML5這一科技名詞也在一夜之間人氣爆棚。有網友打趣道:「HTML5測試,元芳,你怎麼看?」
  • 老電腦運行Win7與Win10對比 差距最大居然是瀏覽器
    那Win10周年更新版和Win7相比,在運行office軟體的時候,會有很大差別嗎?我們使用最新的office 2016進行測試,在win10和win7系統下,不管是Word還是PPT,都幾乎是同時打開。
  • 夠給力 2010年兼容HTML5五大瀏覽器推薦
    在其影響下,網絡用戶可以擁有更為豐富的媒體體驗,享受海量的視頻和影音資源。很多開發者甚至將HTML 5視為Adobe Flash的替代品,因為蘋果的iOS還不允許在行動裝置上收看Flash。  Mozilla(IT168下載:http://download.it168.com/79/97/4022/index.shtml)  2010年Mozilla主要在1月份發布了Firefox(火狐)3.6,提供了支持HTML 5和改進的JavaScript的性能。
  • Win7大戰Win10流暢性測試:你猜誰贏了?
    那Win10周年更新版和Win7相比,在運行office軟體的時候,會有很大差別嗎?我們使用最新的office 2016進行測試,在win10和win7系統下,不管是Word還是PPT,都幾乎是同時打開。
  • 四大瀏覽器JavaScript性能/硬體加速測試
    新的Web標準將瀏覽器推向一個又一個極限,而這個極限在近些年不斷被打破,更快的瀏覽速度、更強大的內容渲染,而這正是用戶們希望從瀏覽器那裡獲取的。要說當前瀏覽器的熱點或者說是趨勢,那無疑是對硬體加速的支持以及更好的JavaScript引擎。
  • Android兩大常用瀏覽器七項性能全測試
    Android兩大常用瀏覽器七項性能全測試 2011-02-21 10:22:25     作者:Lucky 編輯:Lucky[爆料]>5、  HTML5測試和ACID3測試6、  皮膚設置以及橫豎屏7、  全平臺複製粘帖8、  特色功能測試結果:
  • 信創兼容連下6城!360安全瀏覽器與飛天誠信、立思辰、中科方德、三...
    近日,360集團與飛天誠信、三未信安共同宣布,360安全瀏覽器已與飛天誠信SJK1104-G智能密碼鑰匙ePass、三未信安智能密碼鑰匙和安全認證網關順利完成產品兼容性認證,整體運行穩定,性能卓越。至此,360安全瀏覽器通過產品兼容認證,將進一步滿足政企多端用戶對瀏覽器產品便捷、安全與可信的強訴求,增進國產瀏覽器在密碼算法支持上的完美適配。
  • 六大雙核瀏覽器HTML5兼容性測試
    近日,360瀏覽器HTML5跑分第一的報導成為網民熱議的焦點,不少網民也紛紛使用自己的瀏覽器登陸HTML5Test網站查看測試分數。而HTML5這一科技名詞也在一夜之間人氣爆棚。有網友打趣道:「HTML5測試,元芳,你怎麼看?」
  • 微軟開始測試Edge的IE兼容模式
    微軟針對基於Chromium核心的Edge瀏覽器正在面對企業級市場進行測試。該公司已開始在Edge的Dev版本中啟用企業功能,最引人注目的是Internet Explorer瀏覽器兼容模式。Edge瀏覽器增加IE兼容模式(圖片來源:SOPA)如果公司必須需要IE 11訪問舊網站,用戶可以嘗試該選項,而無需切換瀏覽器或放棄現在使用的瀏覽器。IT經理甚至可以創建一個自動翻轉到舊模式的站點列表。
  • mint-ui 分頁上拉加載和瀏覽器的兼容問題
    前言在開篇之前,如果你要使用 mint-ui作為 vue 的移動端 ui 框架的話,我給你的建議就是換個別的吧(原因就是這項目活躍度到冰點了),當然這絲毫不影響我們探究瀏覽器兼容那些事,積累經驗就是不放過任何機會。
  • Html5 App 測試方法總結
    Web App測試的部分方法,同時兼顧手機端的一些特性即可,下面幫大家總結下Html5 app 相關測試方法!需求設計測試:這一塊主要是從需求以及實現方法上,通過原型圖以及真實用戶體驗和用戶習慣,來進行;檢查需求的合理性以及是否有更好地實現方法等。把問題發現在源頭,減少後期因需求變更引起開發和測試的迭代成本。在需求階段即介入測試功能點的編寫和記錄,也符合儘早介入測試的原則。
  • 智慧辦公新體驗,華為全面屏性能輕薄本MateBook 13全新亮相
    【2020年1月17日,北京】華為全面屏性能輕薄本MateBook13全新發布。作為智慧辦公的性能標杆,華為MateBook13延續華為PC唯美、創新和智慧的基因,搭載第11代英特爾酷睿處理器,配以大內存、高速固態硬碟,全新升級的鯊魚鰭散熱系統,帶來卓越性能表現。
  • CSS hack瀏覽器兼容一覽表
    首頁 > 教程 > 關鍵詞 > CSS最新資訊 > 正文 CSS hack瀏覽器兼容一覽表
  • 必須知道的App測試和Web測試的區別
    設計測試用例時,依然都是依據邊界值分析法、等價類劃分等;多數採用黑盒的測試方法,來驗證業務功能是否得到正確的應用;需要檢查界面的布局、風格和按鈕等是否簡潔美觀、是否統一等;測試頁面載入和翻頁的速度從功能測試方面的來看,在流程和功能測試上是沒有區別的。系統測試和一些細節可能會不一樣。