高性能移動Web High Performance Mobile Web - 待更新遷移

移動Web簡介

移動產品列表

•基於電視的設備，包括：智能電視，遊戲機（如Xbox）和機頂盒（如Chromecast，亞馬遜火 Fire TV等）
•桌面設備，包括使用筆記本電腦的操做系統，如Windows，Mac OS X中，Linux的或Chrome OS
•平板

•Phablets，屏幕大於5.5的手機
•智能手機，採用了大操做系統的手機如Android，iOS的，Windows或黑莓手機等。
•社交設備：Firefox OS, Nokia AshaOS，諾基亞的Asha或功能手機等
•智能手錶等穿戴設備。

移動硬件

主要衡量指標以下：

•CPU: 解析，渲染和執行
•內存：DOM樹，圖像緩存和解壓數據存儲
•GPU：一些渲染操做（一般稱爲硬件加速）
•GPU內存： 圖像緩衝區和層存儲

移動設備的CPU速度一般只有桌面設備的20%，內存一般只有30%。

移動網絡

移動網絡比Wi-Fi更不穩定。移動網絡切換時不穩定。主要移動網絡類型以下：
    
• GPRS (2G)
• EDGE (2G, 2.5G or 3G)
• UMTS (3G)
• WCDMA (3G)
• TD-SCDMA (3G 非主流)
• HSPA (3G)
• EVDO (3G)
• HSPA+ (3G or 4G)
• Mobile WiMax (4G)
• LTE (4G)
• TDD-LTE (4G非主流)

根據https://gsmaintelligence.com/的分析數據，2014年末，2G 64%、3G 30%、4G 6%。
美國：2G 20%、3G 55%、4G 25%。http://www.4gamericas.org/index.cfm?fuseaction=page&pageid=2253也提供了相似的數據。

移動網絡的速度：

注意對於不大的數據而言，不必定是帶寬越大越好。

延遲： Round Trip Time (RTT) ，由於多了手機到基站，基站到承載網管的過程，一般至關大。

手機一般有radio休眠機制以節能，3G喚醒鏈接可能要2.5s，4G能夠在100ms內完成。

移動操做系統

主流：iOS，Android

其次： BlackBerry 10， Windows，Firefox OS， Tizen， Sailfish ， ubuntu

再次：Symbian、MeeGo、webOS、Nokia Series 40等

引擎

渲染引擎

渲染引擎（也稱爲佈局引擎）是下載、解析和渲染HTML和CSS代碼和其餘相關的內容，如SVG（Scalable Vector Graphics）和圖像在屏幕上的代碼。

WebKit稱雄移動設備多年，在iOS，Android，黑莓，Symbian等都有。

如今的渲染引擎：
• WebKit
• Blink
• Trident
• Gecko
• Presto

WebKit是蘋果公司於2001年建立的開源項目, 基於KHTML（1998年建立的基於Linux的瀏覽器引擎）, 用於支持Safari瀏覽器。佈局和渲染相關的組件被稱爲WebCore。黑莓，諾基亞，谷歌，三星和Palm，iOS的Safari瀏覽器都有使用它，是最經常使用的移動領域渲染引擎。可是HTML5的兼容性不怎麼好。

Google Chrome放棄WebKit，開發了分支Blink。Opera也使用Blink。WebKit2是另一項目，主要在Nokia的MeeGo使用。

Trident是在Internet Explorer中的專有引擎，而Gecko是Mozilla基金會管理的開源引擎發動機由。

Opera多年使用專用引擎Presto。從Opera 12起改用Blink。

執行引擎

用於解釋JavaScript代碼，管理變量和對象內存的運行時。

JavaScript執行引擎有2種：經典和JIT(Just in time)編譯器。經典引擎解釋的JavaScript的同時執行。JIT引擎預編譯JavaScript代碼爲本地代碼，而後再執行，在性能方面有了很大的改進。

第一個新引擎Carakan是由Opera爲其桌面瀏覽器建立的; 而後V8，由谷歌開發的開源的JavaScript引擎，
目前在谷歌Chrome和其餘項目，如node.js中使用。其餘現代JavaScript引擎包括JägerMonkey（Mozilla基金會），IonMonkey（Mozilla基金會，自2013年），Nitro（也稱爲SquirrelFish）和Chakra（Internet Explorer）。

沒有JIT功能的引擎有：JavaScriptCore（WebKit的一部分)和SpiderMonkey（Netscape和Firefox等）。

WEB平臺

WEB平臺解析和執行網頁內容。分類以下：
•Web瀏覽器
•Web應用程序
•Web View

