移動端實戰總結

標籤：基於      cpu   view   不同的   測試   web   apple   頻率   

概述

作業系統：現在分成兩大陣營：ios和android，基本局勢已定。

基於這兩種作業系統，網頁開發的共同點：

1.兩個系統瀏覽器都是webkit核心的，so--移動端的web開發主要面向webkit核心的瀏覽器開發，不用顧及IE等瀏覽器。

2.移動端的瀏覽器對HTML5支援較理想，可以使用HTML5的特性。

移動端的瀏覽器按照存在形式可以分為下面幾類：

• 內建瀏覽器
• 使用者安裝瀏覽器
• WebView
• 代理瀏覽器

內建瀏覽器

內建瀏覽器搭載在系統韌體中，一般由系統產商開發，如 iOS 的 Safari，Android 的 Android WebKit 或 Chrome。

內建瀏覽器一般無法單獨升級，需要升級系統才能更新。所以，有時會被又老又爛的內建瀏覽器拖住開發後腿，尤其是 Android 平台。所以適配內建瀏覽器的時候要關注系統的版本。

使用者安裝瀏覽器

有許多瀏覽器是使用者可以自行下載安裝的，如 Chrome、Firefox、Opera、UC、QQ 等。

需要注意的是，同是使用者安裝瀏覽器，不同平台上會有本質差別，如 iOS（包括 Windows Phone）不允許使用其他的渲染引擎，所以 iOS 上的 Chrome 並非它該有的 Blink 核心，Firefox 的核心也不是Gecko。

使用者安裝瀏覽器可以被更新，獲得最新的功能和更好的體驗，這點區別於系統內建的瀏覽器。

使用者習慣地區差異：

• 國外（例如美國）：很少有使用者去安裝別的瀏覽器——就算知道可以安裝；
• 我國：使用者會下載（有時可能是「全家桶」之類的被下載）安裝各種瀏覽器，如 QQ、UC 瀏覽器。

WebView

WebView 是系統提供給原生應用的內建瀏覽器介面。比如 iOS 上的第三方瀏覽器，都是基於系統 WebView 開發。

WebView 一般是獨立的程式，使用內建瀏覽器的底層組件（如渲染引擎、JavaScript 引擎），但某些方面可能會有所不同，如效能上會有所限制。從實際操作情況來看，有些時候確實調用的webview和系統內建瀏覽器是不一樣的。瀏覽器裡一個樣，webview裡又是一個樣。

代理瀏覽器

代理瀏覽器在其伺服器上渲染 HTML、CSS，執行 JavaScript，然後把結果返回給瀏覽器。如 Opera Mini、早期的 UC 瀏覽器、Nokia Express 等。

與代理瀏覽器相對應的是完整瀏覽器（full browser），即把資源下載到用戶端渲染、執行的瀏覽器。

ios  VS android 不同：

1.對於瀏覽器來說，android廠商片段化比較嚴重，然後webkit瀏覽器又是開源的，所以市面上的webkit核心瀏覽器的版本很多。廠商總是根據自己的喜好來修改webkit瀏覽器，這導致HTML5片段化很嚴重。Android 4.4 之前的 Android 系統瀏覽器核心是 WebKit，Android4.4 系統瀏覽器切換到了Chromium，核心是 Webkit 的分支 Blink。

（例子，需要實際裝置實驗）例如對input type="date"的實現，有些廠商實現了這個標準，有些沒有實現，而對於實現了這個標準的瀏覽器，介面展現及互動又不盡相同。而除去系統內建瀏覽器，還有各app的webview，6.1版本以上的android使用者，都是使用的QQ瀏覽器的X5核心，5.4-6.1之間的版本，若使用者安裝了QQ瀏覽器就是使用的X5核心，若使用者未安裝瀏覽器，使用的是系統核心。

2.從系統的角度而言，android系統版本的片段化也很嚴重，現在已經到6.0了。之前主要分2.X和4.X階段(3.X主要為TV等裝置製作)，其中2.X版本的瀏覽器是webkit533.X版本，這個版本的瀏覽器是Google為手機訂製的，是精簡版的，對HTML5的實現不是特別徹底。其中又以2.3版本為界限，2.3之前的版本對HTML5支援不是很好，2.3之後的版本開始移植PC的Chrome代碼，有了一次飛躍。截至2016年3月，可能還有超多使用者再用Android 2.3版本，比如使用者中有3%使用者使用Android 2.3及以下版本。

3.ios是封閉的，蘋果不允許使用其他渲染引擎。且apple對於HTML5標準的實現較好，so ios上HTML5的支援情況較好。這種封閉性對瀏覽器廠商可能是束縛，對使用者和 Web 開發人員則是好事，保持一致的使用者體驗，降低開發、測試成本。

然而，雖然同樣基於 iOS 提供的 WebView，Chrome、Firefox、 WebView、QQ 瀏覽器、UC 瀏覽器等還是會存在細微差別，在 Safari 上正常的功能，在這些使用者代理程式上未必。

4.ios和android對於html5的規範實現在介面層和互動層的實現是不同的，就拿上面的列子來說 type date的日期控制項，ios和android的互動實現，不太一樣。雖然都按照w3c的標準進行了實現。select的實現也不盡相同，UI五花八門。

移動端裝置效能

移動端和案頭端開發差異比較大的地方還有移動端裝置的效能。需要瞭解下移動端裝置的效能特點。

移動端裝置的硬體發展還是很迅速的，但是與電腦裝置比起來還是有差異。所以在移動端，效能和功能需要一個平衡點。例如一些複雜的動畫，看上去很炫酷，但在網頁啟動並執行時候，會發現手機有點發燙，並且電量消耗很快，不一會又要充電了。所以移動端網頁，效能是會受到一定的限制的。web受效能的影響比起native還是會大些，由於web不是編譯型語言，只能在裝置上解析運行，加上webkit核心所佔用的記憶體較大，並且是單進程的應用，所以受CPU、記憶體的影響更大。

頁面渲染

移動端web在效能上影響較大的是渲染問題，js問題不那麼突出，原因是android使用了V8引擎，比較大幅度的提升了指令碼執行效能。移動端頁面渲染和PC端有較大差別，原因在於案頭端在頁面渲染上，有高效能的硬體，加上強勁的顯卡，效能甩移動端好幾條街。而移動端有限的硬體效能，加上沒有專門的顯卡，使得所有頁面渲染的工作都由CPU來執行，CPU本身的執行頻率有限，會造成頁面渲染緩慢。所以在手機上，頁面大量渲染的時候，容易出現卡頓，比如渲染一個很長的列表，滑動的時候就容易卡。還有比如頁面的切換，也容易卡。所以涉及到頁面渲染，就更需要小心處理了。

鍵盤

鍵盤和案頭端也有很多不同。

移動端使用軟鍵盤，在喚起軟鍵盤的時候，布局會發生微妙的變化，可能會影響頁面的布局。由於手機的介面非常小，所以鍵盤會佔據很多空間。對鍵盤配置的處理，ios和android也是不同的。

 

移動端實戰總結