iOS7的Bug和缺陷問題匯總+性能測試

iOS7正式版發布以后，我們第一時間進行了HTML5測試。iOS的每個版本我們都保持著高度關注。但是此次得出測試結果讓我們頗為失望。國外的一些設計師也在九月份給出了相關的點評《八位優秀設計師評iOS 7：新鮮有余 亮點不足》

盡管iOS7在SVG和JavaScript上的表現令人印象深刻，但是iOS7有很多Bug和缺陷，讓人感覺這個"正式版"一點也不"正式"，各種小毛病多得像是測試版一般。很糟糕，所幸的是，沒有Android 3瀏覽器那么糟糕。我們建議HTML5標準暫定更新一段時間，直到iOS7修復了這些問題。

一、iOS7的Bug和缺陷

Max Firtman寫過一篇文章，簡短的陳述了iOS在網絡操作中的一些缺陷—— bugs and quirks in iOS 7's web runtime. 如果你還沒讀過這篇文章，那么推薦你閱讀一下。iOS7主要有量大缺陷。

第一，WebSQL問題："使用 WebSQL API ，當創建的數據庫大于 5Mb 時，會有DOMException問題。先前的版本，用戶許可限制是 50Mb。而此版本 ，容量僅僅是 5Mb ，超過5Mb后，用戶將收到許可對話框。盡管用戶給予權限占用更多容量，但是用戶會對這種反復彈出的對話框感到厭煩，算是個大問題。【根據紐約時報的 tarobomb ，當你首次創建數據庫，如果請求容量小于 5Mb，然后想存更多數據（大于 50Mb）時，合適的確認框出現（首次 10Mb，然后 25Mb，最終 50Mb），這樣你就能儲存超過 5Mb 的數據。】"，這個問題很影響用戶體驗，繼續解決方法。

第二，"保存到主屏幕"(Save to Home Screen)這個功能完全不好用。當4款以上的應用保存到主屏幕上后，該功能的"剪貼板"/存儲槽(Save Slots)會進入一種循環復制的狀態，必須重啟手機才能清空該功能的存儲槽。【如果安裝超過4個 app ，主屏會發生奇怪的事情，比如一個 webapp 取代了另一個。你會看到同樣 webapp 的副本。同一時間打開不同的 webapp 時也發生同樣的事情。在你的設備試試訪問 】

還有的問題是：

1 外部uri的無法正常打開【webapp 無法打開外部的 URI ，比如 Safari 里的網站，打電話，打開 AppStore 等。任何 URI 都會忽略。】

2 JavaScript對話框被關閉了 【標準的對話框無法使用了，比如 alert, confirm 或 prompt 。】

3 如果你的應用使用了應用緩存（AppCache ），或者你正在通過hash或其他技術管理狀態，那么歷史對象將不會保存導航歷史。【因此 history.back() 將不起作用，history.length 永遠是 1 。】

除了這些問題，還有一些設計上的問題。

第一，基于JavaScript的滾動組件，無法隱藏工具欄。

第二，移動版的Safari中移除了"全屏"按鈕。如果你的應用布局是絕對定位，那么這是一種限制。 suggested by Andrea Giammarchi 提出了一種變通方法，就是讓用戶通過操作（比如滑動手勢）來復位到全屏。而且一旦進入了全屏，屏幕底部區域附近的任何觸摸操作都會調用工具欄，讓人感到非常的不方便。

第三，在iOS中，左右滑動的手勢一般會引起界面10%的移動，這個手勢被當作是前進/后退請求。如果養成了這個手勢習慣，用戶會想當然的把左右滑動手勢和歷史記錄切換聯系到一起。

1 可如果你處在歷史記錄最前頁面怎么辦？

2 【在單頁 webapp （Safari 內）中，當使用 History API 或者 hash 技術管理應用狀態時，此問題相當嚴重。當用戶使用后退手勢時，他將看到同一應用的兩個圖像，可是用戶在同一個應用中。當你使用 side-by-side （并排）滾動手勢時，比如 Yahoo! 主頁，如果用戶從邊界觸發手勢（它甚至觸發了 touch 事件），可能有使用問題 ：當用戶手勢返回時，手勢和回退動畫（向右滑）也會跟一些 UI 框架發送沖突，比如 jQuery Mobile 或者 Sencha Touch，兩種動畫都會渲染（瀏覽器動畫，然后是框架動畫）。此外，當前一頁在左側并滾動到特定位置，滑動動畫的快照是正常的，但是頁面從頂部加載，并未保持原來的滾動位置。沒有辦法阻止這些手勢，因為它們是由 OS （操作系統）或者瀏覽器自身管理的。】