•電子書(好比epub和mobi都使用HTML5)

Web Apps

Web應用安裝在應用程序菜單或屏幕上。用戶看起來像應用，可是實質是HTML5，CSS和JavaScript。

但從性能的角度來看，Web應用程序包括：
•承載文件服務器
•可能的本地資源安裝
•安裝的元數據
•網頁渲染引擎和JavaScript的執行引擎加載內容，可能有瀏覽器進程的上下文
•沒有編譯或打包過程
•Web應用程序能夠從瀏覽器或從應用商店安裝

常見的Web應用程序的平臺有：
•iOS的主屏幕Web應用程序
•Chrome瀏覽器主屏幕Web應用程序
•Firefox開放Web應用程序

iOS的主屏幕Web應用程序

Safari在蘋果系統上有「Add to the Home Screen」功能。

固然站點要定義了 <meta>，添加後會以全屏顯示：

實例：http://app.ft.com/

Web應用運行在iOS上的Web進程。這個處理過程使用WebCore和Nitro, 可是和safari比有所修改。iOS 5.0 Web應用才支持JIT。

Chrome瀏覽器主屏幕Web應用程序

谷歌Chrome瀏覽器Android版33支持主屏幕Web應用程序:

網站添加到主屏幕後默認不是一個Web應用程序，直接用chrome打開。須要聲明manifest文件才行。參考資料：https://developer.chrome.com/multidevice/android/installtohomescreen。Android 4.4之後WEB應用程序和WebViews有不一樣的兼容性和性能。

Firefox開放Web應用程序

Firefox已經爲網絡應用程序建立了開放的平臺，目前只能在Firefox Android版和Firefox OS上使用。

在Firefox OS或Firefox Android上，能夠網站或Firefox的市場安裝的Web應用程序。網站安裝須要manifest文件和安裝
JavaScript的API, 市場安裝Mozilla的將處理好這些。

Web View

Web view在大多數平臺上是容許本機應用運行網頁內容的(相似按鈕，標籤和文本輸入)控件，容許本機應用程序，包括和運行網頁內容。它可使用整個屏幕或只小部分。Web view的性能可能和瀏覽器有差別。
Web view的用途：
•顯示豐富的內容
•執行JavaScript代碼
•顯示動畫或廣告
•應用的瀏覽器
•僞瀏覽器
•建立整個用戶接口和邏輯與web內容(一般被稱爲本地Web應用程序或混合應用程序)，如使用Apache Cordova或PhoneGap。
•在線web應用的本地shell

本地Web應用程序

一些平臺上有官方平臺來建立Web本地應用，無需建立本地項目，並添加Web視圖。好比：
• Apache Cordova(又名PhoneGap)，其中包含Adobe的PhoneGap構建服務
•JavaScript的Windows應用
•黑莓的WebWorks
•亞馬遜Fire OS和Android的WebApp。

•Tizen Apps

相比Web應用程序，本地Web或混合應用程序包括：
•打包網頁內容到zip或容器
•建立manifest

•簽署包
•應用商店分發

另外注意：有把web view編譯爲本地代碼的方法，好比Titanium Appcelerator。

 應用內置瀏覽器

略

僞瀏覽器

僞瀏覽器不提供本身的渲染和執行引擎，是相似瀏覽器的本地web view應用。iOS上的Chrome就是僞瀏覽器。

iOS的Web view

iOS的Web View基於WebKit的，和嵌入式Safari瀏覽器不一樣。iOS 8.0版起，咱們有兩個Web View：舊的UIWebView和新的WKWebView。

Android的Web view

多年來Android上的Web View是讓許多公司不敢使用HTML5建立本地應用程序。Android 2.X的Web View極其緩慢，4.0有所改善，但直到4.4才比較完備。4.3及之前Web View基於WebKit，從4.0到4.3基本相似。爲此一些Android的廠商，包括三星和HTC用現代版的WebKit或Chromium替換默認Web View。

亞馬遜Kindle Fire保持着原生Android Web View，2代增長了Amazon Web View，基於Chromium 18。Fire Phone中在Android 4.2使用了Amazon Web View。
Android 4.4 (KitKat)，谷歌用Chromium 30替換了Android Web View。4.4.1使用33。Android 5.0使用39，並支持更新。

Crosswalk：英特爾基於Chromium的開源項目。能夠爲Android 4.0+注射的WebView，支持Chrome瀏覽器的最新版本，可是包比較大。

Windows的Web view

基於Trident和Chakra，不支持注射web view。

注意Firefox OS沒有本地應用，一切都是web app。