(本文由CocoaChina翻譯自跨平臺移動Web開發框架Sencha的博客,作者RossGerbasi。)
我們和其他人一樣,對于前不久蘋果iOS8的發布感到十分激動。在做這個測試的時候,我們手中只有iOS8GA版,但我們想最快的將測試結果提供給全球的web開發者,所以這個測試結果和iOS8正式版的結果有所出入并不出奇,但是現在我們只想盡快的將benchmark和各種測試跑起來,并且分享我們發現的結果。
本文記錄了在iOS8成為蘋果設備基準的現在,對其進行了當前版本HTML5的性能測試結果,和測試發現的技術問題。
iOS8新特性將促進HTML5開發
讓我們先來看看升級iOS8的一些新特性。
這些特性對促進HTML5開發很有幫助,我們挑選出其中重要的幾條:
WebGL3DGraphics
3D圖形的硬件加速支持,對web開發者來說這無疑是一個非常重要的特性。我們很想看到這條特性在游戲中有更多的應用,不過它還有更多的其它用法,特別是在動畫和變換的領域里。想快速了解它能干什么,點擊WebGLSpriteParticleDemo
CSSShapes
能夠控制文字層的形狀,來形成更為多變的文字布局。
HTML模板
Web組件的基礎元素之一。它讓我們離真正的Web模塊化和更多潛在應用又近了一步,我們將更少的依賴polyfill。
導航/更精確的計時API
多數人可能用不到,但對于測試來說是非常贊的特性。
IndexedDB
HTML5的WebSQL標準已不再維護并很可能在將來被廢棄,使用IndexedDB將擁有很好的跨平臺支持(iOS、Android、ChromeforAndroid、Safari、IE移動版等)。
SVG片段標示符
這個特性隱藏在神秘的名字下面,但相信我們,它是一個非常強大的特性。它能構建非常強大的向量化***表。這不僅在web游戲中非常重要,在動態圖標和其他動態UI組件里也非常重要。
作為移動web開發者,你可能已經習慣于以最新瀏覽器特性為目標而開發了,我們知道蘋果的升級系統能讓iOS8迅速普及,如果你的應用專門為iOS而開發,那么你現在就能利用像IndexedDB、SVG片段標示符等新特性了。如果你想兼容iOS7或者進行跨平臺開發,你能使用SenchaTouch內建的系統探測來利用這些特性。SenchaTouch讓你能現在就使用這些新特性并逐步的淘汰舊代碼。
全新的WKWebView
隨著iOS8的發布,我們同時痛并快樂著,因為iOS8帶來了一些碎片化的問題。iOS8里面內建了兩個原生的webview,靠前個是我們知道并喜愛的UIWebView,它因為兼容性而保留下來,但幸運的是,蘋果并沒有簡單的將舊iOS7UIWebView裝進iOS8里,而是升級了WebKit核心模塊并發布了全新的WKWebView。WKWebView將被hybridapp所使用。它使用了NitroJS引擎,經我們測試至少比UIWebView的性能高四倍。這將很有可能引領hybridapp獲得巨大成功。不過,目前它還有一些影響所有人的重***ug,下面我們將談到這一點。
不過好消息是從Web開發的遠景看來,全新的高性能WKWebView向著正確的方向走了一大步。即使現在Javascript已經很少成為應用瓶頸,更典型的問題是動畫和DOM重繪上,我們相信隨著對DOM核心的實質化的改進,WKWebView將幫助SenchaTouch應用在性能上看到巨大的改進。
性能的全面提升
對版本升級的性能測試總是必要的,并且這一次我們發現了一些更有趣的結果??傮w上來說,升級到iOS8看上去對所有用戶都有利的。這里有一些指標在iOS8里稍微下降了,如Base64和代碼調用。讓我們來仔細的分析一下這些圖表,來弄清楚它們都代表什么。
注意:所有測試都在第5代iPodTouch上進行,旨在找出iOS開發所需要面臨的性能下限。
Source:http://octane-benchmark.googlecode.com/svn/tags/v1/index.html
這些測試里只有CodeLoad指標iOS8的表現略低,CodeLoad是評價JS引擎在加載非常大的JS文件后需要花多長時間開始運行,這對于Closure和jQuery這樣的庫來說是需要引起注意的。
Source:http://dromaeo.com/?dom
實際的測試表現比圖表上的還要好,DomQuery的巨大提升掩蓋了其他幾項其實也是提升很大的,其中Attributes提升122%、Modification提升65%、DomTraversal提升48%,而DomQuery的提升則是驚人的308%。
Source:http://dromaeo.com/?cssquery
CSS選擇器的測試,iOS8也獲得了全面的提升,ExtJS在簡單的移到iOS8Safari之后即獲得126%的時間提升。
需要注意的是CSS選擇器使用的是ExtJS3.x版本,而現在ExtJS5.x版本已經發布,所以獲得的提升還要更大。
Source:http://dromaeo.com/?dromaeo
這里Base64和CodeEval性能表現有了微小的下降,不過就像前面所說的,相對于對于JS引擎的效率來說,GPU合成才是更值得關注的,而且其他幾項的提升也都非常大。
Source:http://ie.microsoft.com/testdrive/performance/fishietank/
這個測試結果已無需多說,它表明iOS8在Canvas方面有非常大的改進。
Source:http://dromaeo.com/?cssquery
注意這個測試時iOS8里面兩個webview之間測試,WKWebView全面勝出。
Source:https://www.webkit.org/perf/sunspider/sunspider.html
Sunspider測試的結果相差不大。
Source:http://html5test.com/
HTML5測試表明了iOS8在HTML5支持方面也有了明顯提升,我們來簡單的分析一下其中的重要結果:
·無縫的iFrame從iOS8里面移除
·IndexedDB被添加到iOS8Safari和WKWebView中
·IndexedDB目前不支持iOS8UIWebView和Homescreenapp(設置主屏快捷方式的webapp)
·ObjectstoreArrayBuffer已經在iOS8Safari和WKWebView中生效(但是HTML5測試沒能測出來,要不然測試得分將達到440分)
·ObjectstoreArrayBuffer不支持iOS8UIWebView和Homescreenapp
·WebGL3DGraphics被添加到iOS8Safari、WKWebView、UIWebView和Homescreenapp中
·UIWebView、WKWebView和Homescreenapp的userAgent是完全一致的
盡管蘋果為了保持WKWebView、UIWebView和Homescreenapp有同一水平的可用性而做了不少工作,但其中的差異仍然造成了一些困擾,由于三者的userAgent是一樣的,開發者需要自己去標示這三者并小心的使用新特性。
Bug說明
我們都知道沒有軟件的發布沒有伴隨著bug的,iOS8也不例外。經過探索我們發現了3個主要問題,將影響大多數HTML5開發者。
WKWebView無法加載本地文件
測試中WKWebView無法讀取本地文件,這讓使用PhoneGap/Cordova開發,能提供離線功能的應用失去了用武之地。比如,它不能加載本地的index.html,但訪問Web
網站的功能是好的。
XHR本地文件訪問
在WKWebView中XHR無法將本地文件發送到Web,比如使用AJAX來提交系統圖庫中的圖片將出現錯誤。
Homescreenapp在鎖定/喚醒后失去計時功能
WKWebView中Homescreenapp在鎖定喚醒之后帶計時功能的函數將失效,如setTimeout、requestAnimationFrame等。
不過好消息是這些Bug僅影響WKWebView應用,如果使用iOS8UIWebView則不會受到影響。
即將到來
總之,我們非常高興的看到iOS8的發布,以及蘋果在iOS8上表明的對HTML5的態度,因為性能改進和新特性將極大的提升用戶在iOS8上使用WebApp的體驗。
Source:caniuse.com
如果我們看得更遠的話,我們會發現iOS8和ChromeforAndroid在一些卓越的新特性上有許多交叉,ChromeforAndroid其實已經部分的支持了WebGL3DGraphics但一些舊的機型沒有能力來驅動它。
總結
對Web開發者來說,iOS8無疑是一個令人激動的發布,它擁有激動人心的新特性和重大的性能改進,將極大的促進HTML5跨平臺開發。企業
網站建設常見問題