安卓上的Chrome是最早引入這種操作習慣的瀏覽器，但是他們根據網頁開發者的反饋，刪掉了這一特性。我們希望蘋果也能馬上做出調整。

在我們的測試中，我們發現了iOS7運行時不計其數的Bug:

1 在iPad上瀏覽時，如果正在切換內容頁面時，突然iPad橫豎向轉變，會出現屏幕渲染問題。

2 重復的運行、退出主屏幕上的同一應用會導致設備鎖住，硬件重啟才能解決。

3 RAF(Request Animation Frame)動效調用到背景的方式不對，這導致了活動頁面RAF動效的效果不佳。這將導致RAF動效的使用大幅減少。

4 在iPad上，橫屏的情況下，文檔的主體高度設置為100%時，內容會上移20px。可以通過window.scrollTo(0, 0) 來解決。

5 某些情況下，縮放一些層次復雜的物體（比如說3D 物體）會導致錯誤。位圖被拉伸。

6 CSS動效有時候在Z-Index層未計算載入前便觸發，也可能是因為Z-Index的問題。

7 使用Web Workers運行的腳本出故障，要么說明原始頁面有問題，要么說明Safari處理有問題。不能換標簽，也不能縮小Safari，也不能切換，只有停止Workers的運行才能解決問題。這是個嚴重的問題，同時也降低了整個系統的性能。

二、性能表現

在iPhone5上進行了iOS6.1和iOS7的性能對比，性能有了顯著的增長。首先我們利用Javascript計時器進行測試。剛開始的時候結果很一致，都是4ms，性能還不錯。但是使用了John Resig's standard timer test 的方法后，結果變得很奇怪，在4ms和12ms不斷跳動，而且噪音比iOS6大。

Figure 1A: JavaScript timer resolution: iPhone 5/iOS 7
 
Figure1B: JavaScript timer resolution: iPhone 5/iOS 6

不錯，在JavaScript上的表現比以前好了，SunSpider 1.0測試比iOS6.1 快15%。Octane得分比iOS 6.1高70%。Octane測試徹底展現了新系統的速度提升：斯托克斯方程表現提高了4倍，我記得兩年前買的MBP 此項紀錄是5600——也就是iPhone5+iOS7能達到桌面性能的一半！這里還測試了一些GPU運算能力。對比如下圖。

Figure 2: Octane Benchmark - iPhone 5 iOS 6 vs. iOS 7 (higher is better)

在iOS 7上，用Dromaeo平臺進行測試，我們發現DOM交互速度十分緩慢，這很不理想。DOM Query的處理速度僅僅為iOS6的50%。很多HTML5應用都依托DOM Query，所以我覺得下一個版本的更新，要優先解決這個問題。

Figure 3: Dromaeo benchmark - iOS 6 vs iOS 7 (iOS 6 = 1.00 - higher is better)
 

三、圖像表現力

iOS7的圖像表現稍有提升

Fishtank 、Mindcat測試均比iOS6高10%

SVG的測試結果出乎人意料，多虧了新的算法，SVG路徑繪制性能提高了200倍。也就是說比以前快了200倍，在iOS6中10000段SVG路徑需要11秒才能繪制出來，iOS7中53ms便可完成，iOS7的速度比Surface RT快六倍。

Figure 4: SVG Path Drawing Benchmark (lower is better)

其他和SVG有關的測試，iOS7的性能也有不同程度的提高。一些SVG過濾器現在可以使用GPU加速——這意味著iOS中將會加入更多的動效。色彩轉換（Color Matrix & Color Curves)以及displacementMaps變快了。但是一些復雜的效果，比如光照效果，iOS7運行起來依然緩慢。

結論

這么多的問題和Bug,雖然有幾項改進，但是很讓人懷疑iOS7的完成度，iOS7正式版有趕工嫌疑——為了配合iPhone 5S.這不禁讓我們聯想起Android 3剛發行的時候——為了配合Motorola Xoom平板——出現了很多Bug.我們期待iOS7的升級，希望蘋果能重視產品的質量。

iOS7需要對HTML5進一步優化，這是大勢所趨，同時也能迎合用戶的需求。

原文地址：
http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/
參考(文中【】）的部分：
http://jinlong.github.io/blog/2013/09/23/safari-ios7-html5-problems-apis-review/
優設網翻譯：@MartinRGB
轉摘請注明優設網譯文出處，謝謝各位小編。

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：156982）分享實戰經驗。
設計微博：擁有粉絲量55萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：